Down the Road

Photographs and stories by Jim Grey

Embedding Flickr images in the WordPress Gutenberg editor

Jim Grey
18 comments on Embedding Flickr images in the WordPress Gutenberg editor
1 minute
, ,

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
    Dan James

    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!

    Reply
    1. Jim Grey Avatar
      Jim Grey

      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.

      Reply
      1. Dan James Avatar
        Dan James

        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?

        Reply
        1. Jim Grey Avatar
          Jim Grey

          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.

          Reply
          1. Dan James Avatar
            Dan James

            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?

            Reply
  2. Chris and Carol Avatar
    Chris and Carol

    Great image BTW.

    Reply
    1. Jim Grey Avatar
      Jim Grey

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

      Reply
  3. Reinhold Graf Avatar
    Reinhold Graf

    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?

    Reply
    1. Jim Grey Avatar
      Jim Grey

      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.

      Reply
      1. Reinhold Graf Avatar
        Reinhold Graf

        A „classic“ block?

        Reply
        1. Jim Grey Avatar
          Jim Grey

          A brand new block of the default type.

          Reply
          1. Reinhold Graf Avatar
            Reinhold Graf

            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 :)

            Reply
            1. Jim Grey Avatar
              Jim Grey

              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.

              Reply
              1. Reinhold Graf Avatar
                Reinhold Graf

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

                Reply
                1. Jim Grey Avatar
                  Jim Grey

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

                  Reply
                  1. Reinhold Graf Avatar
                    Reinhold Graf

                    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.

                    Reply
        2. Jim Grey Avatar
          Jim Grey

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

          Reply
          1. Reinhold Graf Avatar
            Reinhold Graf

            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.

            Reply

Leave a Comment

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

%d bloggers like this: