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
Comment #2
afoster commentedComment #3
grienauerFirst: 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…
Comment #4
sgalindo2388 commentedRe-created patch from latest dev version.
Comment #5
chris burge commentedComment #6
chris burge commentedThis patch tests successfully in my testing.
Comment #7
chris burge commentedSomething 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 ofmachine_namewould bemachine_nameinstead ofmachine-name.Comment #9
ijsbrandy commentedThe 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.Comment #10
ijsbrandy commented