I have seen the documentation but can’t find this. In Per category settings, in Category 6, is there a way to limit the image size to the boxed area instead of making it page background?
In other words instead of this https://gyazo.com/1a044ea24cf8f09f49782cbeac6e1946
can we do this https://gyazo.com/f0daf279e9bfa1ec037811cdca7895c1 ?
Hello bhadrabalaram,
Unfortunately, you cannot resize the image that appears in category template 6. Practically, this kind of the image is your background image wich you have set it from your Theme panel, like this -> http://screencast.com/t/Q7GEzcUy6Do and you cannot change it only for this template. Another alternative for you would be using a bit of CSS with the background-image attribute for this category template and insert your desired image. Below I gave you an example how to use this with CSS. Please try to implement this functionality in our theme following the same steps and code.
The code is ->
.td_category_template_6 .td-category-header{ background-image: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-size: 1164px 400px;
background-repeat: no-repeat;
}
The result you should see here -> http://screencast.com/t/skp9vYhPZqI
Hope this helps and let us know how it goes!
Thank you for the message!
Thank you Catalin! I should have mentioned that I do not need the background at all. So I guess if I don’t set any background, only the image will be shown. Correct?
Hello bhadrabalaram,
Correct! It is not necessary to set a background image to use the above code. If you want to be more specific and have for each category another image, you have to find the category id and add it before the code that I gave you above, like this -> http://screencast.com/t/nayIF5GuU0mW -> http://screencast.com/t/E7WLWOjI
The code is ->
.category-6.td_category_template_6 .td-category-header{ background-image: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-size: 1164px 400px;
background-repeat: no-repeat;
}
If you want to add this code for another category, you have to replace only the ID number with the category number for that category.
Notice -> you must have the same category template number 6
Hope this helps and let us know how it goes!
Thank you for the message!
Thanks. I am thinking though why not instead of editing CSS (since Code is not a Poetry for me :-)), I create an image block and place it on top of all other content, just below the menu… Will it not create the same effect?
Hello,
Unfortunately placing an image block is harder than css as the category pages do not have visual composer editing options. You cannot add elements from the theme panel in the category pages. It can only be done by editing the theme files and using PHP functions that are more difficult to implement than css.
Thank you!
