• I am having issues using the flickr embedr to embed images in posts using the Twenty Twenty theme.

    To embed images I use the HTML generated by the flickr share tool. For example the image on this post: https://confusion.cc/2020/03/11/simian-eyes-2-0/ the flickr page is here: https://www.flickr.com/photos/beggs/49629177108 and the code for image of size 427x640px is:

    <a data-flickr-embed="true" href="https://www.flickr.com/photos/beggs/49629177108" title="IMG_6656"><img src="https://live.staticflickr.com/65535/49629177108_d41cb031aa_z.jpg" width="427" height="640" alt="IMG_6656"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

    I using the “custom HTML” block to insert the images and I add a class to the image to set alignment; alignleft, alignright or aligncenter. This seems to cause an issue between the Twenty Twenty theme and the flickr embedr resizing images to be responsive. that as soon as the viewport changes size the flickr code tries to adjust the image size in the iframe and I was getting excessive space below the images, inside the iframe, and the images are sometimes clipped. You can see this behavior on this post: https://confusion.cc/2019/09/14/tokyo-japan-december-2018/

    By wrapping the whole flickr HTML block in a figure tag it seems to fix the issue for the smaller images using the alignleft or alignright classes (see here: https://confusion.cc/2020/04/11/petra-jordan-november-2019/)

    However the larger images I use aligncenter on are still growing some, and while I don’t get any black space inside the iframe.

    So, I have a few questions:
    1. Is there anyway to prevent the iframe from resizing (I assume not since it’s controlled by the flickr JS)?
    2. Is there away to apply whatever is fixing the resizing on the smaller images to the iframe using custom CSS rather than having to go back and edit all the post containing embedded flickr images to add the figure tag?
    3. Why is the larger aligncenter image still resizing?

    The page I need help with: [log in to see the link]

The topic ‘Flickr embed responsive issues with twenty twenty theme’ is closed to new replies.