Header with featured image (articles) - Wokiee

[Leocadie]

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, 🙂

[SheetalZadfiya · 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.

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.

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!!

[Leocadie]

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 ! 🙂