Editor changes to images within richtext field are not applied on frontend

[indebit]

I found that at least 3 changes that are made within the Ibexa backoffice on a embed image, are not applied on the front-end.

Current setup:

• Ibexa DXP 4.6.10
• Netgen SiteAPI ^6.1.6

Steps to reproduce:

• Add an image within a richtext field for a certain Content
• Set a link to that image (maybe also a title for the link and/or set the target)
• Set a custom size from the default predefined sizes for that image
• Align the image to any side or center
• Publish the changes

Expected behavior:

• Changes made within the CMS are reflected on the frontend

Current behavior:

• The image is rendered without any changes made on the backoffice: No anchor () tag at all, no alignment and no custom size set.

I was in contact with Ibexa support as well regarding this issue, and they couldn't replicate the issue on their instances (without Netgen Ibexaa SiteAPI installed), so they pointed out to the usage of Ibexa Site API, because the value stored within the database is correct:

`

--

Eine gut geplante und hochwertige Küche erleichtert und verschönert Ihnen das Leben in Ihrem Zuhause!​ Custom h1Custom h2Custom h3Custom h4Custom h5Custom h6Custom uppercasemediumWir, von Marquardt Küchen möchten Ihnen bei der Planung Ihrer individuellen  und neuen Küche helfen und die Umsetzung für Sie so positiv und angenehm wie möglich gestalten.​ An Ihrer Traumküche sollen Sie sich jeden Tag aufs Neue erfreuen können - das ist unser Anspruch!​   Beratungstermin vereinbarenterminvereinbarungnoneredleftauto 

`

They suggested to disable Netgen Ibexa SiteAPI and to try it out, which I did, and indeed, the link tag showed up on the frontend (see screenshot attached).

I've also did some debugging and found that the vendor template (vendor\ibexa\core\src\bundle\Core\Resources\views\content_fields.html.twig) doesn't have any value for the parameters (line 443), as it's only an empty array. (see screenshot attached)

[indebit]

This is the preview from the backoffice, which confirms that Ibexa's default behavior renders the richtext field (including links attached) correctly

[indebit]

Any updates ?

[pspanja]

Hi @indebit, sorry for the delay - I'll try to look into it today.

[pspanja]

@indebit can you identify what template is used to render embedded image? Also, are you using netgen/media-site?

I tested this a bit on a media-site installation and indeed the image is rendered the way you described, but if I disable related views and the defaults are being used, the image is rendered correctly, title, link and variation included.

[indebit]

Hey @pspanja ,

Thanks for checking.
Not really sure what template is used. Can you give me please a hint of how can I identify it?
I don't use netgen/media-site.

[pspanja]

@indebit you should go to the SF profiler Twig metrics, in my case it looks like this:

That means the image is rendered using ezimage_field block in vendor/ibexa/core/src/bundle/Core/Resources/views/content_fields.html.twig. It looks like this:

[indebit]

Thanks for additional info @pspanja
This is the template chain related to the rendered image

[pspanja]

Great! Can you show me how template @standard/default/content/embed_image.html.twig looks like?

[indebit]

Great! Can you show me how template @standard/default/content/embed_image.html.twig looks like?

Sure:
vendor/netgen/ibexa-site-api/bundle/Resources/views/default/content/embed_image.html.twig

{# content \Netgen\IbexaSiteApi\API\Values\Content #}
{# location \Netgen\IbexaSiteApi\API\Values\Location #}

{% set image_field = null %}

{% for field in content.fields %}
    {% if image_field is null and field.fieldTypeIdentifier == 'ezimage' and not field.empty %}
        {% set image_field = field %}
    {% endif %}
{% endfor %}

{% if image_field is not null %}
    {{ ng_render_field(
        image_field,
        {
            parameters: {
                alias: objectParameters.size|default('original'),
                ezlink: linkParameters|default({})
            }
        }
    ) }}
{% endif %}

and there is another one here:
ibexa/core/src/bundle/Core/Resources/views/default/content/embed_image.html.twig

{% set image_field_identifier = ibexa_content_field_identifier_first_filled_image(content) %}

{% if image_field_identifier is not null %}
    {{ ibexa_render_field(
        content,
        image_field_identifier,
        {
            template: '@IbexaCore/content_fields.html.twig',
            parameters:
            {
                alias: objectParameters.size|default('original'),
                ezlink: linkParameters|default({})
            }
        }
    ) }}
{% endif %}