How to Hotlink Photo From Flickr to WordPress

I am not a coder or web developer so bear with me in my none tech talk ways 😁 Also I am not a writer. This is how I hotlink my Flickr photos to my WordPress Blog. What am I calling hot-linking you ask?? For me it means that my images are stored on Flickr but are shown on my WordPress Blog by linking. This is done by using a little HTML code.

Note: If you have some knowledge of HTTP and linking go to Short Summary at bottom of this tut.

NOTE: YOU DO NOT NEED TO KNOW ANY HTML CODING OR CODING OF ANY KIND TO DO THIS! I am living proof of this, if your took all the coding I know and put it in a thimble and shook it twice it would be lost forever! The point is, you can do this even if you know nothing about any HTML or coding of any kind.

Let us start.

Upload the images you plan to post on WordPress to your Flickr.

How to Hotlink Photo From Flickr to WordPress with clickable link to a lager image. In other words clicking the photo on WordPress will give you a bigger images. Why do this you ask …?? Not all folks have fast internet service and getting pages to load with full size images is really slow and sometimes not possible.

I never put full size images on the web, I see no need to. My largest image size is (2000 X “whatever”) with 2000 being the largest dimension. I think this is big enough and more than sufficient to show the quality of the image.

To make loading easier I use clickable images in a smaller size and that is (640 X “Whatever”) with 640 being the largest dimension.

In summary  I  post images in a size of (640 X whatever) on my blog and make than Clickable to view at (2000 X Whatever). Again, the 640 and the 2000 are always the largest of the dimensions of the images.

So now we know what we are doing …. on to how we do it.
First of all copy the code below and put it in a Notepad, clipboard Manager or a Sticky Note on your desktop and save it forever, just get it stored somewhere handy because you will need it to hotlink ever image.

<a href=”XX Large Image Here XX” target=”_blank” rel=”noopener”> <span style=”color:blue;”> XX Small Clickable Image Here XX </span></a>

Note: All text inside of the XX (to include the XX will be replaced by code from Flickr).
Let us call this XX location for small image XX Small Clickable Image Here XX and XX location for large image XX Large Image Here XX. Don’t worry with it for now.

Okay got that line of code stored away? Let us open some tabs and do some logging in! Start by opening at least two tabs in your browser. Also open a text editor (for Windows user that can be Notepad) you can likely do this in most any text editor.

On tab one Login to WordPress, on Tab two login to Flickr. Upload your images to Flickr if you haven’t already done so. Go to your Blog tab and make sure you are in are in the HTML code mode on your blog . If you’re like me you will be in the admin editor (1)below, or you may be in the normal New Editor (2)below. Choice text in the Admin Editor, or HTML in the normal New Editor.

Editors

Next pick the spot in your blog where you want your image to be and paste the above code there. (The code you got safely stored away) 👌

Now go to your Flickr tab

Click on your image in Flickr that you want to link to. At the lower right you will see some symbols (image below) click the share symbol.

get-code

This will put up a white box. In that box click Embed(Image below) and that will change the box a bit.

Embed

Let us get the code for the smaller clickable image (the one that will show on our blog and is smaller for easy loading).

At the bottom of that Embed box you have a drop-down menu with different sizes, click it and pick (640 X Whatever) With 640 being the largest dimension (Note: you can pick the size you like but for now just pick the 640). Now at the top of that box there will be some code (just under the Embed).

Right click this code, that will highlight it and give you a drop-down menu and from that menu pick Copy. Now go to your text editor(Not WordPress Editor) and paste that code in the text editor. It should look something like the code below.

Note: Ignore the red below and space between code, look at it as a whole. There will be no red and no space between the code. (My theme is causing this)
Note 2: I can’t get this to display right so I am posting a images of it too. (A clickable image 👍 )

<a data-flickr-embed=”true” href=”https://www.flickr.com/photos/99998229@N05/33173500886/in/dateposted-public/&#8221; title=”Poppy-phone-2-20170302″><img src=”https://farm4.staticflickr.com/3887/33173500886_439a7d7595_z.jpg&#8221; width=”640″ height=”165″ alt=”Poppy-phone-2-20170302″></a>//embedr.flickr.com/assets/client-code.js

Click for a larger view.
Small-Image-Code2

Now we only need part of that …. the part we need is the code below or the highlighted part in the image above and it will look something like the code below. So on your code you find the <img src and that is the start and then it ends with the greater than symbol. You copy that part of it, as below. This will be the small image that shows on your blog.

Note: Ignore the red below and space between code, look at it as a whole. (My theme is causing this). It start with <img src and ends with “>

<img src=”https://farm4.staticflickr.com/3887/33173500886_439a7d7595_z.jpg&#8221; width=”640″ height=”165″ alt=”Poppy-phone-2-20170302″>

Okay, back to your blog we are going to paste this part into the code we put on your blog earlier. Paste this part over the XX Small Clickable Image Here XX on the code in your blog, now the code in your blog should look something like this after pasting …

Note: Ignore the red below and space between code, look at it as a whole. (My theme is causing this).

<a href=”XX Large Image Here XX” target=”_blank” rel=”noopener”> <span style=”color:blue;”> <img src=”https://farm4.staticflickr.com/3887/33173500886_439a7d7595_z.jpg&#8221; width=”640″ height=”165″ alt=”Poppy-phone-2-20170302″></span></a>

