15 Comments

  • Trapta
    Community Moderator

    Hi @Jeffrey Makuch,

    Try the below code -

    Step:1 - Go to line no.15 in home_page.hbs and add id="{{id}}" so that the line will look like -

    <li class="blocks-item" id="{{id}}">

    Now, at the bottom of this template paste the below code -

    <script>
    $('.blocks-item').each(function (idx, itm){
    var categoryID = $(this).attr('id');
    $(itm).css('background-image', 'url(' + categoryIcons[categoryID] + ')');
    });
    </script>

    Step: 2 - Go to document_head.hbs and paste the below code at the bottom. Replace ID with your category ID or section ID. Also, replace assets with your assets.

    <script> 
    var categoryIcons = {
    "ID" : "{{asset 'bg.jpg'}}", // Image for first category
    "ID" : "{{asset 'bg-2.png'}}" // Image for second category
    }
    </script>

    Step: 3 (Optional) - Paste the below CSS at the bottom of your style.css (to make it look like the image shown in this example).

    li.blocks-item {
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    color: #000;
    height: 180px;
    justify-content: flex-end;
    }

    .blocks-item-link {
    color: #fff;
    padding: 10px 30px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.54);
    }

    Save the code and you're done. This is how your homepage category blocks will look like -

    Let me know if you face any issue.

    Thanks

    Trapta

     

    0
  • Jeffrey

    Hey Trapta

    Thanks so much for the Help.

    I applied that.

    Currently i can only click on the transparency bar, so the image isn't clickable for the category. Is that right?

    The Category also doesn't show a hover over colour change?

    Lastly is there a way to set the categories to only change if they have an image assigned to them? So stay as default if no image is assigned to them.

     

    Thanks

    Jeff

     

    0
  • Trapta
    Community Moderator

    @Jeff,

    Sorry for the delayed response. Please find the updated code for Step 2 and Step 3 here -

    Step 2:

    <script>
    $('.blocks-item').each(function (idx, itm){
    var categoryID = $(this).attr('id');

    if ( categoryIcons[categoryID] !== undefined ) {
    $(itm).toggleClass('changeUI');
    $(itm).css('background-image', 'url(' + categoryIcons[categoryID] + ')');
    }
    });
    </script>

    Step 3:

    li.blocks-item.changeUI {
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    color: #000;
    height: 180px;
    justify-content: flex-end;
    position: relative;
    }

    .changeUI .blocks-item-link {
    height: 100%;
    padding: 0;
    }

    .changeUI .blocks-item-title {
    color: #fff;
    padding: 10px 30px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.54);
    position: absolute;
    width: 100%;
    bottom: 0;
    }

    Let me know if this solves your issue.

    Thanks

    0
  • Jeffrey

    Hi Trapta

    Thanks for the help.

    So this is what's happening at the moment.

    The Image Category is always highlighted, whereas before it was never.

    It also looks like the current Highlight has moved the Category name to the top. I'd like it to stay at the bottom.

    So the hover over colour change on the Category image still doesn't work.

    Does this all make sense?

    0
  • Trapta
    Community Moderator

    Hi @Jeff,

    Maybe some CSS is overwriting the code. If you can share your HC URL that will help me in debugging the issue.

    I am using the same code on my side and it is working perfectly fine. Just to make sure, did you replaced the old CSS with the new one that I wrote in my last comment? If not, please update it.

    Hover over colour change on the category image doesn't make sense to me. Do you want to have an image for default view and replace it with the background color on hover?

    Thanks

    Trapta

    Team Diziana

    0
  • Jeffrey

    Hi @Trapta

    Sorry for the delay been busy in the office.

    The site is already live. so I'd prefer not to load this till it's ready.

    Can I export it and send you a link?

     

    Jeff

    0
  • Wes Drury

    @Jeffrey - I just got caught up on this thread and yes can you please export the theme and send me the link and I'll be glad to check it out.  You can send me a direct message via my SLACK channel and upload the theme there.

    https://slackpass.io/moderatorwes

    0
  • Wes Drury

    In case other are looking, the most updated information can be found here.

    0
  • Jessie Schutz
    Zendesk team member

    Thanks, Wes!

    0
  • Debbie Watkins

    Hello, I'm new to this and so apologies if I'm asking basic questions...this isn't working for me - the image doesn't fill the category container. Here's what I'm looking to do, overall:

    1. Have all square category icons - on desktop, probably 6 across
    2. Have a square image in each that completely fills the container, with the text overlaying the image in a darker area as per the example in this post
    3. on mouseover, ideally have the image change colour

    This is what I have got to so far, using the recommendation above plus a few lines in CSS that fixes the image size:

     

    Any help would be appreciated!

    0
  • Pulkit Pandey
    Community Moderator

    Hi Debbie Watkins

    You can achieve this by adding an image as a background image of your category block

    Or If it's possible to share your HC URL, so that I will dig deep into it and provide the solution you want

    Thanks 

    Pulkit

    0
  • Debbie Watkins

    Hi Pulkit Pandey

     

    Many thanks for the response! Do I do this in the CSS file or the home_page? I can see how to add a background image in CSS but not hw to make which image it is condition on which block it is. Right now, I am using this:

    {{#if ../has_multiple_categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <!--- this is the code for the images -->
    {{#is id 360000135055}}<img class="" src="{{asset 'AngelinaSquare.png'}}" />{{/is}}
    <span class="blocks-item-title">{{name}}</span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>

    for the result I sent through, so I guess I need something similar but stating image background (and ideally auto sizing too)?

    0
  • Pulkit Pandey
    Community Moderator

    Hi Debbie Watkins

    Here is the updated version of your code snippet which you have shared above, please update it with your code and follow steps to add a background image on the category blocks 

    {{#if ../has_multiple_categories}}
    <li class="blocks-item" id="{{id}}">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>

    Step: 1 - Now, at the bottom of this homepage paste the below code -

    Note: if you are using the v2 version of the theme please add the following line of code at the top of you document_head template

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $('.blocks-item').each(function (idx, itm){
    var categoryID = $(this).attr('id');

    if ( categoryIcons[categoryID] !== undefined ) {
    $(itm).toggleClass('changeUI');
    $(itm).css('background-image', 'url(' + categoryIcons[categoryID] + ')');
    }
    });
    </script>

     

    Step: 2 - Go to document_head.hbs and paste the below code at the bottom. Replace ID with your category ID or section ID. Also, replace assets with your assets.

     

    <script> 
    var categoryIcons = {
    "360003749913" : "{{asset 'London_2012_Olympic_Games_Wallpapers_03.jpg'}}", // Image for first category
    "ID" : "{{asset 'bg-2.png'}}" // Image for second category
    }
    </script>

    Note: ID replace it with your category ID or section ID to set an image, In my case i have
    Replace the ID with my category ID i.e 360003749913

    Step: 3 - Paste the below CSS at the bottom of your style.css (to make it look like the image shown in this example).

    li.blocks-item.changeUI {
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    color: #000;
    height: 180px;
    justify-content: flex-end;
    position: relative;
    }

    .changeUI .blocks-item-link {
    height: 100%;
    padding: 0;
    }

    .changeUI .blocks-item-title {
    color: #fff;
    padding: 10px 30px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.54);
    position: absolute;
    width: 100%;
    bottom: 0;
    }

    Example:

    Let me know if this solves your issue.

    Thanks 

    Pulkit

    0
  • Pulkit Pandey
    Community Moderator

    Hey Debbie Watkins

    Have you give a try with the code provided 

    Thanks 

    Pulkit

    0
  • Debbie Watkins

    Hi Pulkit Pandey

     

    Not yet - will give it a go this week.

     

    Thank you

    Debbie

    0

Please sign in to leave a comment.

Powered by Zendesk