- This topic has 14 replies, 8 voices, and was last updated 11 years, 10 months ago by
.
-
Posts
-
I have read all the posts RE thumbnails not displaying well. I understand that the default is a square thumbnail. But, my products are books, and I need a rectangular thumbnail for the book cover. How can I implement this?
thanks!
You should be able to change the image size/shape just by tweaking the CSS. Please open the “wp_eStore_style.css” file and find the following CSS code:
.thumb-image{
width:125px;
height:125px;
}Once you find it, change the height and width values to something that fits your need. For example, the following will make the thumbnail area rectangular:
.thumb-image{
width:120px;
height:160px;
margin-right:10px !important;
}Note: If you are applying this CSS tweak to customize the size of your thumbnail image then make sure the “Enable Smart Thumbnail Option” feature is unchecked/disabled in eStore settings.
I tried changing the width and height to 200px X 200px in “wp_eStore_style.css” and it does not change on my site. I am using the shortcode [wp_eStore_fancy2 id=4] on my page. I’d like the thumbnail in the fancy2 to be 200×200.
Thanks for any more help with this.
Open the “wp_eStore_style.css” file and search for –
.thumb-image{
width:125px;
height:125px;
}Once you find it replace with –
.thumb-image{
width:200px;
height:200px;
}Let me know how it goes.
When I am editing the “wp_eStore_style.css” file it shows this at the top of the edit screen.
Editing wp-cart-for-digital-products/wp_eStore_style.css (inactive)
I have never edited this page before. I just updated to the latest wp-estore about 2 weeks ago.
I replaced it with your exact suggestion and the thumbnail size did not change.
hmm not sure why it’s not working. It’s working on my test site though. May be your theme is not letting it change as it already has a CSS for thumbnail specified.
Try changing it to the following piece of code and let me know if that helps –
.thumb-image{
width:200px !important;
height:200px !important;
}I put in that code and nothing seemed to happen.
Then, for some reason, I tried typing in
.thumb-image{
width:400px;
height:400px;
}
Which increased the thumbnail to 400px by 400px. Then, I put in 200px X 200px and it shrunk down to 200px. Weird.
Thanks for your help
You probably had caching so you were viewing a cached page. As soon as the caching cleared everything started to work for you as you were seeing the update.
Hi. I’m in a similar situation, for me showing 8″ x 10.75″ magazine covers. They should fit nicely inside of a 120 x 160 px thumbnail frame. I added this to my wp_eStore_custom_style.css file:
.thumb-image{
width:120px;
height:160px;
}
While this did change the overall size of the product box to the correct proportions, it distorted the thumbnail image within. Where do I change the settings of the actual thumbnail image? thanks -ab
Hi,
Just another eStore user here who needed to change the aspect of the thumbs also…. so maybe I can offer some feedback to help others with similar concerns.
In addition to changing the CSS pixel sizes for width and height as stated above in this thread…. I suspect it might be beneficial to convert your jpeg that is being used for the thumbnail image to the aspect you have defined in the CSS file…. that way, you shouldn’t get any distortion. Now, if you aren’t using the lightbox feature, you can create a thumb in any image editing program to the size you defined in the CSS…this might also help page load times.
Even if you are using the Lightbox feature,…. and wanted a large jpeg to fly out when clicked…. I would re-save the image in the aspect you are looking to have eStore size down to via CSS defined size for the thumb.
You shouldn’t get any distortion then and shouldn’t have to use the plugins’ compensation feature for the distortion…. which I believe is sizing up the jpeg internally to compensate for the aspect differences.
Those are just some initial observations on my part…. maybe some others can benefit from them.
Was having the same prob AB – solution?
Go into WP eStore > Settings > General – make sure that the checkbock that says “Enable Smart Thumbnail Option” is NOT checked. Then your CSS size adjustments should work.
I had enabled it to try and fix the problem before discovering the CSS factor.
FYI – for anyone trying to get the same width or height to all of their images, just notate out the opposite line; i.e.
In the wp-content > plugins > wp-cart-for-digital-products > wp_eStore_style.css
.thumb-image {
width:150px;
/*height: 175px;*/
}
All thumbs will be whatever height at a width of 150 pixels.
Word
I just did this as well for the fancy shortcodes and thought I would share the CSS. I think I have all the codes correct now, but the style names are inconsistent, so just copying and changing the number did not work. Here is the code for up to 10 with everything sized to book cover ratio except for the black ones which are square, but obviously you can change the numbers however you like. The important is because I put it in the wp_eStore_custom_style.css and wanted to make sure it overrode the existing.
.thumb-image{
width:131px !important;
height:175px !important;
}
.eStore-category-fancy-thumbnail img {
width:131px !important;
height:175px !important;
}
.eStore-fancy3-thumb img {
width:131px !important;
height:175px !important;
}
.eStore-fancy4-thumb img {
width:150 !important;
height:150px !important;
}
.eStore-fancy5-thumb img {
width:131px !important;
height:175px !important;
}
.eStore_fancy6_thumbnail img {
width:131px !important;
height:175px !important;
}
.eStore-fancy7-thumb img {
width:131px !important;
height:175px !important;
}
.eStore-fancy8-thumb img {
width:131px !important;
height:175px !important;
}
.eStore-fancy9-thumb img {
width:131px !important;
height:175px !important;
}
.eStore-thumbnail-fancy-10 img {
width:131px !important;
height:175px !important;
}
- You must be logged in to reply to this topic.