Add custom image to each collection

swd — Thu, 29 Oct 2009 18:57:22 +0000

I have a test shop set up and at the top of each of the main pages I have a main image to distunguish each section. I can easily add an image for the collection template through the theme.liquid file, but how can I target a specific collection?

To target the collection template, I have this in the theme.liquid file...

{% if template == "collection" %}<div id="homefeaturedimage"><img src="{{ 'home.jpg' | asset_url }}" /></div>{% endif %}

I've guessed at a bunch of combinations to target a specific collection without any luck, such as

{% if template == "collection.jewelry" %}

And I've read through all the documentation that I can find...Any suggestions?

Jamie commented

Jamie — Thu, 29 Oct 2009 19:10:03 +0000

I would put these in the collection description area then you don't have to deal with a bunch of conditional soup. [see screen]

swd commented

swd — Fri, 30 Oct 2009 13:09:58 +0000

Thanks, that's an option, but it doesn't allow me to place it in the layout where I would like it.

Any idea where I could find some of this conditional soup?

Jamie commented

Jamie — Fri, 30 Oct 2009 13:57:48 +0000

How does that stop you from placing it where you want in the layout?

In you can place {{ collection.description }} anywhere you want. Where are you trying to drop the collection image?

If you want to go the conditional soup method you need a case statement. Something along the lines of...

{% case template %}
    {% when 'collection' %}
        {% if collection.title == 'mycollectiontitle' %}
             [do this]
        {% elsif collection.title == 'myothertitle' %}
             [do that]
        {% else %}
             [do something else]
        {% endif %}
{% endcase %}

swd commented

swd — Fri, 30 Oct 2009 17:49:17 +0000

That's exactly the soup I needed! thanks

It wouldnt work in the collection description only because I have a conditional on the theme.liquid page telling it to pull a different image depending on every template, and I couldn't figure out a way to target each of the collections specifically to get that done, but I added in what you wrote out and it works...

Jamie commented

Jamie — Fri, 30 Oct 2009 19:45:14 +0000

Great! The beauty of pulling the collection.description is that it's dynamic and will pull in the image only for the *currently* viewed collection.

Todd412 commented

Todd412 — Tue, 10 Nov 2009 00:41:16 +0000

I am trying to something similar, though less complex than it sounds like what you're doing swd. However I'm not sure I understand how to implement your solution Jamie.

I have a bunch of "smart" collections, and for each, I have an image I would like to display on its page. I tried your suggestion Jamie of using the "insert an image into the text" feature, and I can see that it's producing html within the text description.

However, I don't want the image to be inline with the text-- I want to be able to place the image elsewhere on the page within my custom theme's layout. But the html that it gave me when I uploaded the image appears very specific to this one image:

<img src='http://cdn.shopify.com/s/files/1/0036/1722/files/collection_pic_527_395.jpg?1257810803' alt='' />

So it seems the only way I refer to those images within my collection.liquid files is if I used the "conditional soup" approach to determine which specific image to insert based on the collection's name... is there a better way?

Jamie commented

Jamie — Tue, 10 Nov 2009 01:35:45 +0000

You could try {{ collection.description | truncate: 1 }} or 2 or 10. Keep bumping that number until you just get the image and only the image. Then you can put that anywhere on your collection page. I don't have anything up at the moment to test that, but it should work if you want to avoid a complicated conditional set-up. You may have to get your collection images re-named with all having amount of characters in their file names. Like I said that's the lazy way of doing it.