Hello Ismael, Thank you – I already disabled animations on the Developer tab of the gallery.

Checking the Enfold demo, I see that there’s a delay of the large image swap when rolling over the thumbnails, so it appears that this is a “feature” of the gallery object.

What my client does not like is that delay as one large gallery image is swapped for another. While none of their clients may roll over the gallery thumbnails fast enough for there to simply be a white screen where the large image is, the goal is to speed up the swap between one large image and the next. I may not have been clear enough in my previous post about the issue.

Is there some javascript or other css that causes the delay when one large image is swapped out for another? Would it be possible to modify in a child theme, so that the customization isn’t lost when the parent theme is updated? I am providing a link to a beta page below with only the gallery object.

Hi Rikard:

Please check the Private Content area for the link to the site. My apologies, the texts are in Portuguese, but I will try to drive you through ;-).

I have addes a testing page for you, it is “KRIESI.AT TEST” right after the CONTATO (= Contacts) tab on the right in the Main Menu area. Get into it and scroll down a bit and right after the orange block, you will see on the left, a sidebar and the first widget is the “Enfold Latest Portfolio” element. I applied the codes I provided earlier in the Quick CSS area.

This is actually the result I am looking for. BUT, if you now go to the BLOG page, you will see in the sidebar on the right, that the first widget, ÚLTIMOS POSTS (= Latest Posts) that is holding the “Enfold Latest Posts” element got affected too, I mean, date/time and thumbnail disapeared, and I do not want that.

I would like this element to show the standar behaviour, with the Title, date/time and thumbnai, an JUST the “Enfold Latest Portfolio” element in the “KRIESI.AT TEST” page to be affected.

Not sure if that is possible. Need your guidance.

Thanks a lot.
Cheers,
Carlos

Hi Yigit,
Thanks for your reply.
Double the values works but it would need to create new thumbnails for images as soon as I would like to change them.
So I would prefer your first solution. It works but images are not correctly centered… How could I move them to the left?
Thanks a lot!

If that doesn’t do the trick try this (replace the relevant part):

// Remove unneeded WP image sizes
// updated 2020-01-13 because of additional image sizes
function remove_default_image_sizes( $sizes) {
  unset( $sizes['thumbnail']); // 80px thumbnail
  unset( $sizes['small']); // 150px thumbnail - (Size based on Media setting)
  unset( $sizes['medium']); // 300px - (Size based on Media settings)
  unset( $sizes['medium_large']); // 768 - (Size based on Media settings)
  unset( $sizes['large']); // 1024
  unset( $sizes['extra_large']); // 1500
  unset( $sizes['1536x1536']);
  unset( $sizes['2048x2048']);
// Add these 2 lines to remove the "new" WP default image sizes:
  remove_image_size( '1536x1536' );
  remove_image_size( '2048x2048' );
  return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');

By the way, in Settings > Media I have:
Thumbnail size 80×80, crop checked
Medium size 300×300
Large size 1024×1024
Check yours before doing the regenerate

Oh yeah, and you only see the REAL sizes created in an actual image “Regenerate”, the General “Regenerate Thumbnails” setting shows the “default” registered sizes. Strange but true. Perhaps that is the only issue?
After regenerating you can check this by doing a regenerate on an actual image, and of course by checking the actual files through FTP.

• This reply was modified 5 years, 10 months ago by rob2701. Reason: Added remark about how to check for ACTUAL created thumbs

AFTER checking the registered image sizes in WP Settings > Media are correct and AFTER setting the code in the child theme functions.php, do this:

> Tools > Regenerate Thumbnails
UNcheck: Skip regenerating existing correctly sized thumbnails (faster).
CHECK: Delete thumbnail files for old unregistered sizes in order to free up server space. This may result in broken images in your posts and pages.

You should have remaining:
widget: 36×36 pixels (cropped to fit)
This is used in the Dashboard for the portfolio items

square: 180×180 pixels (cropped to fit)
This is used on the frontend for the Previous/Next buttons to switch between Galleries

Should work like this, does for me :-)

• This reply was modified 5 years, 10 months ago by rob2701.

Hi dgvicario,

There have been some changes since then to WP and some additions also by me for some things.
Below is what I now have in my child theme’s functions.php regarding images and thumbnails:

// set WordPress compression of image and thumbnails on upload and resize to 90 or 95
// images are manually resized, compressed and optimized BEFORE upload already,
// WP compression on images on resize/for thumbnails is standard = 82
add_filter('jpeg_quality', function($arg){return 95;});

// disable image scaling in WordPress 5.3 update (november 2019)
// WP added feature that forces images to scale down if larger than threshold (2560px)
// this interferes with chosen approach for retina images, i.e. serving up
// double-size images with very high compression...
add_filter( 'big_image_size_threshold', '__return_false' );

// remove "responsive images" functionality in WP 4.4 and on from this theme
add_filter('wp_get_attachment_image_attributes', function($attr) {
   if (isset($attr['sizes'])) unset($attr['sizes']);
   if (isset($attr['srcset'])) unset($attr['srcset']);
   return $attr;
}, PHP_INT_MAX);
add_filter('wp_calculate_image_sizes', '__return_false', PHP_INT_MAX);
add_filter('wp_calculate_image_srcset', '__return_false', PHP_INT_MAX);
remove_filter('the_content', 'wp_make_content_images_responsive');

