Copenhagen Theme, fill category with Image.

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

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

@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

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?

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

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

@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

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

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!

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

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)?

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

Hey Debbie Watkins

Have you give a try with the code provided 

Thanks 

Pulkit

Hi @Pulkit Pandey

Not yet - will give it a go this week.

Thank you

Debbie