FROM CACHE - en_header

Header with featured image (articles) - Wokiee

Solved
Leocadie
New Member
2 0 0

Hello to all !

 

I'm working on Wokiee theme, that is very cool regarding its main features but poor for articles design.

I wrote to its creator but received no answer, and i discovered that maybe, he was ukrainian, so it is normal i've got no news (i hope he is good)

 

So i'm completely redesigning the article template and it starts looking the way i want : a hero fullwidth with the title+tag and the featured image in background, then the content + comment sections.

 

My issue is on the background image : When i test with the direct url of the image it works, but when i use the shopify object, nothing displays.

 

Here is what it looks like on theme.css side

 

.article-container .article-header{
background-image: url('{{ article.image.src | image_url width: 'master'}}');
background-size:cover;
background-position: center;
height:350px;
padding-top: 10%;
padding-left: 20%;
padding-right: 20%;

 

It works with : 

background-image: url('cdn.shopify.com/s/files/1blabla');

 

So my object must be wrong, but i cannot find the right way to call the featured image url.

Can someone help me ? 

 

Thank you so much, 🙂

Accepted Solution (1)

Accepted Solutions
SheetalZadfiya
Explorer
70 15 14

This is an accepted solution.

Hi @Leocadie 

 

Your article background image is not working properly as your theme.css file is not liquid file. For using liquid code inside css file you need to use css file with liquid extension.

 

image-20220630-061949.png

 

Currently no need to create a new css file. You just need to set your background image inside html code like this in main-article.liquid file.

image-20220630-062136.png

 

 

style="background-image: url({{ article.image | img_url: 'master' }})"

 

 

and remaining css you have add in theme.css file.

 

.article-container .article-header{
  background-size:cover;
  background-position: center;
  height:350px;
  padding-top: 10%;
  padding-left: 20%;
  padding-right: 20%;
}

 

 

Happy Coding!!

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore

View solution in original post

Replies 2 (2)
SheetalZadfiya
Explorer
70 15 14

This is an accepted solution.

Hi @Leocadie 

 

Your article background image is not working properly as your theme.css file is not liquid file. For using liquid code inside css file you need to use css file with liquid extension.

 

image-20220630-061949.png

 

Currently no need to create a new css file. You just need to set your background image inside html code like this in main-article.liquid file.

image-20220630-062136.png

 

 

style="background-image: url({{ article.image | img_url: 'master' }})"

 

 

and remaining css you have add in theme.css file.

 

.article-container .article-header{
  background-size:cover;
  background-position: center;
  height:350px;
  padding-top: 10%;
  padding-left: 20%;
  padding-right: 20%;
}

 

 

Happy Coding!!

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
Leocadie
New Member
2 0 0

Thank you so much for taking a look at it @SheetalZadfiya, it helped me.

Actually, it seems the main issue was i wrote image_url instead of img_url !!! 

I had to take a look several times before seing it (and i thought the 2 ways was OK)

But testing it, it works with img_url, not with image_url... Seems weird, but the main point is that it works now ! 🙂