Multiple amp-image overlays. How to properly do this in wordpress?

Summary

Goal

I want to:

Add multiple overlays to an image, on a page, created with gutenberg, rendered as amp-img on the frontend. I want this kind of end result, but added through gutenberg.
When tapped on mobile (I realize I’m going to need to add amp-events for this), or hovered on desktop, I want to display a content-div, preferably on top of the image, in the bottom left corner. Iv’e accomplished about half of this, but I still can’t get the info div to display when hovering the corresponding overlay.
Make sure the overlay-divs are correctly positioned and shaped on different screen sizes since I’m using a responsive design. Seems like I’ve managed to do this myself already.

Expected vs actual results

Expected

Thought I was going to be able to simply add a custom html block in gutenberg, with a “hacked” amp-img tag containing the hmtl part in the jsbin.

Actual

I’m completely unable to control (input any element within the amp-img) the output of the amp-img tag. When I try to add the amp-img tags manually, it gets removed from the page on the front-end, due to amp-errors.

Errors

If I try to add the amp-img tag manually, using a custom html block in gutenberg, The content gets removed due to amp-errors.

What I’ve tried

Well you can see the jsbin for a general conclusion on the current state of affairs. Next, I’ll try to disable the amp-error that stops the custom html from rendering. If that doesn’t work, I think I’m going to have to change strategy altogether. Possibly creating a page-pagename.php template, and entering the content from the jsbin directly through there.

Code

See this jsbin

Conclusion / The questions

Adding an amp-img with content inside the tag – Is this simply something that’s not supposed to be done?
Can it be done from gutenberg, and if so, can it be done using any kind of good practice?

Read more here:: Multiple amp-image overlays. How to properly do this in wordpress?

Leave a Reply

Your email address will not be published. Required fields are marked *