Keeping Custom Attributes in CKEditor

Thank you.

Might be too aggressive due to Xss::filter(), or alike.

Mind pasting before and after of source HTML to educate blazy better? You can remove sensitive info as needed.

Sure, happy to help.

The scenario is that our content editors like to put graphics inline with text, hand coding them in the CKEditor. In this case, we have an infographic that we want to use an image map on to allow people to click the section they want to explore via another webpage. We'd like to keep our page load times low by leveraging blazy for these images, but because it strips out all the existing attributes and replaces them with the TWIG contents, we lose out on some important data.

In this case, at a bare minimum, I need the USEMAP attribute to be carried over. I don't think the image and the map elements have to be siblings, but the image doesn't use the map and its links without the attribute in the img element. Note that I think USEMAP is kind of like an ID tag in the type of information it can hold.

In addition, we really should have the ALT attribute get picked up as well. I just noticed as I was grabbing code for you that it gets stripped because this is a hard-coded image and not one supplied from Drupal's media library. (accessibility should be a major concern for every website).

Ideally, I'd love every attribute in the source image be carried over. I can see the attributes at https://www.w3schools.com/tags/tag_img.asp each have their critical uses, but I can understand how it could be a headache to transfer everything and ensure it works with drupal's security filters.

This is the code as I need it to work:

<img class="width-full" width="900" height="1600" alt="The dosage probation roadmap, shows 4 phases described in a set of shapes" src="/images/dosage-probation-curved-infographic.jpg" usemap="#image_map">
<map name="image_map">
<area alt="Step 1" href="/phase-1-access-readiness/step-1-determine-if-legalstatutory-authority-permits" coords="158,224,314,317,315,377,156,469,109,346,0" shape="polygon">
<area alt="Step 2" href="/phase-1-access-readiness/step-2-assess-probation-departments-readiness-implement" coords="377,85,380,268,327,299,168,208,241,100,0" shape="polygon">
</map>

This is the code that ends up on the front-end when I have Blazy enabled in my text editor:

<div class="media-wrapper media-wrapper--blazy width-full">
    <div style="padding-bottom: 177.78%;" data-ratio="177.78" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loaded">
        <!-- THEME DEBUG -->
        <!-- THEME HOOK: 'image' -->
        <!-- BEGIN OUTPUT from 'core/modules/system/templates/image.html.twig' -->
        <img class="media__image media__element b-lazy b-loaded" decoding="async" loading="lazy" src="/images/dosage-probation-curved-infographic.jpg" width="270" height="480" alt="">
        <!-- END OUTPUT from 'core/modules/system/templates/image.html.twig' -->
    </div>
</div>
<!-- END OUTPUT from 'modules/contrib/blazy/templates/blazy.html.twig' -->
<map name="image_map">
<area alt="Step 1 - Determine if Legal/Statutory Authority Permits Early Termination" title="Step 1 - Determine if Legal/Statutory Authority Permits Early Termination" href="/phase-1-access-readiness/step-1-determine-if-legalstatutory-authority-permits" coords="158,224,314,317,315,377,156,469,109,346,0" shape="polygon">
<area alt="Step 2 - Assess Probation Department’s Readiness to Implement the Dosage Probation Model" title="Step 2 - Assess Probation Department’s Readiness to Implement the Dosage Probation Model" href="/phase-1-access-readiness/step-2-assess-probation-departments-readiness-implement" coords="377,85,380,268,327,299,168,208,241,100,0" shape="polygon">
</map>

Maybe could be a toggle in the Blazy settings where you can enable a feature to transfer all attribute values, but you're acknowledging the caveat that some values may change due to Drupal's filters and it's up to the website developers to create adaptations for their own site that pass the filter checks. This feature would have to be manually enabled and would act as a disclaimer.

Overall, I do want to say thank you for all the hard work that's gone into this module. It's really a life saver. I'm really impressed with its ease of use and smart implementation.

Let me know if you need any additional info or use cases.

Thank you for details.

It was apparently an oversight when introducing shortcodes at 2.5 :)

The method BlazyFilter::buildItemAttributes() is only called for short code item here:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.16/src/Plugin/Filt...

But not for plain images here:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.16/src/Plugin/Filt...

However, I also noticed your sample will work juts fine for external url, and non public path /sites/defaults/files/... like /customfolder/....
The reason was when public path was detected, when the gold was found, it was converted to ImageItem instance, and forgot about hard-coded IMG attributes.

Will see to it.

I couldn't provide you a patch as I am on a deadline for tomorrow release, if I could, but the fix was just in.

Aside, too many little unrelated things I just found out that I incorporated in this work. Didn't want to miss them.

If you would like to test out the DEV, and provide a feedback, that would be very much appreciated before I close this.
Thank you.

For some reason, this causes attribute SRC set, even though already unset, causing the designated lazy load failed since #item_attributes is setting the SRC discretely, regardless of already being unset.

We'll temporary remove this #item_attributes till further fixes.

If you or anyone figure out a solution, patches are welcome.
Until then this will be removed on the next commit, leaving it to old behaviors with all known and supported attributes.

Thanks.

A temporary fix was provided via hook_blazy_item_alter with the working sample codes:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.x/blazy.api.php#L355

Not ideal, yet a fix indeed, till we figure out the above-mentioned discrete behaviors, might be somewhere in there, but time is up for now.

Feel free to re-open if anyone has a more rock solid solutions without breaking the current lazy load implementation.

Thanks.

I will re-enable passing the raw attributes so to avoid another hook_alter as a temporary fix above, and see if any issues.
It appears I no longer see the above mentioned discrete behaviors since the last 2.17-beta1. Not sure where the problem is :)

This will do for now.

Sorry for the delay, I'm just getting back to this now.

The Dev version is working great! I'm seeing all the attributes. @gausarts, THANK YOU for your hard work on this :) You're a rockstar!

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