Hi Mike,

Thank you for your patience in working through this, I understand it’s not always easy to assess all different layout setups people can have with Enfold and all the modifications they apply :-)

Your new CSS to hide the title from showing over the masonry image works perfectly, so that is good workaround for me for now. I just need to set all masonry galleries to “always show title” and then hide them through CSS, then the “empty link text” WAVE error doesn’t appear anymore. So thanks for that, one issue tackled.

Still, since this is a bit convoluted as a procedure (set to show Titles and then hide them anyway), could I ask you to submit a fix request/feature request for the things we encountered during these tests? I noticed that particpants cannot do that themselves anymore. So could you please forward this as a feature/fix request? Thanks!

Re: Masonry Gallery perfect grid
1)
Link text should not be affected by the option Display Neither, which is now the case. If I choose that option in the Masonry Settings, WAVE errors about empty link text appear. Ideally link text should be something like “Open <image-number-in-gallery> in lightbox”, regardless of other options set.
2)
Duplicate links in the Galleries overview page (grid masonry category) (on image and Title) should be solved by uniting them in a container and then setting one link on the container. That way the links are independent of other options chosen.
3)
Some improvements could be made to the interface of the masonry gallery:
– the gallery styling gives the possibility to display:
– Display Title and Excerpt
– Display Excerpt
but: >>> Excerpt is actually the image Caption — please change that for clarity
– under “Element Title and “Excerpt”(= Caption) display settings”:
– the explanation description is not correct, should be something like
“You can choose whether to always display, display only on hover, or hide on hover”

Thanks for the good workaround for the “empty link text” error, I would not have found that all by myself.
BTW, I use the WAVE extension too (in Chrome and in Firefox).

Thanks for all the help,
Rob

• This reply was modified 4 years, 5 months ago by rob2701. Reason: typo correction

Hi Mike,

Indeed on the 3column perfect grid portfolio on the demo there are no empty link errors.

I have just done a little testing, and the difference is in the Captions Display settings in the masonry gallery.
When I set Captions to “Display Title/Bottom/AlwaysDisplay” (like in the demo) I don’t get any empty link text errors either.
I have done this on the first gallery on the dev site, check it out there.
Problem is: I do NOT want the Titles displaying below the thumbs (as they are simply the filenames).
So the issue remains…

And what about the second issue I mentioned on the galleries overview page (duplicate links on the Galleries overview page which links to all individual masonry galleries, where both the featured image and the title of the gallery point to the same URL)?

Regards,
Rob

Added info:
I can’t hide the titles when set to display through CSS either, because the space remains even if they don’t show:

/* hide image titles in masonry galleries - even if set to display */
h3.av-masonry-entry-title {
display: none;
}

In an “ideal” world, the link text would go something like “Open image <insert-image-number> in lightbox”
Just my 2 cents :-)

• This reply was modified 4 years, 5 months ago by rob2701. Reason: added my 2 cents for image link text

Hi Mike,

Thanks for looking into this. Yes, that is the exact error from the WAVE tool: “Empty Link: A link contains no text” on the masonry gallery image links (the thumbnails with links to the lightbox).

What you suggest is actually what I already have: each image automatically has the filaneme as title.
Yet in my setup the accessibility compliance test still shows empty link. So there must be something else different in my setup than in your testing environment.

What’s different in my setup is that I have in my functions.php code to hide the tooltip on the images on hover:

// Hide image filename (alt text) displaying on hover
// NOTE: this ALSO removes the ability to use TITLES (="captions") in the lightbox galleries!
// Added query to also remove title on hover in portfolio galleries
function remove_title_attr(){
?>
 <script>
jQuery(window).load(function(){
jQuery('#wrap_all a').removeAttr('title');
jQuery('#wrap_all img').removeAttr('title');
jQuery('.av-masonry-image-container').removeAttr('title');
});
 </script>
<?php
}
add_action('wp_footer', 'remove_title_attr');

I thought that may have been interfering, but removing it makes no difference.
The empty link error only disappears when I set the masonry gallery images to “Display Title”, but that is not how I want it: I like the clean image only look. Plus, I use the image filename as the title (and there is no way I am going to manually enter different titles in the media library manually for all since I don’t use them anyway), resulting in a “Redundant title text” error. So that’s two reasons why I cannot use that.

Can you take a look? Details in private field.

Related issue is (on the Galleries overview page which links to all individual masonry galleries) both the featured image and the title of the gallery are a link, resulting in the accessibility alert “redundant links: adjacent links go to the same URL”.
You can see this on the “Impressions” Portfolio grid.

