Descriptions or titles for additional product images

Highlighted
Shopify Partner
2 0 0
Sorry if someone has asked this before but I couldn't find anything. Is there a way to attach descriptions to the additional product photos? I'm just wondering how people are going to know what image maps to which product option. For example, my client offers several different print styles on her clothing designs. The designs are somewhat abstract, so it's not usually apparent what style name matches the style itself. Being able to add a quick description or title to each product image would fix this. Thanks for any help you can offer!
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 140

I’ll get you close, just because I was curious about a quick solution for this too :)

No captions available. What I would do in this situation is use something like qtip to pull from the image title and have a pop-up hover. Ok so how do I make the image title behave nicely? You can’t use {{product.title}}. So you have to name the product images accordingly and accurately and use some heavy liquid filters to clean them up, because the only way I know to get access to this is through {{image}} so my convoluted hack-around would be something like the following to strip out the path, file extension and any other extraneous crap that may get in there. You may need to adjust this out.

<img src="{{ image | product_img_url: 'small'}}" class="productimage-small" title="{{ image | replace: "products/", "" | replace: "jpeg", "" | replace: ".jpg", "" | replace: ".", "" | replace: "_", " " | replace: ".png", "" | replace: "-", " " | capitalize }}" alt="{{product.title}}" />
http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
New Member
13 0 0

Just wanted to tell you thanks Jamie, I was looking for this exact solution! Saved me a lot of time and headache!

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 140

Excellent! Glad I could help!

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 314

Jamie, to be less verbose, you could use this:

{% capture caption %}{{ image | remove: "products/" | remove: ".jpeg" | remove: ".jpg" | remove: ".png" | handleize | replace: "-", " " | capitalize }}{% endcapture %} 

Use remove, instead of 'replace by nothing'.

 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 140

Thanks Caroline =) There are a few underused filters for me... old dog and all. Remove is one of them. Much more succinct.

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 314

You are an old dog for sure. Years fly by, hein? You were here when Shopify's belly button was not dry yet. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 314

Hi Simon, Jamie's solution is a no-nonsense, fail-proof approach, that uses the filename of your image to generate a caption.

If, for some reason, your image files had to have a certain name, that did not make that solution useful, you can use this technique as well:

1- Make sure to order your images, beyond the featured one (first image), in the same order as the one in which your 'Pattern' options appear on the Product Details page.

2- Then use this:

{% for image in product.images offset: 1 %}
{% capture caption %}{{ product.variants[forloop.index0].option1 | escape }}{% endcapture %}
..... show image with caption .....
{% endfor %}

Or:

{% for image in product.images offset: 1 %}
{% capture caption %}{{ product.variants[forloop.index0].title | escape }}{% endcapture %}
..... show image with caption .....
{% endfor %}
0 Likes
Highlighted
Shopify Partner
72 0 0

You people are so good at this!!!

Thanks for pointing me to this Jamie/Caroline.

I'll put my hand up and say I will probably have to revert to some professional assistance (!) to implement this, but in the meantime, it's great know there's a solution.

What I wanted to check is how best I should name the images?

Here are two examples of the captions I would want to appear:

Dandelion Two in Blue/Blue

Treehouse in Grey/Faded Red

I just wasn't sure how to name the image files?

If the / is a problem from a coding point of view, no problem, I could run with:

Dandelion Two in Blue and Blue

Treehouse in Grey and Faded Red

Now, to really complicate matters, I may have multiple images which I want to have the same caption (for instance, a standard shot AND a close up).

I wondered if I could as a prefix or suffix that is then stripped out, i.e.

A_Dandelion_One...

B_Dandelion_One...

and so on (if using a letter at the start, I'd never have more than 26 versions)

And finally - is there any limit to file name length?

Thanks again!

Simon

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 140

You are fine in this situation with any and all of those naming conventions Simon. There are plenty of canned scripts that will take advantage of the title field as well. Here's one I like: http://cssglobe.com/lab/tooltip/02/ It's from here: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes