Descriptions or titles for additional product images

Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 139

And Caroline's addition up there is so beautiful. That seems perfect for your particular situation.

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

Hello Simon,

If you want to have this caption:

Dandelion Two in Blue/Blue

For the image filename, replace every space with an underscore and replace the / with slash, like so:

Dandelion_Two_in_Blue_slash_Blue.jpg (or the same dot png).

In Liquid, later on, to 'construct' the caption, you can always use:

... | replace: '_slash_', '/' }}

As long as you don't need an apostrophe or accentuated characters in your caption, you should be able to use a filename that will easily be transposed to a caption using Liquid.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
Shopify Partner
72 0 0

Thanks Caroline!

Just one final thing...

Is there a way I could add a prefix (or suffix) that can be 'stripped out' to allow me to have multiple images with the same 'caption', i.e.

A_Dandelion_Two_in_Blue_slash_Blue.jpg

B_Dandelion_Two_in_Blue_slash_Blue.jpg

C_Dandelion_Two_in_Blue_slash_Blue.jpg

I hope that makes sense!

Simon

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 314

Hi Simon,

It would be easier to strip a suffix:

Dandelion_Two_in_Blue_slash_Blue_A.jpg

Dandelion_Two_in_Blue_slash_Blue_B.jpg

Dandelion_Two_in_Blue_slash_Blue_C.jpg

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 139

Caroline, would it be easier to strip numbers in this case? As a prefix or a suffix?

{% capture caption %}{{ image | remove: "products/" | remove: "01" | remove: "02" | remove: "03" | remove: "04" | remove: "05" | remove: "06" | remove: "07" | remove: ".jpeg" | remove: ".jpg" | remove: ".png" | handleize | replace: "-", " " | capitalize }}{% endcapture %}
http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 314

Jamie,

Yes, that would solve it very nicely. Numbers, then, could be placed anywhere, as prefix or suffix.

Simon, numbers are best in this case!

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
Shopify Partner
5 0 0

Thanks for these solutions.  They work great for me.  

Is there a limit to the number of characters that can be used in a file name?  Will extra long file names cause me any problems down the road?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 314

kerri,

Keeping the number of characters under 255 is good measure.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 139

Just wanted to chime in on this again. There is a CSS3 selector that will also get the title attribute out and apply it to a pseudo class of :before or :after. I forgot about this. Don't expect universal browser support on this by any means, but there may be a jquery script that helps non supportive browsers:

 

.product img:after { content: attr(title); }

See w3.org: http://www.w3.org/TR/css3-content/#inserting

 

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

This is an excellent thread. Thanks for that update, Jamie.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes