Saturday, 21 May 2011

How to display your 'Folksy Friday' images: step by step instructions.

I love looking other people's 'Folksy Friday' blogs and I try to create my own every Friday. I really like when all 6 images are displayed together in a grid so that you have a nice collage of all the different handmade articles. It means you don't have to scroll down for ages to see everything.
After talking to some of my fellow Bloggers, I decided to write down some instructions on how to do this:
1. Copy and paste the below code to your new Blogger post. Before you paste the code, you will need to swap from the 'Compose' page to the 'Edit HTML' page (the button is in the top right hand corner - see the red arrow)

 The HTML code to copy is:

<table><tr><td><img height="160" src="IMAGE 1 LOCATION"></td><td><img height="160" src="IMAGE 2 LOCATION"></td><td><img height="160" src="IMAGE 3 LOCATION"></td></tr>
<tr><td><img height="160" src="IMAGE 4 LOCATION"></td><td><img height="160" src="IMAGE 5 LOCATION"></td><td><img height="160" src="IMAGE 6 LOCATION"></td></tr></table>

2. Next, whatever is red in the code above needs to be replaced with actual location of your chosen images.
Where do you get this info? Go to the actual item you want to show (in the seller's Folksy shop) and right-click on the main picture. Select 'Copy Image Location' and then paste this (by right-clicking) instead of the red text IMAGE 1 LOCATION (the black commas before the IMAGE 1 LOCATION need to stay there). You will need to do this 5 more times for each picture (you have 6 picture in total).


As an example, this is what the HTML code would look like to display 6 images from my Folksy shop:

<table><tr><td><img height="120" src="http://d200fahol9mbkt.cloudfront.net/item/14161909/personalised_bracelet_with_names.jpg"></td><td><img height="120" src="http://d200fahol9mbkt.cloudfront.net/item/13945929/personalised_name_necklace.jpg"></td><td><img height="120" src="http://d200fahol9mbkt.cloudfront.net/item/14152749/personalised_jewellery_with_photo_charm.jpg"></td></tr>
<tr><td><img height="120" src="http://d200fahol9mbkt.cloudfront.net/item/11210161/personalised_jewellery_item.jpg"></td><td><img height="120" src="http://d200fahol9mbkt.cloudfront.net/item/12935681/personalised_name_jewellery.jpg"></td><td><img height="120" src="http://d200fahol9mbkt.cloudfront.net/item/13767545/child_name_silver_necklace.jpg"></td></tr></table>


3. You can then swap back to 'Compose' (see the red arrow at the top) to see the result! You can also change the size of the images by changing the number in the HTML code (you must change all 6 of them). It now says "160" but that can be lower or higher (in my example, it is 120 to make smaller pictures). 
You can now continue to write your blog below the images as normal. Don't forget to preview your final blog before publishing.

I hope this makes sense (and it actually works), if you get stuck, please get in touch.
PS: if anyone knows of a simpler way of doing this, please let me know! I'm still learning too.

1 comment:

  1. Thanks for this, did my Folksy Friday in a similar layout to this today using your instructions, really helpful! Hx

    ReplyDelete