Embedded Inline Media not showing

Thank you.

It is the latest DEV, or Blazy 2.1, too? I know you marked it DEV, just in case some regressions :)

> display inline images embedded by embed media

Please clarify few terms:

1. inline images, is it using Blazy Filter?
2. embed media, is it Media embed at Filter pages?

If yes, to both, it was warned at Blazy Filter:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.1/src/Plugin/Filte...
<b>Warning!</b> Blazy Filter is useless and broken when you enable <b>Media embed</b> or <b>Display embedded entities</b>. You can disable Blazy Filter in favor of Blazy formatter embedded inside <b>Media embed</b> or <b>Display embedded entities</b> instead. However it might be useful for User Generated Contents (UGC) where Entity/Media Embed are likely more for privileged users, authors, editors, admins, alike. Or when Entity/Media Embed is disabled. Or when editors prefer pasting embed codes from video providers rather than creating media entities.

If not, please provide detailed steps for reproductions so that we are on the same page.

Assumed #2 was right. It was a known limitation more than a bug. The solution was also provided early on.

Feel free to re-open if it is not the case. Thanks.

Hi @gausarts, I'm reopening this because I have the same problem described here (src doesn't get "translated" to a valid path and starts with data:image/svg+xml;charset=utf-8

The difference is that I'm using to embed the images on ckeditor, they are using a inline view mode that is set to display using Blazy field formatter. I'm on version 8.x-2.5 of the module and I'm not using the Blazy filter on the wysiwyg. By now I can see the images on the backend, but on the front end they just don't display. The embedded images are being migrated, but even adding the exact same markup as one added through the wysiwyg, they don't render when migrated.

I have updated to the latest dev to check if this could have been fixed, but it's not the case. I wonder what could be going wrong with the path/url parsing?

If it helps with anything, I just noticed that it works on a body wysiwyg, but not on a wysiwyg field on a paragraph.

Please capture after pressing F12, be sure inspect and expand the failing section.

Not so clear what's going on there :)

Not sure if I took a screenshot of what you expected, sorry. This is what I see in the front end:

And this is what's on the backend:

<drupal-entity alt="" data-embed-button="media" data-entity-embed-display="view_mode:media.inline" data-entity-embed-display-settings="{&quot;link_url&quot;:&quot;&quot;,&quot;link_url_target&quot;:0}" data-entity-type="media" data-entity-uuid="a3b496eb-c12a-4077-a9b7-b45fed0efa6b" height="367" width="551" />

I also realized that if I go edit the paragraph and I re-save the node, it starts working although nothing changes on the markup. I think this is somehow related to Blazy because this doesn't happen if I display inline images as other display modes like image, responsive image, etc.

Thank you. Almost clear:)

Basically Blazy stops working in there.

Please try 4 below:

1. Could you capture one level above picture, .media element? In case anything useful there to verify if Blazy JS kicks in.
2. Also please check your Console tab, and screenshot if any errors?
3. Switching to Bartik any difference?
4. Press CTRL/CMD + U and verify blazy.load.js there?

Also please capture the .field element, normally has blazy blazy--field blazy--on class along with data-blazy when it kicks in.

If some of them are gone, likely overriden by certain field template.

Thank you for replying so fast and looking into this!

1. Here's the screenshot of the whole element:

2. The only messages on console were regarding css and some cookie settings:

3. Switching to Bartik made no difference.
4. Confirmed that blazy.load.js is indeed there.

Weird, all is in place, but no go :)

Last try:
Any Aspect ratio makes any difference?

If still no go, PM me your link, ah but no prod as it seems?

I've enabled twig debug, I went as high as the paragraph itself and I've copied the inspect in this txt file so it's easier to lookup for templates/classes/etc.

https://www.drupal.org/files/issues/2021-12-17/inspect.txt

Aspect ratio makes no difference :(
Correct, no production website.

> If it helps with anything, I just noticed that it works on a body wysiwyg, but not on a wysiwyg field on a paragraph.

So at Body text works, but Paragraphs failed?
So I can narrow down.

Yes, that's correct, seems that it won't work on a paragraph but same code works when embedding to body. What's also weird to me is that if I edit the paragraph and re-save the node it usually works too.

> re-save the node it usually works too.
Hm, weird indeed.

I need to get some time for this. At least you have been very detailed so I can focus on the problem better.

Frankly, no idea with such conditions by now.

I'll see if I can manage it this week or sooner :)

Ok, so I just realized that's when it's inside an accordion that it won't work (I have lots of accordions) and if I set them to be opened by default they do work.
So I'll leave this up to you if you want to investigate further, but I recognize this is a super specific bug. I'll just make the accordion to be opened by default if there's an img embed inside an accordion and problem solved for me, so feel free to close this issue if you think this is pointless.

I'd like to appreciate again all your availability in investigating this and for replying so fast :)

> when it's inside an accordion that it won't work
Yes. We got the known culprit.

Blazy, and any lazy script, script in general which relies on DOM layout lookups, will fail on hidden element.

That is why Drupal has visually-hidden class.

Your solution is one way. Normally I used CSS to force display block, and minor JS to toggle visibility with visually-hidden class. This way Blazy isn't screwed up.

Also worth trying, one at time clear cache just in case:

• At Blazy UI, enable Load invisible.
• Enable IO.

You replied faster than I could write again!
You're absolutely right, I could narrow down the issue and realized the accordions were the real problem here.

Seems that the Load Invisible worked for me, thank you very much!
I'm closing the issue now.

Ok. Glad that it works :)

In case matching design, I normally use Slick navigations to act like tabs, and disable Draggable.

Problem already solved. Template problem. Please close again.