Skip to content
  • Documentation >
  • Content management >
  • Images >
  • Add Image Asset from DAM

Add Image Asset from Digital Asset Management

With the Digital Asset Management (DAM) system connector you can use assets such as images directly from the DAM in your content.

DAM configuration

You can configure a connection with a Digital Asset Management (DAM) system under the ibexa.system.<scope>.content.dam configuration key.

1
2
3
4
5
ibexa:
    system:
        default:
            content:
                dam: [ dam_name ]

The configuration for each connector depends on the requirements of the specific DAM system.

You can create your own connectors, or use the provided example DAM connector for Unsplash.

To add the Unsplash connector to your system add the ibexa/connector-unsplash bundle to your installation.

Add Image Asset in Page Builder

To add Image Assets directly in the Page Builder, you can do it by using the Embed block. The example below shows how to add images from Unsplash.

First, in templates/themes/standard/embed/, create a custom template dam.html.twig:

1
2
3
4
5
6
7
{% set dam_image = ibexa_field_value(content, 'image') %}
{% if dam_image.source is not null %}
    {% set transformation = ibexa_dam_image_transformation(dam_image.source, '770px') %}
    {% set asset = ibexa_dam_asset(dam_image.destinationContentId, dam_image.source, transformation) %}
    {% set image_uri = asset.assetUri.path %}
    <img src="{{ image_uri }}">
{% endif %}

The 770px parameter in the template above is used to render the DAM image. It is the unsplash specific image variation and must be defined separately.

Next, in config/packages/ibexa.yaml, set the dam.html.twig template for the embed view type that is matched for the content type, which you created for DAM images. For more information about displaying content, see Content rendering.

1
2
3
4
5
6
7
8
9
 ibexa:
   system:
     site:
       content_view:
         embed:
           image_dam:
             template: '@ibexadesign/embed/dam.html.twig'
             match:
               Identifier\ContentType: <dam_image_content_type_identifier>

In your configuration file add the following configuration:

1
2
3
4
5
6
7
8
9
dam_unsplash:
    application_id: <your_application_access_key>
    utm_source: <your_utm_source_name>  
    variations:
       770px:
            fm: jpg
            q: 80
            w: 770
            fit: max

You can customize the parameters according to your needs. For more information about supported parameters, see the Unsplash documentation.

In the Back Office, go to Admin > Content types. In the Content group, create a content type for DAM images, which includes the ImageAsset Field.

Now, when you use the Embed block in the Page Builder, you should see a DAM Image.

For more information about block customization (defined templates, variations), see Create custom block.