Replacing category thumbnail by a full width image ? « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Abundance

not resolved

Replacing category thumbnail by a full width image ?

14 posts from 4 voices

Started 6 months ago by AlainTernet
Latest reply from Devin
This topic is not resolved

Tags:

AlainTernet
Member

I try to replace the small category thumbnail by a bigger, full width, image.
I searched and tried several things but without success...
Then I also wish to change the "sort" location (put it in the sidebar), is it possible ?
Anyone has an idea ?

Posted 6 months ago #
Dude
Dude
1) WooCommerce/Abundance does not support such a layout. However you can increase the column size a bit. Go to WooCommerce > Settings > Pages and set the column count to 3. This will also increase the image size a bit (but you won't get fullsize images).

2) I think this can be done. In propulsion/config-woocommerce/config.php delete following line:
```
woocommerce_catalog_ordering();
```
and in sidebar.php replace:
```
echo apply_filters('avia_sidebar_menu_filter', $sidebar_menu);
```
with:
```
if(!is_singular())
{
woocommerce_catalog_ordering();
}
echo apply_filters('avia_sidebar_menu_filter', $sidebar_menu);
```
Posted 6 months ago #
AlainTernet
Member

1) Ok, I will try to change my design and forget the full width image.
But, is it possible to put a big picture (like 200 height by max width possible) instead of the thumbnail ?
If yes, do you have some cue ?

2) Thanks, I will try this !

Posted 6 months ago #
Nick
Moderator

Hi,

There is an option in WooCommerce plugin to have between 3-5 vertical columns. So with 3 columns you would have enough room to have bigger thumbnail images, otherwise imo they will look squashed.. Though there are fields in the admin section of the plugin to dictate the size of each thumbnail there is a better way.

The best way to go about it, is to first install the Simple Image Sizes plugin ( http://wordpress.org/extend/plugins/simple-image-sizes/ ). The plugin will give you complete control over all images in the theme -from aspect ratio, to width, whether to crop the image, and even has a built in thumbnail regenerator.

After installing the plugin, you will find your Settings > Media page in the backend to contain the various sizes. Then simply find the dimensions you want to change. Save. Regenerate the images and see if you like what you see or want to tweak the image sizes further.

Thanks,

Nick

Posted 6 months ago #
AlainTernet
Member

Thank Nick for your help.
I tried the plug-in, seem interesting, but nothing happens after changing the size (even after regenerated image and reload)

Here's what I try to do. I was able to squeeze the text to the right, but not yet able to enlarge the image ;-(

Posted 6 months ago #
Nick
Moderator

Hi,

Without looking at the actual html with firebug its very difficult to help you since a number of different things could be causing this. If you install firebug or chrome developer tools you can easily see what css is forcing the thumbnail to be of that size, whether it was cropped that way or because of max-width, or width or some container it is of that size.

For making customization to your theme's CSS, we recommend that you install and get to know Firebug ( http://getfirebug.com/css ) and Google Chrome developer tools ( https://developers.google.com/chrome-developer-tools/docs/overview ) browser add-on. Firebug is a free web development tool that integrates into Firefox and Chrome browsers and assists in monitoring, debugging and editing of any website's CSS, HTML, DOM, and JavaScript files.

Once installed, this easy to follow video will show you the basics of Firebug – http://vimeo.com/20917974 and get you on your way to customizing your theme like a real pro. It's 5 minutes long, and by the end you will know how to style anything!

Thanks,

Nick

Posted 6 months ago #
AlainTernet
Member

Once installed, this easy to follow video will show you the basics of Firebug – http://vimeo.com/20917974 and get you on your way to customizing your theme like a real pro. It's 5 minutes long, and by the end you will know how to style anything!

Thanks Nick for your suggestion ! I already have FireBug installed but since I am a newbie I do not know how to use them ! (I used it to visualize but I did not know it was possible to change and test directly on the page ! Wow !)

So, this will help me to arrange a lots of other stuff but I still not have succeeded to put this thumnail bigger (I did, but it only scale the 80x80 thumnail bigger). It should not be very difficult (for someone who knows how to do ;-)
Does I can send you my URL/user/pass to check (if you have have some time?)
Thanks !

Alain

Posted 6 months ago #
Devin
Moderator
Hi Alain,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top .title_container .category_thumb {
width: 300px;
height: 200px;
}
```
And if you need to adjust the height of the title container, try:
```
#top .title_container.title_container_image {
height: 200px;
}
```
Regards,

Devin
Posted 6 months ago #
AlainTernet
Member

Hi Devin (and all other),
Thanks for your help, I began to despair ;-(
Your suggestion work but it only scale the 80px icon bigger.
I must to use the full size image instead of the thumbnail but I
don't know how I can make this (the thumbnail seem to be generate from the
"full size image" here: http://vestiges.ca/wp-content/uploads/2011/10/photo-home3.jpg

I removed my "Under Construction" plug-in and the redirect script, so
everybody can look and give me suggestion ! the url page is: http://vestiges.ca/?product_cat=bijoux

Posted 6 months ago #
Devin
Moderator
Hey AlainTernet,

In your WooCommerce settings go to the Catalog tab and scroll to the very bottom. The image properties there should have one set to 80x80 pixels. You'll need to change that image size then regenerate your thumbnails to get larger images.

Also looking at how it effects that image live, you may need to adjust the css i gave you above to be something more like this:
```
#top .title_container .category_thumb {
width: 300px;
height: auto;
max-width: 300px;
}
```
Which will overwrite the max width and also adjust the height automatically with the image size just so you don't have to keep updating the css based on your image size you set on that catalog page.

Regards,

Devin
Posted 6 months ago #
AlainTernet
Member

Yeah !
Thanks Devin (and all other), after a lot of time, trials and errors, I was finally able to display and positioning my big image :-)
(setting the size in WooCommerce did not work, but it work by setting the "Thumbnail size" in "Settings-->media)

So, I have some last questions to finalize my product page (http://vestiges.ca/?product_cat=bijoux)

1-I had to place the sidebar highest, but the problem is that this change should be only on this page, not throughout the site.
Is it possible to restrict this modification to this page only? (I find other post in this forum suggesting using ID, but my category page has no ID !? I use this code in the Quick CSS:
.sidebar { float: left; margin-bottom: 23px; overflow: hidden; padding: 14px; position: relative; top: -222px; width: 179px; }

2- How I can hide the breadcrumb using the css ? I can remove the breadcrumb text (.breadcrumb-trail {display: none;}
but the horizontal line are always visible...

3- Thanks to Dude, I was able to place de sort pop-up into the right sidebar. However it is displayed on top of other texts sidebar.
So, I cheated by making a empty text widget just to shift other lower and use its title ("sort by"). It is not elegant but it works. But I have a little flaw (line) on the top of the sidebar and a little shift on the bottom. This happens when I replace the last part of the Dude code into "sidebar.php" (see Dude code above).

Posted 6 months ago #
Devin
Moderator
Hi AlainTernet,

1) You can add #top.term-bijoux before .sidebar to keep the changes only on that page or #top.tax-product_cat to keep the changes only on category overview pages.

2) The line is a border on the title_container. So you could use this to remove it:
```
#top .title_container {
border-bottom: none;
}
```
3) The spacing is because of the text widget. It has a border-top and border-bottom so it would need to be removed and the padding adjusted to what you want. You can do so with:
```
#text-12 {
border-bottom: none;
border-top: none;
padding: 10px 0 10px 0;
}
```
If you have any other questions please make a new topic for them. This helps to keep the forums a bit more organized and easier for others to search.
Posted 6 months ago #
AlainTernet
Member

1) You can add #top.term-bijoux before .sidebar to keep the changes only on that page or #top.product_cat to keep the changes only on category overview pages.

#top.term-bijoux work nice but the second suggestion (#top.product_cat) do not work (it's like it was not taken into consideration).
It is unfortunate because, in fact, it would be better to restrict it to all category overview pages. I tried this code in Quick css and also on custom css with no results:

#top.product_cat .sidebar { float: left; margin-bottom: 23px; overflow: hidden; padding: 14px; position: relative; top: -222px; width: 179px; }

3) The spacing is because of the text widget. It has a border-top and border-bottom so it would need to be removed and the padding adjusted to what you want. You can do so with:

When I remove the sorting code in the sidebar.php, all is ok in the sidebar. When I add it, this line appear on the top of the sidebar and I have other line misaligned on the bottom of the sidebar. Strange ? So, your code work to correct it.

Posted 6 months ago #
Devin
Moderator

I've edited my post with the correct css, it should be tax-product_cat. If *that* doesn't work, let us know.

That should take care of the questions/issues for this topic. If you have any other issues or questions just make a new topic and we'll do our best to answer :)

Regards,

Devin

Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top