Embed images from Flickr with new editor

  • Unknown's avatar
    djleekee · Member ·

    On the old editor I have always copied a medium sized embed code directly from Flickr and just copied it into the main body of the post.

    I’ve only just began playing about with new editor and have successfully added a paragraph of text and a Youtube video but embedding an image from Flickr is beyond me.

    Any help guys?

    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    You do not need to grab the embed code to place a Flickr image on your site, but instead you can just get the URL of the page the image is on in Flickr and the paste that URL into an “embed block”

    This is difficult to explain in words, so I recorded a quick video to show you how to embed a Flickr photo using the block editor.

    You can view the at this link: https://d.pr/v/EcXlXD

    Hope this helps!

  • Unknown's avatar
    djleekee · Member ·

    Brilliant thanks for that! so so useful. i couldnt find out on all the wordpress how to’s and on youtube either so that has proved really useful.

    just one other question

    when i used to copy the embed code there was a height and width function – depending on if landscape or portrait the photos never filled the width of the theme so i’d go in and edit the width to 100% to fill the theme width.

    Is there any easy way of now achieving this in the new editor?

    thanks.

    Lee

  • supernovia · Staff ·

    Hi Lee, generally these will fill the width of whatever space you put them in, I think! If that’s isn’t working, can you send a link to an affected post or page?

    Also, here’s how to adjust height/width in Flickr videos, so it’s possible something along these lines could help.
    https://wordpress.com/support/videos/flickr-video/

  • Unknown's avatar
    djleekee · Member ·

    Thanks again for replying.

    This post illustrates how only landscape photo fill the width whereas portrait ones fall short!

    I usually go in and edit the embed code and add a width=100% but i mustve forgotten on this one!

    Will that above tweak for videos also work for images?

    I will try it now, thanks.

  • staff-mckluskey · Staff ·

    Hm, I don’t think so because you’ll be adding the URL instead of a shortcode but the Embed Block has some alingment settings you can try:

  • Unknown's avatar
    djleekee · Member ·

    Thanks all – Ive tried that and it affects positioning but not size!

    I forgot to add the post link to illustrate the difference in portrait images not filling the theme width!

    Establishment Chicken Coop by Colour Doomed

    So the only way I’ve found to work around it is to use the embed code as I have always done in the old editor and copy this into a HTML embed code block and adjust the width to 100%.

    PS can you add the most used blocks to a custom menu so you dont have to keep searching for the same few blocks? Thanks.

    So many questions but I’ve taken the leap into the new editor and it’s blowing my mind a bit! lol

  • supernovia · Staff ·

    Ahh, these are inserted within a classic editor block.

    Would you send the exact old code you used to use, and a page where that is working?

  • Unknown's avatar
    djleekee · Member ·

    Examples

    CLASSIC BLOCK EDITOR
    full width didnt work (as I forgot to amend width setting on image url)

    Establishment Chicken Coop by Colour Doomed

    Full width corrected by adjusting width to 100% in html

    Power and Glory

    USING NEW BLOCK EDITOR
    using the html block to still add the embed code from flickr and then amend to 100% in the width

    Ephemeral Snik

    Ive just created a post using the shortcodes from flickr in the next post which illustrates the difference between landscape and portrait width filling.

    https://diffgraff.wordpress.com/2020/10/23/flickr-test/

  • supernovia · Staff ·

    Okay, what I’m noticing:

    – If I embed directly from flickr, the image they send back really just isn’t as wide as the content area.

    – Rather than resize and give you a grainy / blurry result, we’re just showing the image at the width we were given.

    I did notice the embed code from Flickr will give you a different image code that results in larger images, if you specify that in the dropdown.

    If you snag a larger code, paste that into an HTML block, and then remove the “script” part, does that work?

  • Unknown's avatar
    djleekee · Member ·

    I’ve just updated the above link with further examples of embed codes and using anything above a ‘Medium’ embed code does allow the image to now fill the width.

    I’m just a bit intrigued why we have to this extra embed rather than using the Flickr shortcode which is a bit quicker and simpler.

    Thanks for replying and engaging in this subject.

    Lee.

  • supernovia · Staff ·

    If you want to send links to old posts that works, vs what’s happening now, we might be able to spot the differences in the code and make a note re: the flicker block.

    Thanks in advance!

  • Unknown's avatar
    djleekee · Member ·

    Well I think the point is that using either the old or new block editor – on portrait images only they have never filled the full width of a theme using the URL or shortcode process as recommended by WordPress.

    With the only way to force a portrait image to full theme width is to disregard the shortcode method and use html (embed code from Flickr)

    Is it only me that finds this annoying and is it being addressed?

  • staff-totoro · Staff ·

    Hi @djleekee after taking a closer look here, my feeling is that Flickr has made a change of some kind on their end that is not passing the larger image sizes when you embed using a URL like this:

    Slices of Time, Greenwich, London

    The image that Flickr gives us to display on your site is 600 x 800 px as you can see in this screenshot of the source code: https://d.pr/i/ywNKGs

    The issue is that because this is the image that Flickr is giving us, we do not have a way to make it larger (without making it also appear pixelated) so with URLs like that we don’t have another option. Flickr themselves would need to serve a larger image, which they are not doing for some reason.

    But I do see that there is a good workaround you can use, and that is to get the HTML embed code from Flickr, and then find the media image URL (inside that code) and use it in an embed block instead.

    I recorded a video here: https://d.pr/v/C2sbAr

    In that video you can see that I:

    1. choose the embed option in Flickr, and pick a larger image size
    2. Inside the code look for the image URL (it is the one that ends in .jpg)
    3. In the WordPress.com block editor, I type in /embed to quickly locate the embed block
    4. Paste in the large image URL I extracted from the Flickr embed code

    You can see when I preview the post, the image I added is now full width and just as wide as the text, instead of the Medium image Flickr normally gives with the album page URL.

    Hope this workaround helps!

  • Unknown's avatar
    djleekee · Member ·

    YES thank you! that is amazing!

    that will simplify it a bit. there is always some cutting and pasting of element but this is just as easy.

    thank you – and it works.

    Lee.

  • The topic ‘Embed images from Flickr with new editor’ is closed to new replies.