"rounded" CSS class name jumps to nested img from ce_text

[spirescreative]

Hello,

I have Contao 4.9 setup with the Bootstrap For Contao Bundle installed. The fact that the BS module is installed may or may not be relevant, but for the purposes of this question I want to ask you about this issue before I take it to the Contao Community.

I have a regular page created. I switch to Articles to edit the page and create a new Text content element. The text is irrelevant, but I add an image in the Image settings. Then I add CSS Class names to the page under Expert Settings - e.g. "p-3 bg-light rounded text-dark"

When I render the page, all of the CSS class names are correctly connected to the ce_text div EXCEPT the class name "rounded". This name gets pulled from the ce_text div and placed directly on the nested img tag's class on the page.

Here's what the HTML snippet looks like:

<div class="ce_text p-3 bg-light text-dark block">
<h2>This is a Header</h2>
<figure class="image_container float-left" style="margin-right:1rem;">
<img src="assets/images/3/some-image.png" width="175" height="200" alt="" class="rounded" itemprop="image">
</figure>
<p>This is the page text.</p>
</div>

The class name "rounded" should be in the ce_text div, not the img tag. If I remove the image, the class stays with the ce_text div. No other word seems to trigger this. Since the name "rounded" is associated with Bootstrap, I thought it might be best to first see if this is something that's misconfigured with the Bootstrap bundle rather than with Contao itself.

Look forward to your insight on the matter.

[dmolineus]

The replacement of the class is indeed a feature of this extension. In Bootstrap 4 the rounded class is associated with the image element and has to be defined there. Therefore the class is rewritten to the element here

layout/src/View/Template/ReplaceImageClassesFilter.php

Lines 45 to 47 in 7c3cc8a

	if ($cssClass === 'rounded' || substr($cssClass, 0, 8) === 'rounded-') {
	$imageClasses[] = $cssClass;
	unset($cssClasses[$index]);

Unfortunately there's no option to configure the behaviour of the class. You can however adjust the configuration of the filter, see

layout/src/Resources/config/contao_bootstrap.yml

Lines 51 to 52 in 7c3cc8a

	replace_images_classes_templates:
	- 'ce_*'