We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

How to reference featured image in main.css?

March 13, 2021 at 9:01 am #5352

[anonymous]

I am creating a theme based off some design work I did. As part of tradition, I put some images in an /images directory and referenced them in the traditional ways.

I have a hero section using a background-image: on a div. I would like to reference the {{featuredImage}} in the main.css file.

Is there a way to do this?

As well, I have a similar div using a background-image: on a div in the index.hbs. I imagine that I could create an entry under “customConfig” to pick an image for this div as well.

Currently, both images reside within an /images directory. I noticed that the /images directory does not get copied to the preview directory and I assume that is by design.

What are the proper ways of referencing these files either as a {{featuredImage}} or otherwise in css?

Cheers!!

March 14, 2021 at 7:08 am #5358
Bob
In general, when you work with CSS file (style.css not main.css) you can put the relative or absolute path to your source; it will work on the production server, but not necessarily locally in the site preview.

So, the best way, especially when you want to display the featured image is to move your CSS rule with the background-image to the head.hbs file:
```
{{#post}}
   <style> 
      body { 
         background-image: url({{featuredImage.url}})
      }
   </style>
{{/post}}
```
The above example will display the original image; if you want to display only one specific thumbnail use as follows, where the Xs is the name of one image size declared in the config.json file (more about this).
```
{{#post}}
   <style> 
      body { 
         background-image: url({{featuredImage.urlXs}})
      }
   </style>
{{/post}}
```
March 14, 2021 at 7:48 am #5362
[anonymous]
This is what I have done…
```
{{#featuredImage}}
  {{#if url}}
    <script>
      var heroArray = document.getElementsByClassName("hero-container");
      for(var i = 0; i < heroArray.length; i++) {
      heroArray.style.backgroundImage = "url('media/files/images/pexels-emmylou-736508-1366.webp')";
      }
    </script>
  {{/if}}
{{/featuredImage}}
```
The java is not elegant, but it works.

What I am struggling with now is…
```
{{#featuredImage}}
  {{#if url}}
```
… for some reason this is not picking up the featured image on my test post. This works in another template inside of a…
```
{{#each posts}}
```
… but it does not seem to pick up just under the body tag where I expected it to pick up the featured image of the test post.

I assume I am doing something wrong. I am at a loss as to what it is at this point.

Cheers!!
March 14, 2021 at 8:00 am #5363

Bob

Where exactly do you want to display the image? index. tag, post etc…

March 14, 2021 at 8:00 am #5364

[anonymous]

Ooopppsss… Never mind.

I forgot the #posts that seems to be oh so necessary.

Thanks for your reply.

The reason why I kept the div background image is so there would be a default. I suppose there is a simpler way of doing things. I never seem to take that route.

I will look into setting the div with or without a style= to change the image.

Cheers Mate!!

November 7, 2023 at 12:10 pm #10937
[anonymous]
Is it not possible to add the featured image url via {{{post.featuredImage.url}}} for example?
```
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Shcematype",
  "name": "{{{post.title}}}",
  "image": "{{{post.featuredImage.url}}}",
  "@id": "{{{post.url}}}",
  "url": "{{{post.url}}}", 
}
</script>
```
I try to add this at the end of each post.hbs after the footer but the URL doesn’t work featured image doesn’t work
November 8, 2023 at 10:09 am #10943

Bob

[anonymous] wrote:

Is it not possible to add the featured image url via {{{post.featuredImage.url}}} for example?

Your markup is correct and it should work. It’s possible that your post does not have a featured image, which is why the object is empty.