I want to create a banner for blog page & want the banner to change based specific blog.

[sakinur_rahman]

I want to create a banner for a blog on a merchant's shop and I want the banner to change based on the blog. Is there any way to solve this problem? Please see the attached screenshot to understand my requirements clearly.

[Ninthony · Accepted solution]

You can make a case statement based off the blog's handle. So lets say you wanted to have a banner for your recipes blog, your travel blog, and a general banner for any other blog. You could do:

{% case blog.handle %}
  {% when 'recipes' %}
    {% assign banner_image = '/path-to-your-recipe-banner.jpg' %}
  {% when 'travel' %}
    {% assign banner_image = '/path-to-your-travel-banner.jpg' %}
  {% else %}
    {% assign banner_image = '/path-to-your-general-banner.jpg' %}
{% endcase %}
<style>
//This is for a background image should you go that route. 
//Alternatively you can put it inside the banner-container div in an image tag.
.banner-container {
height: 300px;
background-image: url('{{ banner_image }}');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="banner-container">

</div>

[sakinur_rahman · Accepted solution]

I have another query. If I want to add different little on the banner image, how it would be done? Thank you for your great concept.

[Ninthony · Accepted solution]

I assume you mean "title" not "little". Let's say you want to put the title of the blog directly in the center of the banner. You need to make your banner container's position relative, and the title's position absolute:

{% case blog.handle %}
  {% when 'recipes' %}
    {% assign banner_image = '/path-to-your-recipe-banner.jpg' %}
  {% when 'travel' %}
    {% assign banner_image = '/path-to-your-travel-banner.jpg' %}
  {% else %}
    {% assign banner_image = '/path-to-your-general-banner.jpg' %}
{% endcase %}
<style>
//This is for a background image should you go that route. 
//Alternatively you can put it inside the banner-container div in an image tag.
.banner-container {
height: 300px;
background-image: url('{{ banner_image }}');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.banner-title {
position: absolute;
left: 50%;
top: 50%
transform: translateX(-50%)translateY(-50%);
}
</style>
<div class="banner-container">
  <div class="banner-title">{{ blog.title }}</div>
</div>