< 1. PresentationObjects and Components    |    Index    |    3. Slots >
--- # 2. Content integration with PresentationObject Factories > **Hint:** If you used the [Kickstarter](./Kickstarter.md) to create your component, an empty factory has already been created alongside the PresentationObject. In this tutorial, we're going to write a PresentationObject factory for the image component we've created in "[PresentationObjects and Components](./PresentationObjectsAndComponents.md)". Let's assume that we have a `Vendor.Site:Content.Image` node type with the properties `image__src`, `image__alt` and `image__title` that we want to integrate with our Image component. ## Writing the factory PresentationObject factories are co-located with their respective PresentationObjects. It's recommended to create factory methods with a speaking name prefixed with `for*` or `from*` to describe their use-case. When your code base grows, the factory will act like an index showing you all the different places in which the respective component is used. *`EXAMPLE: PresentationObject Factory`* ```php getNodeType()->isOfType('Vendor.Site:Content.Image')); return new Image( $node->getProperty('image__src') ? $this->uriService->getAssetUri($node->getProperty('image__src')) : $this->uriService->getDummyImageUri() $node->getProperty('image__alt') ?? '', $node->getProperty('image__title') ); } } ``` ## Registering the factory Each factory that extends `AbstractComponentPresentationObjectFactory` automatically implements the `Neos\Eel\ProtectedContextAwareInterface` and can be used as an Eel helper. To make our factory available in Fusion, we need to register it in the Settings: *`EXAMPLE: Settings.PresentationHelpers.yaml`* ```yaml Neos: Fusion: defaultContext: Vendor.Site.Image: Vendor\Site\Presentation\Image\ImageFactory ``` ## Connecting the factory to content element rendering Neos uses the `Neos.Neos:ContentCase` to map nodes to rendering prototypes. For our `Vendor.Site:Content.Image` node, the entry point is going to be a Fusion prototype of the same name. From here, we just need to extend `Neos.Neos:ContentComponent` and provide our PresentationObject component `Vendor.Site:Component.Image` as the renderer. As the `presentationObject` we pass the result of the `forImageNode`-method of our newly registered `ImageFactory`. *`EXAMPLE: Resources/Private/Fusion/Integration/Content/Image.fusion`* ```fusion prototype(Vendor.Site:Content.Image) < prototype(Neos.Neos:ContentComponent) { renderer = Vendor.Site:Component.Image { presentationObject = ${Vendor.Site.Image.forImageNode(node)} } } ``` That's it! Our image component is now fully integrated and can be edited in the Neos Backend. ---