Hello,
I need to set the images of the single product (main + secondary) to be bigger.
I did try to change the settings in woocommerce and use regen thumbnails plugin, but its still the same size..
Can you please take a look at that ?
Hi!
I just realized that in mobile view the images are loading in its fullsize version, instead of the respective thumbnail. Any way to fix this?
Thank you!
Hey!
You’d need to increase the size of your images (Product Thumbnails) to 64×64 or reduce the width of the column to 20% so they doesn’t get stretched:
#top .single-product-main-image .thumbnails a {
width: 20%;
}
Regards,
Josue
I have introduced a list of icons but I haven´t incorporated a second line of text, so the first line is not aligned with the icon. How can I do it?
Moreover, I have introduced a widget in the footer with blog entries. The problem is that the original entries are without a photo, and a thumbnail is generated with no option anyway. How can I solve it?
Here are my woo image settings
Catalog Images 134×300 px (no) Hard Crop?
Single Product Image 90×150 px (no) Hard Crop?
Product Thumbnails 54×90 px (no) Hard Crop?
That made the thumbnail images smaller but they are still not a sharp as original images or the shadow box blow-ups..
Hi Rick!
The images are getting stretched, one solution could be to reduce the width of the product image columns, try adding this to Quick CSS:
#top .single-product-main-image .thumbnails a {
width: 23%;
}
#top .single-product-main-image .thumbnails a img{
height: auto !important;
width: 100% !important;
}
Regards,
Josue
Thank you in advance for your assistance
I am having a problem with fuzzy thumbnail images in woocommerce.
I have added the following to css which cleared up main images:
#top .thumbnail_container img { margin: 0 auto!important; width: 90px; height: 150px; }
#top .product div.images img { margin: 0 auto!important; width: 90px; height: 150px; }
however nothing seems to work to fix fuzzy images:
http://wallmount-cabinets.com/shop/full-size-racks-vented-rear-glass-front/37u-server-cabinets-vented-rear-glass-front/
I have played with woo’s image sizes, regened images, and nothing seems to work.
Main images are perfect, as well as shadowbox image display:
http://wallmount-cabinets.com/shop/ (perfectly sized & sharp)
Thanks
Rick Scherer
u
Hello,
First of all I’d like to thank you for your wonderfully crafted template, it’s really great!
I’m currently designing a website for a musician but there are two or three things I currently don’t manage to do.
Here is the website: ivantirtiaux.com
1) I chose a background for the website (http://www.ivantirtiaux.com/wp-content/uploads/2014/08/background-IvanTirtiaux-texte1.jpg), but I’d like it to adapt to the browser’s window, so we can see the whole image. Sometimes the image seems too small and there is a grey background below (here, for example: http://www.ivantirtiaux.com/musique-2/)
2) http://www.ivantirtiaux.com/portfolio-item/autres-photos/
In my 2 portfolio items, I’d like to have the same background as in the rest of the website. I see it works when I put the portfolio inside a 1/1 box, but then my portfolio only have 2 columns.
Also, is there a way of changing the thumbnail’s size when designing a masonry portfolio? I see that by default 4 thumbnail’s columns are displayed. Is it possible to have 5 or 6?
Thank you so much for your help, and I’m sorry if I have too many questions!
Nuno
Hi is it possible to remove the lightbox effect for woocommerce products and have it so when you click a thumbnail it just changes the main image? That’s better for mobile much like on the top shop site http://www.topshop.com/en/tsuk/product/clothing-427/dresses-442/casey-mesh-t-shirt-dress-2869062?bi=1&ps=20
On a single EVERY blog post, I want to set up a default set of 5 images at the end of the post (and individually linked)… as a means of enhancing call to action after reading.
I have a mockup of what I mean. to illustrate … SEE MOCKUP.
For information (if relevant) I am using blog setting as:_
BLOG STYLE: “Single author, small preview pic”
SINGLE POST STYLE: “Single post with big preview image”
RELATED ENTRIES: “Show thumbnails and display post title by tooltip”.
Praying for some magical solution from your genius department :-)
Thanks.
-
This topic was modified 11 years, 6 months ago by
Netzie. Reason: better explain reason and purpose
OK, now I want to use the masonry content element and the image overlay effect. It shows the post date. Based on the information you provided before – could you tell me if this is the correct way to modify the display?
Copy of the masonry_entries.php into the shortcodes folder of my child theme.
In this section of the code:
$overlay_img = $custom_url = false;
$img_size = 'masonry';
$author = apply_filters('avf_author_name', get_the_author_meta('display_name', $entry->post_author), $entry->post_author);
$this->loop[$key]['text_before'] = "";
$this->loop[$key]['text_after'] = "";
$this->loop[$key]['ID'] = $id = $entry->ID;
$this->loop[$key]['post_type'] = $entry->post_type;
$this->loop[$key]['thumb_ID'] = get_post_thumbnail_id($id);
$this->loop[$key]['the_title'] = get_the_title($id);
$this->loop[$key]['url'] = get_permalink($id);
$this->loop[$key]['date'] = "<span class='av-masonry-date meta-color updated'>".get_the_time($date_format, $id)."</span>";
$this->loop[$key]['author'] = "<span class='av-masonry-author meta-color vcard author'><span class='fn'>". __('by','avia_framework') .' '. $author."</span></span>";
$this->loop[$key]['class'] = get_post_class("av-masonry-entry isotope-item", $id);
$this->loop[$key]['content'] = $entry->post_excerpt;
$this->loop[$key]['description'] = !empty($entry->post_content) ? $entry->post_content : $entry->post_excerpt;
if(empty($this->loop[$key]['content']))
Can I take this:
$this->loop[$key]['date'] = "<span class='av-masonry-date meta-color updated'>".get_the_time($date_format, $id)."</span>";
and change it to this:
$this->loop[$key]['date'] = " ";
I’m hoping this works, because if it does – perhaps I understand what you explained before. A big problem for me is finding out which php file is being used. I looked at inspect element, but just ended up doing a search inside of the various masonry files until I found “masonry-date”.
Thank you again for all of the excellent assistance which is above and beyond what I would expect.
Thanks for this info, Chris. It’s just what I was looking for, as my client tends not to add featured images to posts, and I wanted to make the Latest News widget display without the thumbnail. :)
Hi!
Open up wp-content/themes/enfold/config-layerslider/LayerSlider/includes/slider_markup_html.php and replace:
$data[] = '<img src="'.LS_ROOT_URL.'/static/img/blank.gif" data-src="'.$src.'" class="ls-bg" alt="Slide background" />';
with
$data[] = '<img src="'.LS_ROOT_URL.'/static/img/blank.gif" data-src="'.$src.'" height="1" width="1" class="ls-bg" alt="Slide background" />';
and:
$data[] = '<img src="'.LS_ROOT_URL.'/static/img/blank.gif" data-src="'.$src.'" class="ls-tn" alt="Slide thumbnail" />';
with
$data[] = '<img src="'.LS_ROOT_URL.'/static/img/blank.gif" data-src="'.$src.'" class="ls-tn" height="1" width="1" alt="Slide thumbnail" />';
Best regards,
Peter
Ya, era cosa de regenerar los thumbnails con crop activado:
http://www.carrazart.com/shop/
¡Si observo que en cierto modo se corrigió en la parte del producto específico, pero miro los thumbnails y antes se miraban todos con la misma dimensión!! y eso seguro me lo dirá esta mujer! no hay alguna regla CSS que permite corregir eso? y que la página de productos se mire toda proporcionada? la solución es muy buena, sin dudas, pero conociendo a esta señora se que va a poner la queja por ese lado…es muy minuciosa, me ha hecho cambiar hasta pequeños “guiones” de color!! Tu dime si es posible, sino para ya decirle que se las arregle como pueda y yo no cobraré mi balance, pues ni modo!!!
Ya esta, utilice este codigo:
function wc_thumbnail_func()
{
return "full";
}
add_filter('single_product_large_thumbnail_size', 'wc_thumbnail_func');
Hi odmv91!
Thank you for using Enfold.
Yes, it is ok to replace the images via FTP but make sure that you retain the image file name. You can change the thumbnail sizes on functions.php, look for this code:
$avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36); // small preview pics eg sidebar news
$avia_config['imgSize']['square'] = array('width'=>180, 'height'=>180); // small image for blogs
$avia_config['imgSize']['featured'] = array('width'=>1500, 'height'=>430 ); // images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 ); // images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] = array('width'=>1500, 'height'=>1500 , 'crop' => false); // images for fullscrren slider
$avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ); // images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 ); // images for portfolio 4 columns
$avia_config['imgSize']['gallery'] = array('width'=>845, 'height'=>684 ); // images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] = array('width'=>710, 'height'=>375 ); // images for magazines
$avia_config['imgSize']['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); // images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321); // big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 ); // images for fullsize pages and fullsize slider
You can also use this plugin in order to change the thumbnail sizes directly on the wp dashboard: https://wordpress.org/plugins/simple-image-sizes/
Cheers!
Ismael
Hi elianab!
Please go to Appearance > Editor and open Functions.php and find&edit image sizes
$avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36); // small preview pics eg sidebar news
$avia_config['imgSize']['square'] = array('width'=>180, 'height'=>180); // small image for blogs
$avia_config['imgSize']['featured'] = array('width'=>1500, 'height'=>430 ); // images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] = array('width'=>1500, 'height'=>630 ); // images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] = array('width'=>1500, 'height'=>1500 , 'crop' => false); // images for fullscrren slider
$avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ); // images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 ); // images for portfolio 4 columns
$avia_config['imgSize']['gallery'] = array('width'=>710, 'height'=>575 ); // images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] = array('width'=>710, 'height'=>375 ); // images for magazines
$avia_config['imgSize']['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); // images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>710, 'height'=>270); // big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1030, 'height'=>360 ); // images for fullsize pages and fullsize slider
//overwrite blog and fullwidth image on extra large layouts
if(avia_get_option('responsive_layout') == "responsive responsive_large")
{
$avia_config['imgSize']['gallery'] = array('width'=>845, 'height'=>684 ); // images for portfolio entries (2,3 column)
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>845, 'height'=>321); // big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 ); // images for fullsize pages and fullsize slider
}
then regenerate thumbnails using this plugin – https://wordpress.org/plugins/regenerate-thumbnails/
Cheers!
Yigit
Is there a way that I can choose how an image is cropped for the single portfolio page? How can I change the size of the image? Can I use one image for the thumbnail and another for the single page?
Hi!
You can try to insert this code:
.avia-post-nav .entry-image img {
height: auto;
width: auto;
}
into the quick css field. It will make sure that the original thumbnail is used and the browser doesn’t resize it with css. A php script resizes the thumbnails on your server anyway (i.e. on here: http://shutterliving.com/typography/ the left thumbnail url is: http://i2.wp.com/shutterliving.com/wp-content/uploads/2012/11/Jamie-A-Cowan-08.jpg?resize=80%2C80 and the ?resize=80%2C80 parameter obviously resizes the image to 80x80px).
Regards,
Peter
Hi krisfosh!
Thank you for using the theme.
Please go to the Media Library then delete all images that doesn’t have the correct thumbnail. After that, regenerate the thumbnails using this plugin: http://wordpress.org/plugins/regenerate-thumbnails/
Another user is having the same issue and fix it with this solution: https://kriesi.at/support/topic/gallery-edit-issues/#post-277654
Best regards,
Ismael
Hey!
You’d need to change blog style to “Blog Single Author Small” in order to get the thumbnail the way you want.
Cheers!
Josue
Hi,
Whenever I try to upload media to the site the upload fails and in the media library instead of a thumbnail in the list I see a pixel. If you reload the page you were uploading to or the media library you can add the image to the page but it doesn’t resize or work in a dynamic presentation, such as a gallery, etc.
If you turn the theme off and upload an image or any media it works like a charm but this is no real solution, naturally. It just shows that the theme is the problem.
This has been a consistent issue for many previous versions in an otherwise great theme and I need a solution!
Any help would be much appreciated!
Kris
Hi!
Please go to Appearance > Editor and open functions.php file and find
$avia_config['imgSize']['gallery'] = array('width'=>710, 'height'=>575 );
and adjust it as needed then regenerate thumbnails using this plugin – https://wordpress.org/plugins/regenerate-thumbnails/
Cheers!
Yigit
Hey Ti7V!
Thank you for using Enfold.
The excerpt for small magazine entries is hidden by default because there’s not enough space to accommodate them. If you really want to display it, you can edit config-templatebuilder > avia-shortcodes > magazine.php, find this code on line 558:
if(empty($this->atts['thumbnails']))
{
$image = "";
$extraClass = "av-magazine-no-thumb";
}
Below, add this:
`$excerpt = !empty($entry->post_excerpt) ? $entry->post_excerpt : avia_backend_truncate($entry->post_content, apply_filters( ‘avf_magazine_excerpt_length’ , 10) , apply_filters( ‘avf_magazine_excerpt_delimiter’ , ” “), “…”, true, ”);
}`
Regards,
Ismael
Hey!
Answered your question here – https://kriesi.at/support/topic/stop-image-logo-thumbnail-from-popping-out-and-increasing-to-original-size/#post-311535
Please do not create duplicated topics as it is making it harder for us and for other users to follow.
Regards,
Yigit
Hi, can you help me learn the code to stop my logo on homepage or any image in a blog, gallery, thumbnail from pooping out when the mouse hovers over image? https://imgur.com/a/MM7EV
Many thanks
Nathan
Hallo Peter,
vielen Dank für die Antwort. Natürlich glaub ich dir das ;)
Mich verwundert es nur, dass in den Beiträgen meines Kunden Shortcodes für Galerien enthalten sind, welche er dort erstellt hat:
[av_gallery ids='3028,3029,3027,3026,2885,2884,2883,2882,2881' style='thumbnails' preview_size='portfolio' crop_big_preview_thumbnail='avia-gallery-big-crop-thumb' thumb_size='portfolio' columns='3' imagelink='lightbox' lazyload='avia_lazyload']
Laut seiner Aussage hat er dies mit “so einem Tool” erstellt und konnte hinterher die Bilder wieder abändern. Meiner Kenntnis nach weiß er auch gar nicht, wie man eine Galerie über “Insert Theme Shortcode” einfügen kann. Ich selbst war mir auch ganz sicher, dass das mal ging. Aber gut, ich werde ihm erklären, dass man das über “Insert Theme Shortcode” machen kann und, wenn etwas abgeändert werden muss, er einfach die Galerie neu erstellen muss.
Dass der Avia Layout Builder nicht mit Archivseiten und den Port Formaten kompatibel ist, ist verständlich. Aber würde dann ein “reduzierter Layout Builder” nicht Sinn machen, damit man eingefügte Shortcodes hinterher noch editieren kann?
Vielen Dank für den Support,
Steffen
Hi!
Using the plugin I mentioned above is by far the best option. Its ridiculously easy to edit and regenerate from the admin and since you need to install at least one plugin to regenerate thumbnails you might as well install the one that also lets you edit images.
This is even more valid in your case since you want to play around with sizes and this plugin lets you do that per image: http://wordpress.org/extend/plugins/simple-image-sizes/
Best regards,
Devin