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.

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.

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

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.

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.

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″>

Advertisement