Background
I'm using inline responsive images in the editor for a project. It works great but I'm forced to style my CSS based on the data-responsive-image-style attribute. We're making styles like "Content 25% width" "Content 50% width" which scale the width of the images to the container, and are used in conjunction with "align-left / align-right" to allow text to float around the image.

Problem - Using this with Captions Input Filter
Styling data attributes in css is fine and it works, but as soon as we add captions to the same images the "align-left / align-right" class attributed are passed from the image to the wrapper created by the caption filter module. This results in...

<figure class="align-left" > 
<img data-responsive-image-style="content_25_width_" srcset="..." /> 
<fig-caption> Caption Here </fig-caption>
</figure>

I can't float the container and resize the width of it without the image style class applied to the wrapper.

Solution
I've created a patch to add the responsive_image_style to the attributes['classes] array of FilterResponsiveImageStyle.php . The caption filter reads all the classes of the image and moved them to the figure wrapper.

For Consideration
I haven't had the time to review how the non-responsive image filter works. It's likely the same problem will happen with captions there. Also the machine name for image filters might not be the best option, but it's css-safe so it's a whole lot better than nothing.

Parent Issue in Core
If people think this is a good feature, and something like it isn't already in core, we should figure out how to get in the core cue.

Comments

afoster created an issue. See original summary.

afoster’s picture

grienauer’s picture

First: Thx for building this Module! I think it is a really necessary one if working with inline images.

The patch does not apply on my side.
Not for dev or 2.1 version…

sgalindo2388’s picture

Re-created patch from latest dev version.

chris burge’s picture

Status: Active » Needs review
chris burge’s picture

This patch tests successfully in my testing.

chris burge’s picture

Something to consider - it might be a good idea to run the image style machine name through \Drupal\Component\Utility\Html::cleanCssIdentifier() before adding it as a class.

Without Html::cleanCssIdentifier(), the resulting class for an image style with a machine name of machine_name would be machine_name instead of machine-name.

  • IJsbrandy committed 2fb1a90 on 8.x-2.x
    Issue #2820927 by ijsbrandy, afoster, sgalindo2388, Chris Burge: Inline...
ijsbrandy’s picture

The attribute class should be an array read here.
@Chris cleanCssIdentifier() should indeed be used to prevent "ugly" classes.

Furthermore, added an extra descriptive class 'image-style-' . $image_style_id_class.

ijsbrandy’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.