Is there a way to either unite both links (featured image and title) or if that cannot be done to effectively hide the title links programmatically?

Thanks for your help and time,
Rob

Hi Mike,

No worries, I know you guys have a lot on your plate. Thanks for taking the time to look into this.

You write: “If you want a constant breadcrumb (which does not use sessions to “guess” the right parent page based on previously visited pages) you need to select the breadcrumb parent manually.” How can I select the breadcrumb parent manually? I cannot find an option for that.

The pages don’t have a parent page. They are independent portfolio categories. Not nested anywhere, no parent. So they can’t have a parent set even if I wanted to, simply because they don’t have one.

Test with Home temporarily set as parent / custom menu links for Portfolio Cats
If I select for example Home as the parent page (just for testing purposes) and then use custom links to replace the normal menu entries (both portfolio categories top level links in the menu), that just results in breadcrumbs like this:
Opening CAT2-item from CAT2 Menu link: Home/Home/CAT2/CAT2-item
Opening CAT2-item from button in CAT1-item: Home/Home/CAT1/CAT2-item

Test with no page parent set / custom menu links for Portfolio Cats
If I do not select a parent page for these two portfolio category pages (simply because they do not have a parent page), and set the menu items with custom links like you suggested, this results in the following breadcrumbs:
Opening CAT1-item from CAT1 Menu link: Home/CAT1/CAT1-item
Opening CAT2-item from CAT2 Menu link: Home/CAT2/CAT2-item
Opening CAT2-item from button in CAT1-item: Home/CAT1/CAT2-item

Conclusion:
So unfortunately the conclusion is that the behaviour is not solved through custom menu links.
The only difference that makes is that now the CAT2-items, when opened from the CAT2 page, actually retain the proper category (CAT2), whjere before they retained the CAT1 indefinitely when that link was visited first.
But when opened through a link (button) from a CAT1-item they still show Home/CAT1/CAT2-item…

For my understanding: can you explain why this is so difficult for the theme to determine? All portfolio items in both portfolio categories are properly assigned to only their own respective portfolio categories.
Shouldn’t the theme be taking the breadcrumb category for each portfolio item from the assigned portfolio category for the items from the database?

At the moment (because this is a simple site setup with only 2 portfolio categories of equal level) I can manage by doing a manual intervention. But you can imagine how this would quickly become unmanageable if there were lots of portfolio categories or even nested ones, then the need for manual intervention would quickly become a nightmare.

Long story short: I hope the theme breadcrumbs should in some way be able to detect the proper portfolio parent category for each item and link to that, after all, they are there, assigned properly.

I have included access to the dev site in private field if you want to try it out there.

Thanks for your help,
Rob

Hi,

Glad to hear the initial code works.

Like I explained above, for some reason the General settings page in Regenerate Thumbnails keeps showing the default registered image sizes in WP. But when you actually regenerate the thumbnails on an actual image, then it correctly shows the registered ones with a green checkmark and the deregistered ones with a red cross. Don’t know why, you should ask the developer of the plugin. Same for why it doesn’t remove the unused redundant thumb sizes, plugin developer will know more than me. But if the Regenerate Thumbnails Advanced by Shortpixel works for removing the redundant ones, great. Use it once, then after that the Regenerate Thumbnails one will handle the new ones correctly.

Trimage says it will work an Mac, macOS Trimage is available from Homebrew, to install, type:
brew install trimage
Launch by executing trimage in Terminal.

ImageOptim (For macOS) may be a good alternative. PNG Gauntlet for PNGs.
Caesium Image Compressor may also be a good choice.

