you can have on child-theme functions.php this:
function thumbnail_in_content($atts) {
global $post;
return get_the_post_thumbnail($post->ID);
}
add_shortcode('thumbnail', 'thumbnail_in_content');
you use it on the pages / posts as shortcode then: [thumbnail]
Hi there,
Von einer Galerie mit Einstellung: Stil > Vorschaubilderspalten > 8 Spalten ist auf Smarthone Portrait kaum noch etwas zu erkennen. Wie kann die Darstellung für mobile Endgeräte von 8 auf x geändert werden?
===
From a gallery with the setting: Style> Thumbnail Columns> 8 columns, you can hardly see anything on Smarthone Portrait. How can the display for mobile devices be changed from 8 to x?
thanks, solf
Thank you Ismael. I am trying to get the gallery to go from a 4 column thumbnail width to a 1 column thumbnail on mobile. I reduced the max to 500px as a test in the code you sent but I didn’t see any change. Is there a different CSS script I need to add for that to work?
Hi,
Whenever I share my blog posts on whatsapp or facebook, the thumbnails and summary texts are not showing up.
How It is Showing Up – https://ibb.co/VVX5m9q
How I Want It To Show Up – https://ibb.co/9gzq12d
My site – https://zimcricket.org/
Blog Example – https://zimcricket.org/zimbabwe-name-test-squad-to-face-pakistan/
it is set to that already, looks like the cropping doesnt work
tried changing around to squared and others but the thumbnails never change and are always displayed like they are right now (also wrong on “preview” pane already when editing gallery)
only thumbnails dont work, the large image on top is displaying same size for all photos as it should
worked last week before theme update and havnt changed anything else so suspect this to be at fault
//edit: just realized the big picture on top isnt displayed completely but cut off, only shown completely when you click on it
also just noticed that if i create a new empty gallery it has some random images there already in preview pane that only disappear once i pick something for the gallery, truly odd behavior
-
This reply was modified 4 years, 11 months ago by
rustleredv.
Hey rustleredv,
Thank you for the inquiry.
Looks like the gallery is using the original image instead of a thumbnail. To change that, edit the Gallery element, go to the Styling panel, then try to set the Gallery Preview Image Size to Portfolio(495×400) or any thumbnail with cropping enabled. When cropping is enabled, WP will crop and resize the image to the specified thumbnail dimension regardless of the original aspect ratio.
Best regards,
Ismael
Hey goldengate415,
Thank you for the info.
The lightbox srcset feature is still in beta mode as described in the options page, so issues should be expected. It adds the srcset attribute to the lightbox images so that the appropriate thumbnail size is used based on the size of the current screen. This improves performance because smaller images are loaded.
Is there a development or staging version of the site? Please post the site or page URL containing the lightbox so that we could check the issue further.
Best regards,
Ismael
Hi,
Thank you for the update.
The size of the thumbnails used in the product gallery is 180x180px, and if you want to adjust it, try to use this filter in the functions.php file
add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return 'medium';
} );
The medium thumbnail size can be adjusted it in the Settings > Media panel. Default size is 300x300px.
Best regards,
Ismael
The thumbnails are definitely REALLY pixelated, even in your sample screenshot. That product has since sold out, so I provided a better example of the issue in the private content below. You can see in the Product Gallery thumbnail how fuzzy/pixelated the image gets, but when you click on it to view the larger image you can see the original image is nice and big/clear.
I seem to recall something in a previous thread (that I can’t seem to find anywhere anymore!) about the Enfold theme enlarging the product gallery thumbs from the original Woocommerce size, and it ends up just making a mess of the image quality. Could be wrong about that though!
Thanks again.
looks like since the last theme update there is a bug with gallery thumbnails (show big img on top and thumbnails on bottom)
before last theme update when i added a gallery i showed all thumbnails in same size (~108x90px) “zoomed in” in case aspect ratio is different now it just puts the width to ~108px and the height is always 100% no matter what setting i try
all old galleries work still, if i try to create a new one with same images the same bug occurs
not too sure if this is related to theme update aswell but i noticed that if i click on the first image (big one on top) the lightbox only shows this image and not the others, if i click on it via thumbnail on the bottom it shows lightbox with other images from same page to browse through
anyone else having the same problem? what to do?
links shared in “private content”
thanks in advance!
Hey kellyCraftMedia,
Thank you for the inquiry.
The product gallery looks totally fine on our end, as shown in the screenshot below.
Screenshot: https://imgur.com/UW43gxc
Is that how you see the gallery?
The snippets in the following documentation might help.
// https://docs.woocommerce.com/document/image-sizes-theme-developers/
The filters there should adjust the size of the thumbnails.
Best regards,
Ismael
Hi,
The description should display automatically when the Enfold Child Category Styling is set to Default. Please try to edit one of the product categories and look for the styling just below the Thumbnail option.
Best regards,
Ismael
Hi,
Sorry for the confusion. The Styling > Preview Image Size settings is only available on the Blog Posts element. For the masonry element, the theme will automatically assign the masonry thumbnail which has a maximum size of 705x705px.
If you want to adjust the size of the thumbnail, try to install the plugin below and go to the Settings > Media panel where you can adjust the size of the masonry thumbnail. You have to regenerate the images afterwards.
// https://wordpress.org/plugins/simple-image-sizes/
Best regards,
Ismael
Hi,
Thanks for your help.
I don’t know where to “adjusted by selecting a different thumbnail in the element’s Styling > Appearance > Preview Image Size settings.” as you said.
It is not in the masonry settings, not in the theme setting,…
Can you tell me ?
Thanks in advance
Regrads,
Sophie
Any reason why my product thumbs on both the product page as well as the Product Grids are fuzzy until you click on them once? Literally as soon as I click on them, they look fine.
I have tried resizing thumbs in the Media options, regenerated thumbnails using a plugin, and nada. When I switch to a base theme (Twenty Twenty), it doesn’t seem to be an issue probably since those product thumbnails are smaller.
I also tried the solutions in this thread but the basic solution code broke my product pages and the enhanced solution code no longer functions (the link to download a file isn’t active anymore).
I’ve also tried switching between Woocommerce 3.0 Product Gallery and Default Enfold Product Gallery but no luck there.
Sample link in the private content.
Ismael,
Hi! Is there another plugin that does this — Simple Image Sizes looks like it might have been abandoned by its developer and hasn’t been updated for the last three WordPress releases — or is there confirmation this will work with the current WordPress build — what plugin is used for regenerating thumbnails or does Simple Images Sizes take care of this too —
Many thank yous!
Michael
Hey mocreate,
Thank you for the inquiry.
You will have to increase the size of the entry_without_sidebar thumbnail, which is the thumbnail or image used on posts without sidebar, and make sure that the new width and height are larger than those of the uploaded images. To do that, install the following plugin, then go to the Settings > Media panel.
// https://wordpress.org/plugins/simple-image-sizes/
Please do not forget to regenerate the thumbnails after adjusting the thumbnail size.
Best regards,
Ismael
first – you can make them smaller – on my page i have this as quick css entry:
.search-result-image img {
width: 200px; /**** here you can adjust the image sizes shown ***/
border: 1px solid #aaa
}
a.slide-image.search_image {
overflow: visible !important;
}
a.search_image .image-overlay.overlay-type-extern {
left: 0 !important
}
next tip: this line of the replaced code:
$searchthumb = get_the_post_thumbnail( $the_id, 'large' );
it will take the large images from enfold recalculation as source for those thumbnails.
if you have:
$searchthumb = get_the_post_thumbnail( $the_id, 'portfolio_small' ); it will have that source image for it.
_____________
see here: https://kriesi.at/support/topic/show-featured-images-in-search-results-page/#post-805253
now the line is on Enfold 4.8.2 line 33
echo "<span class='search-result-counter {$counterclass}'>{$post_loop_count}</span>";
replace that whole line 33 with:
$searchthumb = get_the_post_thumbnail( $the_id, 'large' );
echo "<span class='search-result-counter {$counterclass}'>{$searchthumb}</span>";
and this to quick css:
.search-result-counter {
padding: 0;
}
.search-result-counter img {
width: 100%;
height: 100%;
border-radius: 100px;
}
Hi,
2.) What is the actual size of the logo image that was uploaded? You may need to re-select it from the Theme Options, and make sure to select the full size and not the thumbnail version of the logo image.
Best regards,
Ismael
Hi Sheila,
For hover, font-color is invalid, just use color
As for featured image and thumbnails, I apologize for misunderstanding, please use this CSS code instead:
#top .av-magazine .av-magazine-sideshow.av_one_half {
padding-left: 0;
}
The default value is 3% (you can set it with any value and you can use % or px)
Best regards,
Nikko
Hi Nikko,
Thanks for your quick reply! :)
* Regarding the space in the magazine element. It seems like the css is changing the space between the thumbnails images and the content, and not the space between the thumbnails and the featured post/image?
* The hover effect worked out perfectly! But how do i change the font colors? I tried to insert this css: font-color: #ffffff;
but not working.
THANKS i advange!
Best regards Sheila
Hi Sheila,
The thumbnails in the magazine element has a fixed space, you can change it via CSS (default is 15px):
#top .av-magazine-entry-small .av-magazine-thumbnail {
margin-right: 20px;
}
And I have a background-color (pink) behind the text in the icon box – is it possible that the color changes on mouse over/hover?
Yes, it’s possible but it’s not possible inline, please remove all those inline CSS, then add this CSS code in Quick CSS:
.home #av_section_1 .iconbox_content p {
background-color: #fbebf5;
font-size: 13px;
padding: 5px;
text-align: left;
}
.home #av_section_1 .iconbox_content p:hover {
background-color: #3374c2;
}
Best regards,
Nikko
Hey fabienneRedUmb,
Thank you for the inquiry.
The theme automatically crops the post thumbnail or the featured image to 845x321px, but it can be adjusted if necessary. Please install the following plugin, activate it, go to the Settings > Media panel, look for the entry_with_sidebar thumbnail and adjust its size. Regenerate the thumbnails after the adjustment.
// https://wordpress.org/plugins/simple-image-sizes/
Best regards,
Ismael
Hi Nikko,
Thank you! It worked. But now i cant seem to find where i can adjust the space between the featured image and the thumbnails in the magazine element?
Rikard,
I uploaded the new theme, as you requested in another email, via ftp and another folder. The theme is now updated, but the gallery is still doing the same thing.
It won’t show up till we pass it then come back up. On mobile it looks good… it shows little thumbnails of the gallery images, then click on them and they get big. On desktop. the little gallery images are grayed out, and don’t show to be able to click on them till after passed and scroll back.
I am adding my ftp credentials in private.
hi there,
ive got a little question.
i bought the woocommerce mix and match plugin. the support is great (not that good as enfold but great :-) )
they sent me a little codesnippet for a customazion:
To achieve this this functionality, we need to alter code inside the function ubp_product_layout inside the class-ubp-frontend.php file located at mix_match_box_product > includes directory.
Replace the following line (at line no.258):
$itemHtml .= ‘<figcaption>get_id())) . ‘”>’ . esc_html($_product->get_name()) . ‘‘;
With the following:
$imageURL = wp_get_attachment_image_src( get_post_thumbnail_id( $_product->get_id() ), ‘single-post-thumbnail’ );
$imageURL = ($imageURL) ? esc_url($imageURL[0]) : wc_placeholder_img_src(‘single-post-thumbnail’);
$itemHtml .= ‘<figcaption>get_id().'”>’ . esc_html($_product->get_name()) . ‘‘;
this works great. now i want to make this save for updates.
is it possible to place the pluginfile-file “mix_match_box_product > includes > class-ubp-frontend.php” into my enfold child folder?
Thanks Ismael,
You cant use Src Set with background image CSS though?
Using Srcset:
If srcset is used and background image is set to center or any of the other settings – The banner image will zoom in on the wrong spot in a majority of cases.
Srcset with cropped thumbnails may solve the performance problem but it doesn’t meet the design intent or prevent CLS shift caused by content in the colour element being taller than the min-height. Sorry to add another issue I had not previously mentioned!
If you set a minimum height for the ALB colour section OR the ALB color section becomes taller because the content doesnt fit on mobiles. You also get a CLS shift if you set a min-height and the content increases the size of the box beyond it. I have another set of rules I apply so that the height displayed matches the actual height of the image for typical screen sizes. So it is possible to solve the problem but requires bespoke optimisation depending on design intent.
Within enfold this could be solved by adding the option to upload different background images for different screen sizes rather than just one image. A real nightmare for novice users who probably dont have photoshop experience. You also have to set a min-height that matches the actual height of the element otherwise you get a BIG CLS shift.
If srcset is implemented I wont complain but the min-height CLS issue will still exist.
I have a lot of new rules to put in place for this approach to work which I will implement anyway – a bit time consuming but it works extremely well.
I am extremely confident that my modifications and setup will make any Enfold site pass web vitals. Before May1st I am making all of the Enfold sites on my servers pass web vitals.
I am really impressed with how easily I have been able to get Enfold to pass (with some advanced technical knowledge). I am in the process of working on a similar solution for DIVI but this seems to be much harder.
I am now one of the only developers in the UK who is offering sites that pass web vitals thanks to the quality of Enfold!
Hi,
please see these 4 screenshot:
douglas-consulting.de/screenshots/dc1.jpg
It shows that the Enfold page which we used to show the woocommerce products uses a sidebar
This is the code to call the products:
[av_productgrid categories='18,36' wc_prod_visible='' wc_prod_hidden='' wc_prod_featured='' wc_prod_additional_filter='use_additional_filter' sort='dropdown' prod_order='' offset='0' columns='2' image_size='woocommerce_thumbnail' items='9' paginate='yes' alb_description='' id='' custom_class='' template_class='' av_uid='av-knmye4x7' sc_version='1.0']
douglas-consulting.de/screenshots/dc2.jpg
It shows that the sidebar has content
douglas-consulting.de/screenshots/dc3.jpg
It shows that the standard woocommerce shop-URL shows the fiolters. So they are there, in the right sidebar, and working
douglas-consulting.de/screenshots/dc4.jpg
It shows that the sidebar called in the Enfold page does not
How do i make the sidebar shows the filters?
mfg
Christian
How do I get the galleries on my page to show up upon loading. I like how it looks on mobile, with thumbnail photos that you can click on. On desktop, however, the thumbnails are tiny and grayed out. They stay this way until I have scrolled past it and then back up.
This is the page showing the issue:
especially by the time you get to the bottom.
Is there some way to fix this?
Thank you!
Hi,
Thank you for the info.
What are the original sizes of the image in the partner/logo element? You may need to remove the items and add them again, make sure that the original size is selected instead of the thumbnail. (see private field)
Best regards,
Ismael