Embedding Flickr images in the WordPress Gutenberg editor

A couple weeks ago I published a mini-review of the new Gutenberg editor in WordPress. I said there that there was no clean way to embed images from Flickr.

I was wrong. It’s stupefyingly easy. You just paste the Flickr embed code directly into an empty block. The image appears instantly! It also hyperlinks back to the Flickr page from which it came, per Flickr’s terms of service.

Teacup
Flickr image embedded instantly into WordPress Gutenberg

This is far easier than how we all had to embed Flickr images in any previous WordPress editor. Given that I use Flickr to host my photographs, Gutenberg is making creating posts significantly faster for me!


Comments

18 responses to “Embedding Flickr images in the WordPress Gutenberg editor”

  1. Dan James Avatar

    This might be the final nudge I need to try the new editor. Reading your previous post about it, using Flickr photos seemed way more convoluted than what I do currently so it put me off.

    Something strange I’m noticing with this post though Jim (viewing on my iPad currently) is there’s no title at the top, just a sort of blank line where it should be then the words start after that blank line below. Then right down the bottom in smaller text underneath all the ads and the “likes” icons it says the title. Is this a glitch with the new editor? I wouldn’t like this, the title needs to be the first thing you read at the top!

    1. Jim Grey Avatar

      The title at the bottom is not due to the editor but rather due to me choosing the “Aside” post format. My theme formats Aside posts this way.

      1. Dan James Avatar

        Oh ok. So will all your posts now have the title at the bottom? Seems a strange choice, and the very logical side of my brain is completely baffled – many people might not even see the title as it’s after the ads, sharing buttons etc? Why would you want it hidden away like this?

        1. Jim Grey Avatar

          No — just the posts I give the “Aside” type. Regular posts still have the title at the top.

          I rather like that Asides format differently from regular posts but do find that the title on the bottom can confuse people.

          1. Dan James Avatar

            Ok. Yeh sorry I’m in the confused camp! Might be a good format for posts that are just a single image, with no need for a title?

  2. Chris and Carol Avatar

    Great image BTW.

    1. Jim Grey Avatar

      Thanks! I often photograph the teacups I find in antique shops. It’s becoming a “thing” with me.

  3. Reinhold Graf Avatar

    Just found out that they killed the old editor and I see only Gutenberg :(

    Seems to improve rapidly … there is now a special block for embedding flickr images from the image URL

    When doing so, I cannot edit size, only orientation – left, center or right aligned.
    All images seem to have the same (full) width … what would be nice … but are in low res only and cropped … what looks stupid.

    In preview, landscape orientation does not use full width and you cannot specify.
    Portrait orientation is wider than lanmdscape orientation, but does also not use full width.

    When using portrait and landsacape orientation together, the visual impression is … so ugly. And I cannot change anything. This is not not not user friendly.

    Am I the only one having this issue .. or is it simply me?

    1. Jim Grey Avatar

      I’ve discovered that you can paste the Flickr embed code directly into an empty block. Then over in the right column, which begins with “Document” and “Block” links, if you select Block you have greater control over the image, allowing you to resize it and add a hyperlink. So try that and let me know how it goes.

      1. Reinhold Graf Avatar

        A „classic“ block?

        1. Jim Grey Avatar

          A brand new block of the default type.

          1. Reinhold Graf Avatar

            Hitting ‚+‘ opens a list of many default types … one is classic one is classic paragraph … and many others. Does your ‚default‘ has a name?

            I believe it‘s me :)

            1. Jim Grey Avatar

              Just create a new block, do NOT click +, just paste a Flickr embed code into the block. The block will recognize what you are doing and insert the Flickr image.

              1. Reinhold Graf Avatar

                I knew it’s me :)
                I’m trying hard … but how do you create a new block w/o hitting “+”?

                1. Jim Grey Avatar

                  Click at the end of the previous block and press Enter.

                  1. Reinhold Graf Avatar

                    Nope … this does not work here. When doing so, I get a new line in the same block.
                    Even when creating a new post and hitting enter in the title, a new empty block appears, but when inserting the embedded code … nothing happens.

                    Maybe it is a different version of Gutenberg here – I have version 4.7.0.

        2. Jim Grey Avatar

          Ohhhhh… are you running self-hosted WordPress? I’m on WordPress.com so I get the latest releases of Gutenberg automatically.

          1. Reinhold Graf Avatar

            Indeed … its a managed service and it says it has the latest Gutenberg version.
            Maybe I give it another try later. For the moment I installed the classic editor plugin and … finished my next post within half an hour.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: