[publii-slpa]

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

[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}}

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[publii-slpa]

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

[Bob]

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

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[publii-slpa]

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

[Author]

Posts