Sign in

How to reference featured image in main.css?

  • This topic has 4 replies, 2 voices, and was last updated 4 months, 2 weeks ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #5352
    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!!

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

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

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

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

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.