Hi,
Correct, if to want to also center the thumbnail, try adding this css:

@media only screen and (max-width: 767px) { 
	.av-catalogue-image {
	    float: none;
	    margin-right: 0;
	}
	a img.av-catalogue-image {
		margin: auto;
		display: block;
	}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience, when I check your test page the images open in a new tab and not in the “lightbox” is this by intention? I believe that one of the following snippets will help, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){
    $link = wp_get_attachment_image_src($attachment->ID, "full");
    return $link;
}
add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);

if that one doesn’t help, please remove it and try this one:

function change_lightbox_size() {
    return "full";
}
add_filter('avf_avia_builder_helper_lightbox_size','change_lightbox_size', 10);

if neither of these help, please include an admin login in the Private Content area so we can examine further.

Best regards,
Mike

Hi,

Thank you for the update.

After resizing the thumbnail size, you have to upload the images again or use a plugin to regenerate the thumbnails. The existing thumbnails will not automatically inherit the updated size configuration.

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

Best regards,
Ismael

Hi,

Thank you for the update.

After resizing the thumbnail size, you have to upload the images again or use a plugin to regenerate the thumbnails. The existing thumbnails will not automatically inherit the updated size configuration.

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

Best regards,
Ismael

Hey Jan,

Thank you for the inquiry.

Why does it open this one in a new browser tab (downsized to 689×1030!)?

That is the maximum size for the “large” thumbnail, which is the default thumbnail used in the gallery lightbox. You can adjust this size in the Settings > Media panel. Please check the documentation below for more info.

// https://wordpress.com/support/media-settings/

Best regards,
Ismael

Hey karinkropik,

Thank you for the inquiry.

When using the full width slider those options are not shown, so I don’t know what image size the system takes.

When using the Fullwidth Easy Slider, you have the option to select the image size or thumbnail. Please go to the Styling > Slides section and choose the desired size in the Slideshow Image and Video Size settings. Additionally, you can set a minimum pixel height and enable image stretching to cover the entire slider.

Best regards,
Ismael

Hi,

Thank you for the update.

To adjust the image size in the archive pages, you can add this code in the functions.php file.

add_filter( 'avf_modify_thumb_size', 'avf_modify_thumb_size_mod', 10, 1 );
function avf_modify_thumb_size_mod( $size ) {
   $size['entry_without_sidebar'] = array('width'=>1210, 'height'=>908);
   return $size;
}

You may need to regenerate the thumbnails to resize existing images.

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

Please make sure that you upload images that are not smaller than 1210x908px and have a 4:3 aspect ratio.

Best regards,
Ismael

Hi,
Thank you for your patience and the link to your site, I was able to show the custom field product images (thumbnail_image) on the shop page with this function in your child theme functions.php:

    function custom_thumbnail_display() {
        global $product;
        
        // Get the "thumbnail_image" custom field value
        $thumbnail_image_url = get_post_meta( $product->get_id(), 'thumbnail_image', true );
        
        if ( ! empty( $thumbnail_image_url ) ) {
            // If the custom field has a value, display that image
            echo '<img class="bcs-thumbnail" src="' . esc_url( $thumbnail_image_url ) . '" alt="' . esc_attr( $product->get_name() ) . '">';
        } else {
            // Otherwise, display the default WooCommerce placeholder image (optional, as WooCommerce will handle it)
            echo wc_placeholder_img();
        }
    }
    add_action( 'woocommerce_before_shop_loop_item_title', 'custom_thumbnail_display', 10 );

and then I added this css to remove the duplicate woocommerce-placeholder.png when the custom field product image is shown on the shop page

.woocommerce-shop .product .woocommerce-LoopProduct-link .bcs-thumbnail ~ .thumbnail_container {
	display: none;
}

So now the result is:

Since you are using the BCS BatchLine Book Importer plugin, the single custom field product main image is shown (main_image) by the plugin, if someone was not using this plugin the custom field product main image could be shown with this function:

//for the single product main image
function custom_single_product_image_html( $html, $attachment_id ) {
    global $product;
    
    // Get the "thumbnail_image" custom field value
    $thumbnail_image_url = get_post_meta( $product->get_id(), 'main_image', true );
    
    if ( ! empty( $thumbnail_image_url ) ) {
        // If the custom field has a value, return that image as the main product image
        $html = '<img src="' . esc_url( $thumbnail_image_url ) . '" alt="' . esc_attr( $product->get_name() ) . '">';
    }
    
    return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'custom_single_product_image_html', 10, 2 );

perhaps this will be helpful to someone in the future.
Please check your site and let us know if you find this working as my screenshots above, so we can close this thread :)

Best regards,
Mike

Hi,

Thank you for the update.

As you can check the image dimensions placed on that Blog Posts element are 724px x 724px larger than the 655px

We forgot to mention that the default thumbnail used by the Blog Posts element is called portfolio, which has a maximum width and height of 495px. You can increase the size of this thumbnail by using the avf_modify_thumb_size filter in the functions.php file.

add_filter( 'avf_modify_thumb_size', 'avf_modify_thumb_size_mod', 10, 1 );
function avf_modify_thumb_size_mod( $size ) {
   $size['portfolio'] = array('width'=>1000, 'height'=>1000);
   return $size;
}

After adding the filter, you have to regenerate the thumbnails with this plugin.

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

To adjust the background color of the image container, please add this css code.

.main_color .avia-content-slider .slide-image {
    background: transparent;
}

Best regards,
Ismael

Hi,
Thank you for your patience and for the link to your site, I see that your product imports do not include a “featured image”.
When I check your “custom fields” I see your images for main_image & thumbnail_image, but from what I can see on my demo, the featured image is not stored as a “custom field” but as the thumbnail_id and are refured to by the attachment ID, and since these images are not in your media library they won’t have a attachment ID.
Unfortunately I don’t have a way to test this situation because the standard WordPress import/export file (xml) imports the images into the media library, but your import method doesn’t.
Does your import tool offer any other fields like the thumbnail_id?

Best regards,
Mike

Hey janbornemann44,

Thank you for the inquiry.

We can disable some of the registered thumbnails or image sizes using the remove_image_size function in order to save some storage space. Please add this code in the functions.php file.

// Disable loads of Enfold & WP image sizes upon upload
// do image sizes manually, double-size with high compression for retina screens
// use Photoshop to set exact double size and quality between Q30 and Q40
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
// do NOT remove widget size, is used in backend portfolio items!
// remove_image_size('widget');
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
    remove_image_size('shop_gallery_thumbnail');
}
// Remove unneeded WP image sizes
add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );
// Remove default image sizes here. 
function prefix_remove_default_images( $sizes ) {
// do NOT remove small and medium sizes, they are used in backend Media Library!
// unset( $sizes['small']); // 150px
// unset( $sizes['medium']); // 300px
 unset( $sizes['large']); // 1024px
 unset( $sizes['medium_large']); // 768px
 return $sizes;
}

After adding the code, use the following plugin to regenerate the thumbnails.

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

IMPORTANT: Please make sure to create a site backup or a restore point before proceeding with the steps above.

Related threads:

// https://kriesi.at/support/topic/enfold-image-sizes-3/#post-1108904
// https://kriesi.at/support/topic/still-fighting-with-managing-default-image-sizes/#post-1418393

Best regards,
Ismael

Hi,
The code above will not remove existing images, you will need to use a separate plugin like Regenerate Thumbnails, as I recall this one will remove the unused images.

Best regards,
Mike