How to transfer your Flickr photos to a WordPress site

As you will have seen, I’m using a website. Many of the themes are free of charge – some themes are called premium themes, which you would have to pay for.

I have just done a Google search for photographic themes – there are 123 of them at present. Mine is called Nishita, which I think looks classy, though the text is not all that easy to read. For easier viewing, you could opt for having black text on a white background with this theme.

There are two photo sizes for this theme – 1024 px width for the header, and a maximum of 768 px width for other photos on the site. As regards the smaller photos, you could create this width in a photo-editor such as Photoshop Elements, and then upload it into the website’s media centre, and then to insert it into the post you’re writing.

Now if you’ve already uploaded a batch of photos onto Flickr (either at full size or reduced size), you can get one or more of these photos onto your site, rather more quickly. The key to this is to look for the “embedding code” of your Flickr photo …

Starting with your Flickr site …

1.Open up your Flickr photostream.

2. Click on the photo you would like to add to your WordPress site, so you can see your photo against a black background.

3. Click on the Share icon to open up a menu similar to the one below.

Flickr - embedding code for a photo
How to get the embedding code for your Flickr image

4. Select Embed, and then click on the arrow alongside the current image size, to bring up another menu of varying images sixes.

5. Click on a size you’d like, to add to your WordPress post … for example the Medium size: 640 x 426 px.

6. Next, use your keyboard keys to copy the embedding code … Ctrl + the letter C (Mac users: use the Command key + the letter C)

Now switching to your WordPress site …

1. Log into the login page:

2. Select “My Site” at the top left of the page

3. Click on “Add” next to “Blog Posts”

4. Start writing a new post, writing the title first, and then below the text editor, start adding some text, up to where you’d like to add your first photo.

5. Now if you paste in the Flickr embedding code, you will end up with seeing just the code and not photo … for example …

<a data-flickr-embed=”true” href=”; title=”IMG_8628artr”><img src=”; width=”640″ height=”426″ alt=”IMG_8628artr”></a>// 

The trick is to select the HTML button at the top right of the text editor. Now, paste the embedding code onto the page. Next, click on the Visual button, and your image will appear as if by magic …

                                                                       poppy photo

6. Carry on writing to complete your post, adding more images if you like.

7. Press the blue “Publish” button, to post your article onto the internet.

8. You can now view your post online. You can go back to edit it if you so wish, and then upload the edited version.

All this might seem daunting if you haven’t done this before, but this process is fairly easy and quick to do. A professional web designer will no doubt point out that you’ve missed out on adding descriptive text for each image (which is usually added during the fuller uploading process). However, you could add a small description for each image just above / below the image instead, so that those viewers who are blind (or who are of limited sight) can understand what the image is about.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: