May 052015
 

There are a number of ways to assemble a photo collage and post it to your blog, Web site or social networking site. Because I’m active on Etsy, I typically do Etsy treasury collages, which allow for 16 items or product photos to be featured. This post discusses not only Etsy treasury photo collages, but also photo collages you create outside of Etsy that have clickable photos. For the purposes of comparison, each collage in this post will use the same set of six photos.

Etsy treasury as a screenshot

It’s easy to create an Etsy product collage by using Etsy’s Treasury feature, saving a screenshot of the treasury, and uploading it to your blog or Web site site, such as the one below. Many laptops and computers come with a “snipping tool” that allows you to take screenshots, but I prefer to use a browser add-on called Fireshot Pro for Firefox. It’s not free and is currently priced at $39.95, but you pay only once, and updates are free. Remember that while this Etsy treasury only has six photos, normally a treasury includes up to 16 images. The individual images are not clickable, but when you click on any part of the collage as a whole, you’re taken to the treasury page on Etsy because I linked the URL (Web address) of the treasury to it. If you type this same URL into a social networking site, in most cases the image will also appear.

Stylish Home’s Etsy Treasury Posting Tool

Sometimes you want the individual images in your treasury to be clickable. You’ll need an app to help you with this. To be honest, my experience with apps that create Etsy treasury collages has been sketchy. I used Stylish Home’s Etsy Treasury Posting Tool with success for the better part of a year, but one day it stopped working entirely, leaving blanks in my posts where the treasury was supposed to be. This app generates HTML code you can insert into your blog post that produces individual clickable images from an Etsy treasury. Perhaps this app has been fixed by now, but I’m not taking a chance.

Craft Cult-generated HTML code for Etsy treasuries

Craft Cult’s treasury widget is just like Stylish Home’s in that it generates HTML code that you can copy and paste into your blog or Web site, and the code produces individual clickable images. Sometimes, however, it doesn’t work, and when that happens, you end up with no image at all, but instead with blank space. Not good. If you use an app like Craft Cult on its “good days,” it’s important to make sure you select the snapshot version of HTML code, not the dynamic one. Why? The snapshot version is static, like a screenshot, and never changes. The dynamic version is changeable and reflects what happens when items are sold or don’t get re-listed when the listing expires. And then you get blank spots in your treasury that look pretty strange days, weeks or months later. If you delete the treasury or your treasury is set to be “private,” the same thing happens. When it works, a Craft Cult-generated Etsy treasury looks like the one below, with individually clickable images. I added the HTML code to this post after I proofread it because sometimes, when I use this widget, the HTML code stops working after the post is edited. In a word, this widget can be buggy. The treasury below is the large version. That large white space that follows the treasury is a bug—whether it’s caused by Craft Cult or WordPress is not clear, but obviously there’s not a good marriage between the app and WordPress. Sometimes it seems to slow down page loads. I don’t plan on using the Craft Cult widget anytime soon!

5/5/15 note: I edited this post one day later, and the widget did indeed stop working, and it slowed down the loading of my Web site. As a result, I have removed the code, and the image you see below is not generated by Craft Cult, but is instead a screenshot of the preview from the Craft Cult site. This preview image is not, of course, clickable. I don’t recommend this widget!

This is a Craft Cult screen shot of a preview image. It is not clickable, but gives you somewhat of an idea what it looks like when this widget works.

This is a Craft Cult screenshot of a preview image. It is not clickable, but gives you somewhat of an idea what it looks like when this widget works. It has been so inconsistent, however, that I cannot recommend it.

Etsy treasury screenshot generated by TreasuryBox

Another Etsy treasury app to consider is TreasuryBox by Brittanys Best, designed for those who use the Google Chrome browser. One of the nice features about TreasuryBox is that it takes the place of Etsy’s treasury tool and comes with some extra curator options. A treasury button is added to all product pages, and if you want to add that item to a treasury, you just click on the button and it bookmarks it. When you’re finished, you slide your cursor up to the right side of your browser bar, where you’ll find a little treasure chest icon. Click on that, and one of the options is to create your treasury with the items you’ve bookmarked. It’s really fast to create a treasury this way. If your computer shuts down in the middle of the treasury you’re creating, the items are still there when you reboot. Also, the app can automatically send notifications to the shops that are featured. One of the curator tools is a “Save” button that saves a screenshot of the image to your computer that you can then share on social networks. The individual images in this collage photo, however, are not clickable.

TreasuryBox Crochet ToolsEtsy Treasury Tool by Handmadeology

An alternative to Craft Cult’s treasury widget that generates HTML codes with individually-clickable images is Handmadeology’s Etsy Treasury Tool. There’s no app to install; you simple visit the Etsy Treasury Tool page and enter the code of the treasury you’ve created on Etsy. Instructions appear right on the page, and are easy to follow. Copy and paste the automatically-generated HTML code into your blog or Web site, and there you are! You can choose one to six columns, and four sizes: tiny, small, normal and large. The code is static, so if you make changes to the treasury later, the original version on your blog or Web site stays the same. The treasury below is large.

‘Crochet Tools’ by MisterPenQuin


Broomstick Lace Pin: a tool …

$13

Yarn Susan, Yarn Holder, Yar…

$35

Bocote Wooden Crochet Hook. …

$22.95

Yarn Bowl / Knitting Bowl – …

$40

Stitch Markers – For Crochet…

$15

Linen Crochet Hook Case – Ho…

$24

Powered By Handmadeology

Toastie Studio’s Treasury HTML Code Generator

Very similar to Handmadeology’s Etsy Treasury Tool is Toastie Studio’s Treasury HTML Code Generator. Instead of entering your Etsy treasury code, you enter the URL of the treasury. You can choose one to six columns, and one of three treasury sizes: small, medium, or large. The code appears to be static, as I added photos to this treasury after I inserted the code in this post. This is the large version, and one drawback is that it really isn’t all that large, and I can’t seem to use a centering command on the treasury.

Crochet Tools

Broomstick Lace Pin: a tool for easily making broomstick lace

$13.00
Yarn Susan, Yarn Holder, Yarn Organizer, Knitting Tool, Knitting Gift

$35.00
Bocote Wooden Crochet Hook. Size P/Q, 15 mm. Handmade.

$22.95
Yarn Bowl / Knitting Bowl - IN STOCK - Ready To Ship - Rutile Blue Glaze

$40.00
Stitch Markers - For Crochet - Handmade lampwork beads

$15.00
Linen Crochet Hook Case - Holder - Organizer

£24.00

Powered By Toastie Studio – Etsy Tools

Image-mapping software for your photo collage

Whether you want to create a traditional Etsy treasury or a photo collage comprised of images on your computer, the answer to making individual images clickable is image-mapping software. You can find several options on the Web simply by searching for “image mapping software.” I’m going to discuss only one app because it’s so easy to use. Before you can use image-mapping software, however, you need to create a collage. Visit 18 Incredible Ways to Create Photo Collage [sic] to select a collage app, upload your photos or enter URLs (depending on the app you use), let the app generate the collage, and all you have to do is find a place on the Web to host that image. You can choose a Facebook photo album, a Google+ Web album, Flickr, Photo Bucket, or even your Web site. I chose PicMonkey for my collage software, and my Web site as the image hosting site, as I have unlimited storage through my Dreamhost hosting plan.

Next, you’ll want to visit Image-Maps and enter the URL of your collage—in other words, its location. The video tutorial below, from How to Make Every Image in a Collage a Link, explains exactly how you use Image-Maps to insert a clickable photo collage on your blog or Web site.

I created a collage with PicMonkey and then uploaded it to my Web site. Because I use WordPress, it was placed into my Media Libary. I didn’t insert it into my post, but I did make a note of the URL. Then I entered its URL address into Image-Maps. I followed the steps in the above video, and then copied and pasted the HTML code into this post’s “Text” window. I will admit that it took some time to do, but it was definitely easy. One step you’ll find helpful is to re-size your collage ahead of time, which makes the mapping process go a little more quickly, and doesn’t require you to re-size the collage after you insert it into your post. This collage is 550 pixels wide.

Image Map Image Map

There’s a lot of information in this post, and many options from which you can choose. Hopefully at least one of them will work for you the next time you want to create an Etsy treasury or a photo collage with individually-clickable images. Let me know what seems to work best for you, as well as what your blogging platform is, in the comments below.

© 2015 Judy Nolan. All rights reserved.

Share

2 comments on “How to create a clickable photo collage on your blog or Web site

  1. Natasha on said:

    I used to have a WP plugin that I used for treasuries. It, too, stopped working out of the blue. Very frustrating!

    I really like the mapped PicMonkey collage. It is not only individually clickable, but I think it’s also the easiest to look at. The Handemadeology treasury pictures are about the same size, but the rest are all smaller. I also like how you have text in the middle letting people know what it is and that it’s clickable.

    Thank you for putting this great resource together!

  2. Edi on said:

    It’s too bad some of these have stopped working. I’ve used the Toastie one before and I’ll definitely look into Handmadeology’s as well next time.
    Thanks for the tutorial on the image-mapping too.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Thank you for stopping by. I appreciate all comments!

155,012 Spambots Blocked by Simple Comments

HTML tags are not allowed.