Regarding my choice to disable WP srcset for now:
I have opted out of that to be able to serve “1 double size image with high compression for all devices”. It results in sharp images but no extra page weight. At the moment there is no way with Enfold to serve different images to different devices using the Retina approach chosen. If you enable WP srcset it will just create lots of extra image sizes which cannot be used in Enfold effectively anyway now.
Also don’t be fooled too much by the possibility of using CSS choices for different devices (by duplicating blocks and assigning custom CSS classes to specify the device, it will just result in ALL the images for ALL devices loading on your pages ALL THE TIME (yes, for all devices regardless).
So no, I don’t know at the moment how you could implement WP srcset while using Enfold.
Hence my approach: 1 image fits all. Added bonus: less http requests in galleries, even if images are heavier on smaller devices for now.

Of course, once Enfold implements srcset (which they have promised to deliver at some point) the whole approach changes, as we will hopefully be able to serve different sizes to different devices (but still maintain the double size high compression approach for all of them).

Kind regards,

Rob

• This reply was modified 4 years, 6 months ago by rob2701. Reason: Removed my stupid remark about why Regenerate Thumnails might not be picking up the list of unset image sizes in its on its general page. Turns out others have noticed the same behaviour (on the plugin's Support page)

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 4 years, 6 months ago by rob2701. Reason: Added remark about how to check for ACTUAL created thumbs

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 4 years, 6 months ago by rob2701. Reason: Added remark about Media Settings in WP

Hi Ismael,

The uneven lines thickness is there to my eyes… :-)
Beste visible at around 900px, in you own default demo: https://kriesi.at/themes/enfold/

FF 73.0.1 > top and bottom lines thinner
Opera 67.0.3575.53 > center line thinner
Chrome 80.0.3987.132 > center line thinner

The visibility of what I mention could maybe have something to do with the fade-in transition you apply to the icon, which makes it sometimes very visible sometimes not so much. Maybe only on a cleared browser cache.

Anyway, it was just something I noticed and fixed on my own devsite.
But if no one else sees it, then please close this as solved, by all means.

Kind regards,

Rob

Additional info:
This is on Win8.1, when I see the same version FireFox on Linux Mint 19.3 there is no uneven line thickness… ????
I think the transition applied could be the issue on Win8.1 FireFox and other browsers.
Anyways, the color not applying after setting it in Theme Options > Main Menu > Burger/Mobile Menu Styling between 768px and 989px is valid on all platforms and browsers, you may want to check that.

• This reply was modified 4 years, 8 months ago by rob2701.

Hi Ismael,

No, sorry, local installation.

But I can also see it on a standard Enfold 4.7.3 installation with child theme, default demo imported. (using FireFox 73.0.1)

When resizing the browser from max to smaller, if you look closely you can see the top and bottom lines of the hamburger icon are thinner than the center line (because of the negative top and bottom you apply in the layout css)
.
And the color only applies below 768px when set in the Main Menu options, not from 768 to 989px.

Kind regards,

Rob

Hi Tanja,
The featured images setting works only on the portfolios of course.
For the galleries you just upload the originals and choose for example small thumbnails and “No Scaling”.
The browser will resize the images for the preview strip from the original and open the original size in the lightbox.
Just experiment.
Kind regards,
Rob

Hi Tanja,
The whole idea about my solution is to serve up ONE high resolution image to all devices, but to make that image bigger with higher compression (for retina screens and zooming sharpness). This is because on all modern devices images can be zoomed (enlarged), so the “traditional” way of serving smaller images to certain devices would result in blurry images when enlarged or when viewd on retina/high resolution screens.
That is why I chose to disable the WP responsive images solution and disable the same approach used by Enfold.
See https://www.netvlies.nl/tips-updates/algemeen/design-interactie/retina-revolution/ for the background on this.

To take this approach you need to MANUALLY upload the correct size and resolution for each image on that particular page, using Photoshop or similar.

When you start this on an already existing site the code changes will ONLY affect NEW uploads, i.e. newly uploaded images will not get all of those resized thumbnails created.
You can then (at your own pace) start to replace the existing images with the new accurately sized ones. I recommend a plugin like “Enable Media Replace” to make this process less “painful”.
Once you have replaced all existing images with new precisely sized ones, you can then use a plugin like “Regenerate Thumbnails” to recreate the proper thumbnail sizes (without all the additional ones) and get rid of all previously created, now unneeded, thumbnail sizes to save space on the server.

I have been using this method for several years now, and I am completely happy with both the loading speed and the image quality even when zoomed.

So try it out and see if it works for you. Hope this helps.

Regards,
Rob

Hi Mike,

I see. I’m getting help from Marko at W3TC to get to the bottom of this. I’ll post here when we know more.

By the way, the same issue happens with the 2019 theme, so chances are slim that this has to do with Enfold.

With W3TC enabled the issue is ONLY with the X, when using quantity=0 it works fine, and with the “Empty Cart” plugin (which deletes all cart items at once) there is also no issue with W3TC active.

Right-clicking on the X to open in a new tab opens the Home page though, but then when you go to the shop it nicely shows “ITEMNAME deleted. Undo?” so without the need for a page refresh.

Could be a thing in the browser cache in W3TC, could be the way the page refresh is called with the X (Woo/Enfold?).
I saw that earlier in the forum there was an issue that could maybe point in the right direction:

Kind regards,
Rob

• This reply was modified 5 years, 7 months ago by rob2701. Reason: added info

Hi Mike,

Thanks for the reaction and time.

Any insight you guys can give me regarding the coding difference between deleting through the cross and deleting through the quantity in the cart?

Kind regards,
Rob