Hey designelefant,

Thank you for the inquiry.

After adding the code with the remove_image_size function, did you regenerate the thumbnails? Please note the function will not affect images that are already uploaded to the site. It will only work on newly uploaded images.

You can use any of these plugins to regenerate the thumbnails.

// https://wordpress.org/plugins/force-regenerate-thumbnails/
// https://wordpress.org/plugins/regenerate-thumbnails-advanced/

Make sure to create a site backup or restore point before proceeding.

Best regards,
Ismael

Hi,
Glad that this helps, the backend Featured image thumbnail is a WordPress function and I don’t know how to change this. But as you pointed out your customers won’t see this. Shall we close this thread then?

Best regards,
Mike

Hey ProSEO,
I added this to your functions.php file in Appearance ▸ Editor:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

and it solved your webshop

and the Related products:

Best regards,
Mike

Hi,

Thank you for the update.

There are thumbnails in the Preview Image Size selection that crop the source image based on the specified dimensions, but they retain the original aspect ratio. For example, if the specified thumbnail size is 400x200px, which has an aspect ratio of 2:1, and an image with a 16:9 aspect ratio is uploaded, the image will be resized to a maximum width of 400px but it will retain its original aspect ratio. This means the height will be adjusted proportionally. This is why it’s recommended to upload images with a similar size and aspect ratio.

Best regards,
Ismael

Hey Richard,

Thank you for the inquiry.

To avoid distorting the images, you can use the following css code instead:

.slide-image {
  min-height: 223px;
}

.slide-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 223px;
}

Aside from using the css above, other solutions include uploading images with the same height and aspect ratio, or selecting a specific thumbnail in the Styling > Appearance > Preview Image Size settings if you’re using the Blog Posts element.

Best regards,
Ismael

Hey ibuzaev,

Thank you for the inquiry.

Try selecting the second option (Show thumb and title by default), then add this css code to hide the thumbnail container.

#top .related_image_wrap {
    display: none !important;
}

Let us know if this works for you.

Best regards,
Ismael

Hi,

Thank you for the update.

1.) You can safely remove some of the thumbnails if you think they’re not going to be used. Most of them are only loaded on smaller screens or mobile devices.

2.) We haven’t tested the plugin, but it shouldn’t conflict with the theme. Please contact the plugin developers for more info.

3.) The plugin should automatically do this without editing the database. Again, you can contact the plugin developers or refer to their documentation for additional info.

To learn more about site optimization, check the links below:

// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.html

Best regards,
Ismael

Hey ibuzaev,

Thank you for the inquiry.

Yes, it’s safe to disable the thumbnails, but we don’t recommend it as they contribute to site speed optimization. If you still want to proceed, this thread should help: https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1270140

Best regards,
Ismael

Hey Octopus4444,
Thank you for your patience, but the example links that you posted all lead to a 404, when I check a few of your pages the color section background image with wp_custom_field:_thumbnail_id} seem to work correctly when I check. For example on /modules-specifiques/ you have this

pointing to this thumbnail

and on the frontend it shows correctly

perhaps you have already sorted this out?

Best regards,
Mike

Hey Tanja,

Thank you for the inquiry.

Yes, by default, WordPress applies srcset and sizes attributes to images, allowing the browser to select a more suitable thumbnail for different screen sizes. You can learn more about it here: https://developer.wordpress.org/apis/responsive-images/

Best regards,
Ismael

Hey bdfuel,

Thank you for the inquiry.

You can manually add the html using a Text or Code block element. Example:

<div class="avia-author-book-container avia-column-gap-no">
<div class="avia-column avia-col-50 avia-top-column avia-element avia-element-1fbc302" data-id="1fbc302" data-element_type="column">
<div class="avia-widget-wrap avia-element-populated">
<div class="avia-element avia-element-41719f0 avia-widget__width-initial avia-widget avia-widget-jet-listing-dynamic-image" data-id="41719f0" data-element_type="widget" data-widget_type="jet-listing-dynamic-image.default">
<div class="avia-widget-container">
<div class="jet-listing jet-listing-dynamic-image">
                        <a href="https://demo.crocoblock.com/v2/only-books/book-authors/adiva-geffen/" class="jet-listing-dynamic-image__link">
                            <img width="100" height="100" src="https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-100x100.jpg" class="jet-listing-dynamic-image__img attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="Adiva_geffen" decoding="async" srcset="https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-100x100.jpg 100w, https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-150x150.jpg 150w, https://demo.crocoblock.com/v2/only-books/wp-content/uploads/2022/04/Adiva_geffen-230x230.jpg 230w" sizes="(max-width: 100px) 100vw, 100px" loading="eager">
                        </a></div>
</div>
</div>
</div>
</div>
<div class="avia-column avia-col-50 avia-top-column avia-element avia-element-09dc9ac" data-id="09dc9ac" data-element_type="column">
<div class="avia-widget-wrap avia-element-populated">
<div class="avia-element avia-element-049d92b avia-widget avia-widget-jet-listing-dynamic-link" data-id="049d92b" data-element_type="widget" data-widget_type="jet-listing-dynamic-link.default">
<div class="avia-widget-container">
<h4 class="jet-listing jet-listing-dynamic-link">
                        <a href="https://demo.crocoblock.com/v2/only-books/book-authors/adiva-geffen/" class="jet-listing-dynamic-link__link">
                            <span class="jet-listing-dynamic-link__label">Adiva Geffen</span>
                        </a></h4>
</div>
</div>
<div class="avia-element avia-element-5b03505 avia-widget avia-widget-heading" data-id="5b03505" data-element_type="widget" data-widget_type="heading.default">
<div class="avia-widget-container">
                    <span class="avia-heading-title avia-size-default">1 books</span></div>
</div>
</div>
</div>
</div>

Then add this css code:

.avia-author-book-container {
    display: flex;
    flex-wrap: wrap;
}

.avia-column.av-ia-col-50 {
    width: 50%;
    padding: 10px; /* Adjust the padding as needed */
}

.avia-widget-wrap {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .avia-column.av-ia-col-50 {
        width: 100%; /* Stack columns on smaller screens */
    }
}

You can use the 1/4 Column element for each author.

Best regards,
Ismael

Hey tixxpff,

Thank you for the inquiry.

You can add this filter in the functions.php file to change the lightbox thumbnail size of the horizontal gallery:

function avf_alb_lightbox_image_size_mod($size) {
  return "full";
}
add_filter('avf_alb_lightbox_image_size', 'avf_alb_lightbox_image_size_mod', 10, 1);

Best regards,
Ismael