// Disable WordPress responsive srcset images
add_filter('max_srcset_image_width', create_function('', 'return 1;'));

// Disable theme thumbnail creation, will do image sizes manually
// double-size thumbnails for retina screens
// so we do not use the automatically resized and cropped thumnails from the theme
// better to create them manually proper size and image compression
// use Photoshop to set exact double size and quality between Q10 and Q40

// Disable loads of Enfold & WP image sizes upon upload (to save space)
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
// do NOT remove widget size, is used in backend portfolio items!
// do NOT remove square size, is used in backend portfolio and previous/next buttons!
//	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
// updated 2020-01-13 because of additional image sizes
function remove_default_image_sizes( $sizes) {
  unset( $sizes['thumbnail']); // 80px thumbnail
  unset( $sizes['small']); // 150px thumbnail - (Size based on Media setting)
  unset( $sizes['medium']); // 300px - (Size based on Media settings)
  unset( $sizes['medium_large']); // 768 - (Size based on Media settings)
  unset( $sizes['large']); // 1024
  unset( $sizes['extra_large']); // 1500
  unset( $sizes['1536x1536']);
  unset( $sizes['2048x2048']);
  return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');

// Lightbox links default to "large" size thumbnail, we link it to original image size
add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);
function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta) {
   $link = wp_get_attachment_image_src($attachment->ID, "full");
   return $link;
}

// Disable scrolling of background when lightbox image opened
add_action('wp_footer', 'custom_lightbox_script');
function custom_lightbox_script(){
?>
<script type="text/javascript">
(function($) {
    function a() {
      $('body').on('click', '.lightbox-added', function() {
        if($('.mfp-bg').length >= 1) {
          $('html').css("overflow-y", "hidden");
        }
      });

      $('body').on('click', function() {
        setTimeout( function() {
          if($('.mfp-bg').length == 0) {
            $('html').css("overflow-y", "scroll");
          }
        },500);
      });
    }
  a();
})(jQuery);
</script>
<?php
}

Hope that helps, try it out.
Rob

P.S.:
Don’t forget to do a further (lossless) compression on the images you created in Photoshop BEFORE upload to WP, using for example File Optimizer on Windows or Trimage on Linux.

P.S. #2
Note that the sizes you set in WP Settings > Media Settings affect the sizes for Thumbnail size, Medium size and Large size – and set “Crop thumbnail to exact dimensions (normally thumbnails are proportional)” checkmark.

• This reply was modified 5 years, 10 months ago by rob2701. Reason: Added remark about Media Settings in WP

Here’s the code:
[gallery type="rectangular" link="file" ids="1963,863,1964,858,903,1913,1914,1962,868,855,901,861,853,1315,924,864,1917,1479,900,904,1304,907,854,867,859,908,899,856,1343,1724,1831,870,860,902,865,862,869,857,909,906"]

Although when I created/edit the gallery the type is set to thumbnail, this isn’t reflected in the code. If I manually change ‘rectangular’ to ‘thumbnail’ I get an incredibly thin gallery with really small images. None of the options now seems to adapt to the size of the main section of the page.

My other galleries, using identical code (but different ids) initially load up too large and then resize themselves within a few seconds. eg http://www.kingsmeadfield.org.uk/gallery/riverside-gallery/

I’m really confused. Any help would be much appreciated!

• This reply was modified 5 years, 10 months ago by sentinelchicken.

Cheers for your response Mike. Just to share the solution I accidentally found:
On the woocommerce product pages the “product hover” option had to be set to “Hover effect on Overview Pages, Do you want to display a hover effect on overview pages and replace the default thumbnail with the first image of the gallery?” > NO HOVER EFFECT.
I had the option “Yes – show first gallery image on hover”, which caused the problems. Actually this should not be causing problems and did not cause problems in the past. After all hover is only hover, not permanent… Either through woocommerce oe Enfold update this may have been causing the hover problem. Now, after changing each and every product page to “no hover effect”, the actual product image is showing and not the first gallery image.

Sure :-)

1.png is the whole image

2.png is how we see it at the top of the page. We want that top image to always show the whole image and not a generated thumbnail in a smaller size.

Hope you can help!

Hi Victoria
I followed the thread with steps below
1) Open the grid (in the popup) and select “Portfolio Grid Image Size”.
2) Selected “Choose the Portfolio Grid image size manually (select thumbnail size)” and selected Magazine size 710X 375
but it didn’t fix my problem. Still, some images show up in the squire frame, some in magazine size. There no consistency of the shapes of the picture/sizes from page to page.

All I want clear and consistent pictures in full dress length to display my product.
Any help?

Hi Ismael,

Thanks for your reply.

I’ve already tried the different options in in the element’s Gallery Preview Image Size, but no one fulfills my requirements.

When I choose Portfolio (495×400) e. g., the thumbnails all have the same size. But they should differ in size and should also keep the thin white gap between them as you see on the right side on the screenshot in the private content area.

How can I achieve this layout?

Best regards,

zizibe1

Thank you for your reply.

I set the video to always load and set a fallback picture. This works. However, I didn’t have to do that before. The thumbnail picture of the youtube video was displayed.

I have a 2nd website which is set up the same way and there I don’t have the issue. The thumbnail of the video is displayed (see address below)