Different banner per page

Highlighted
Shopify Partner
41 0 3

Hi,

I am trying to have a different banner per page, based on the page name.

I looked at this:
https://ecommerce.shopify.com/c/ecommerce-design/t/using-a-variable-in-pages-content-108772

and I am trying this code :

{% capture mybanner %}{{page.handle}}-banner.jpg {% endcapture %}

{{ mybanner | asset_url | img_tag }}

Using then an image name for instance media-banner.jpg for the page Media. But it is not working.

Does anyone know what I am missing?

thank you.

Flo

 

0 Likes
Highlighted
Shopify Partner
1365 24 238

What is {{ mybanner | asset_url | img_tag }} returning? Do you have media-banner.jpg uploaded into the assets?

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Shopify Partner
41 0 3

Hi Mircea,

yes I have a media-banner.jpg in the assets. I got this code from another forum, so I'm not sure it works perfectly.

I came with a solution using IFs. So, if this is page A, use banner A, elsif page B, use image B, ... It does work, it is just not dynamic. I thought capturing the page name or handle was an elegant one :). Or if there is any other solution.

0 Likes
Highlighted
Astronaut
1890 1 431

Are you placing this code in page.liquid?  When you say it doesn't work, do you see an error or do you see nothing where you would expect the banner?  You might want to paste the rest of the code that you're using.

0 Likes
Highlighted
Shopify Partner
1365 24 238

Alex is right, The code looks fine to me. Could it be the extra space at the end in:

{% capture mybanner %}{{page.handle}}-banner.jpg {% endcapture %}

 

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Shopify Partner
41 0 3

hi guys, thank you for the answers. For some reason, it did work. Here is the final code that take care of all situations, and that I insert in the theme themplate (I actually use a snippet but same result).

I removed the -banner just for simplification. Therefore one only need to name the banner with the same handle than the page, collection or blog. There is even a default banner.jpg in case a condition is not found. Let me know what you think:


<div>
            {% if page %}
           {% capture mybanner %}{{page.handle}}.jpg {% endcapture %}
           <img src="{{ mybanner | asset_url }}" class="banner">
   
            {% elsif collection %}
            {% capture mybanner %}{{collection.handle}}.jpg {% endcapture %}
            <img src="{{ mybanner | asset_url }}" class="banner">

            {% elsif blog %}
            {% capture mybanner %}{{blog.handle}}.jpg {% endcapture %}
            <img src="{{ mybanner | asset_url }}" class="banner">

            {% else %}
            <img  class="banner" src="{{ 'banner.jpg'| asset_url }}"> 
           {% endif %}
 </div>

0 Likes
Highlighted
New Member
1 0 0

This should be optimized to have random capture. More than one banner random for handle type (when someone refresh page banner change if more than one are present). Maybe someone can help to have this done. Tks

0 Likes