We now have a clickable image on the blog and we just need somewhere to go when we click it, which of course is the large image.

So ….. back to Flickr. On Flickr in the Embed box we are going to pick the size we want to show when the image is clicked . For me that is (2000 X whatever). Once you have pick the size in lower part of the Embed box, again at the top of the Embed box right-click the code and copy.

Back to the text editor and paste. The code will be a little different this time because we have a different size. Should look something like this …

Note: Ignore the red below and space between code, look at it as a whole. There will be no red and no space between the code. (My theme is causing this).

<a data-flickr-embed=”true” href=”https://www.flickr.com/photos/99998229@N05/33173500886/in/dateposted-public/&#8221; title=”Poppy-phone-2-20170302″><img src=”https://farm4.staticflickr.com/3887/33173500886_2fc475386d_o.jpg” width=”2000″ height=”516″ alt=”Poppy-phone-2-20170302″></a>//embedr.flickr.com/assets/client-code.js

This time we need less of the code, we need the code below, or the part in (bold and red) in the code above. When looking for this again find <img src and go to the https to start and end with jpg.

https://farm4.staticflickr.com/3887/33173500886_2fc475386d_o.jpg

Paste this part over the XX Large Image Here XX in the code on your blog ….
you are done!! Should look a lot like the code in the image below.

Done

If there is something you don’t understand or have question about please ask in the comments.

Short Summary ….

which you will be able to use once you have done the long version a time or two. Once you have used the short summary a few times you will not need it either.

1. Post save code to your blog. Make sure your WordPress Editor is in HTML code mode first.
2. On Flickr get code for small image and paste to small image XX location on blog.–
In the Embed box with size (640 X Whatever) Selected copy code and paste to Text editor, copy needed part for small image, It start with <img src and ends with > Paste to XX Small Location on blog.

3. On Flickr get code for large image and past to large image XX location on blog.
In the Embed box make sure the large size image you want when small image is click is selected in the size drop-down and then copy code. Paste code to text editor and copy needed code for XX Large Location. It is right after img src and start with https and ends with jpg. Paste to blog XX large Location.

4. Done!

Posting image Without a clickable part

I hope you have read the above part because it is the best way to post images in your blog. However I am now going to tell you a short way to post images that are not clickable but you can pick the size you want to show.

After posting your image go to Flickr go the share box/Embed and pick the size image you want to display, copy the code and paste to text editor(not WordPress Editor) and then get the part for the small image (as Above) and paste that straight into your blog without anything else. It will display the image in the size you picked.

Example, the below code will place an image in your blog all by itself.

<img src=”https://farm1.staticflickr.com/908/40390822320_8f9c045a9c_o.jpg&#8221; width=”1366″ height=”103″ alt=”Small-Image-Code2″>

9 thoughts on “How to Hotlink Photo From Flickr to WordPress

  1. Interesting, John. I have one question. Why do you or I want to have images that are clickable to larger ones? Also, why use images on your blog that are stored on Flickr at all?
    Sorry if I’ve missed a major point. Thanks,
    Amanda

    Liked by 1 person

    1. Hi Amanda, thank you for asking, it will give me a chance to explain in more detail why one might want to do all this!

      First, I’ll answer why use images that are link to and stored on Flickr and not stored on WordPress. Storage is the short answer. I have the free WordPress account and it allows me to have 3 gig of space for my blog and I have been running my blog for 10 plus years now so if you start to add up all the storage that would take for all the images I have posted ….. I would likely be over my 3 gig limit now. That means that I would have to start paying WordPress for more space and that is why having my images off site is a good thing. (Plus I hope to run my blog for another 10 years!! ) Wish me luck on that one 😎

      Why make them clickable? One, if I show smaller images on my blog, that means it will load much better for folks with slower internet connection which is often a big help for people like myself that relied on mobile internet only. I have been to site where folks upload full size images and I can not view then because of the time it takes for the images to load. (think half dozen images and 2 or 3 minutes each to load) Now add to that, that I often view dozens (50 plus) of sites in one setting so if 5 or 6 of them are like that, I simple don’t have the time to view them. There are lots of folks around that don’t have fast internet all the time .

      Two, Okay so just post a smaller image and be done right? … Nooo, that would be way to easy!! LOL. … I am a hobbyist photographer and I follow other like myself plus some professional photographer and we sometimes like to really see the largest images possible in order to see just how good the details is on that image is. So if a person has a smaller clickable image I can always enjoy seeing their images, even when I am on a slower internet connection and if I have a good connection at the time I can pump up that image by clicking on it and really enjoy the beautiful details and other cool factors that it has 🙂

      I hope this help you and others understand why one might want to take the time to do the work above to show their images on their blogs 😊

      Thanks again for asking.

      Liked by 1 person

    1. You are welcome Hien. Is this something that you can use? I figured a Highly proficient photographer like your self would be way ahead of an old hack like myself on such things 😊

      Like

      1. I have been doing it this way for many years now and it is just kind of auto clicking, copy, paste and go for me anymore. Once you do it a few time it starts to go really easy. I know when I get on a slow connection I am glad to see the choice in some of the blogs I go to. There have been times that I have to skip over blogs that post full size images due to slow connection.
        I can sure relate to being ” good procastinator” LOL. There are time I may qualify as a “pro” procastinator!

        Liked by 1 person

Comments are closed.