Hello Ismael,

You mean you turned the Enfold > Performance > File Compression settings OFF and On again?

Anyway, I had to clear and preload the WP-Rocket cache now, and after that the Notifcation element works!

Thank you for your help!

Best Wishes,
Alwin

Hello Mike,

Okay, but will it be added to the lightbox also soon (this year)?

Alwin

I just installed Enfold version 5 on my websites. In the release notes I read something about swipe options:

“feature: added swipe to all devices supporting touch screens (not only to mobile devices)”

Now, does that mean it’s possible to use swipe for photos in the lightbox now? If yes, how to enable that option?

Thanks :)
Alwin

Thank you Guenni007,

– Do I have to place your code in my Child themes functions.php file?

– I don’t have different languages on my page, so I can skip that part of the code?

The text needs to be translated in German; “Mehr lesen”. So would it have to be like this:

function my_text_strings( $translated_text, $text, $domain ){
switch ( $translated_text ){
    case 'Read more'    :  $translated_text = __( 'Mehr lesen', $domain ); break;

  }
  return $translated_text;
}
add_filter('gettext', 'my_text_strings', 20, 3);

Thanks a lot again :)

Best Wishes,
Alwin

Can you guys help me one more time:

I have now build a page with a grid with 3 rows. I want these 3 rows to switch to 2 rows first (iPad/tablets) and then to 1 row on small mobile devices.

Which code to use for that?

Thanks a lot :)
Alwin

Thank you Mike,

Can I also add these lines to the code above:

remove_image_size(‘shop_thumbnail’);
remove_image_size(‘shop_catalog’);
remove_image_size(‘shop_single’);
remove_image_size(‘shop_gallery_thumbnail’);

Thanks,
Alwin

One other question: why is there the number 11 in the last line of the code:
add_action( ‘after_setup_theme’, ‘ava_image_sizes’, 11 );

Hello Mike,

I did some tests in GTmetrix again and you are completely right, enabling lazy loading solves the issue of loading all images at once :)

I had tried this before, but apparently I did something wrong then.

Very happy with this solution, however 2 questions:

1 – There is now a border around the “big” preview image; can I get rid of that border?
2 – This option only works with the Enfold build in lightbox, and not with the “Lightbox with photoswipe” plugin (lightbox won’t open with the plugin enabled and Enfold lightbox disabled), while the plugin works fine with all other options).There will be nothing to do about that I guess?

Someone from Enfold told me recently that photoswipe options will be added to the default Enfold lightbox. Any idea when that update is scheduled?

Best Wishes,
Alwin

Hello Guenni,

That looked like a good solution, however I ran into 2 problems:

1 – I would have to add 9 galleries to the 9 columns, and this will make make page way to big (around 50 images total).
2 – I use the plugin Lightbox with PhotoSwipe for my lightboxes because I don’t like the fact the in default Enfold lightbox people can not swipe gthe images on a mobile device. The Lightbox with PhotoSwipe plugin works great with Enfold, but seems not to be working with this option.

But it’s not a big issue for me to just use the default lightbox from Enfold, however it is a very big issue for me that my page is getting to big. I like to keep al my pages under 2MB at least.

Maybe it is better to try antoher solution from you?
https://kriesi.at/support/topic/start-gallery-in-lightbox-via-textlink/#post-1350182

Thanks a lot (again) :)
Alwin

Hello Ismael,

Maybe it’s not entirely clear what I mean. Please take a look at this website page:

This website einberg.net was built with a different theme (Story by Pexeto). Because the Story theme is no longer being developed, I am now rebuilding this website with my (favorite) Enfold theme.

You can see an overview of some hotel rooms on the page. When you click on the room “Mondzimmer” for example, a lightbox will open with a number of pictures of the Mondzimmer room. When you click on “Sternezimmer” a lightbox will open with photos of the Sternezimmer room. And so on…

That’s really all I mean and also what I want to achieve with the new Enfold website. Surely it cannot be possible that something so relatively simple (in the Story theme it was no problem at all) is not possible in Enfold?

This is the page (on a temporary URL) I am building right now with Enfold:

How to proceed?

Thank you for your help :)

Best Wishes,
Alwin

Thank you Rikard :0

Best regards,
Alwin

Hello Rikard,

The problem is that the code is working, but not on small mobiles screens in landscape (for example 734px width).

Please look at my site at https://www.responsinator.com/ and you will see what I mean: the second example on responsinator is a mobile in landscape with 734px width, and it is not displaying the 80% logo, but the full size logo.

Kind regards,
Alwin

Thank you Ismael, I will use a plugin for this now and wait for the Enfold update. Good news that this option will be included in the theme :)

Alwin

Hello Guenni007,
Thank you for your help; I now have this code added to my custom css:

/* grid responsive behavior */

.av-share-box .avia-related-tooltip {
  display: none !important;
}

.av-layout-grid-container.grid421 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.av-layout-grid-container.grid421 .flex_cell {
  flex: 0 1 25%;
  width: unset !important
}

@media only screen and (min-width: 620px) and (max-width: 1025px) {
  .av-layout-grid-container.grid421 .flex_cell {
    flex: 0 1 50%;
  }
}

@media only screen and (max-width: 620px) {
  .av-layout-grid-container.grid421 .flex_cell {
    flex: 1 1 100%;
  }
}

/* end grid responsive behavior */

As you can see I played a bit with the pixel settings, so that even on small phone screens in landscape view I see 2 columns side by side, and also on a landscape iPad (1024px so set to 1025px). Also, I aligned it with the breakpoint for the footer (also 620px)

It is working fine now but I do have some questions.

At first, the code didn’t work until I made the following adjustments:

– In Grid Row>Settings I changed the Mobile Breaking Point from 989px or lower to 767px or lower.
– Also, in Developer Settings I had to set Custom CSS Class is grid421 in all 4 individual columns.

Both adjustments were necessary for the code to work.
Is this expected behavior?

Last question:
I want to use this responsive behavior of the grid rows throughout the website. Is it possible to just use one piece of css code for this instead of using css code per grid. So without the Custom CSS Class settings?

Again, thank you very much for your help!! :)
Alwin

Yes, you can close this topic.