if you realy need this i do only see for now a plugin solution. There are a lot of good – especially for fotographers – that have this option on sorting by caption.
See Envira or NextGen Gallery

or – you replace the img src svg with the inline svg.
and then you can go and style the fill colors:

function replace_logo_with_svg() {
?>
  <script type="text/javascript">
  (function($) {
    function a() {
      $( ".logo a img" ).remove();
      $.get('/wp-content/uploads/YOUR-LOGO.svg', function(svg){
        $( ".logo a" ).html( svg );
      }, 'text');
    }
    a();
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'replace_logo_with_svg');

after you have the inline svg file – you had to change some display options for logo
set it to display flex

yes – I guess you’re right. But for now you can help yourself by giving this class to the Color-Section and leaving the background image on scroll in the options of the Color-Section.
By initially leaving it on scroll you prevent the mobile devices from creating this extra parallax container.

yes – of course – if there is a better syntax let me know.
I changed a little bit the code – with better markup – because it is better to have mfp-title is Title – that’s not so confusing then

• This reply was modified 5 years ago by Guenni007.

can you try this in your child-theme functions.php:
and upload the edited file to your child-theme/js/ folder ( on default there is no folder js – create one )
( although in this case it would not be necessary to use the folder structure of the parent theme i think it looks more logical. )

add_action( 'wp_enqueue_scripts', 'wp_change_lightbox_script', 100 );
function wp_change_lightbox_script() {
   wp_deregister_script( 'avia-lightbox-activation' );
   wp_enqueue_script( 'avia-lightbox-activation-child', get_stylesheet_directory_uri().'/js/avia-snippet-lightbox.js', array('avia-default'), $vn, true);
}

PS: do not forget to include: a[href*=".webp?"] – similar to their syntax.

but i believe that the asterisk selector a[href*=".webp"] will be enough and includes : a[href$=webp]

• This reply was modified 5 years ago by Guenni007.

could be too many things – best would be to see the page it concerns

? https://kriesi.at/support/topic/child-theme-download-failed/#post-1221222

– see this site here: https://webers-testseite.de/cynthia/
i make a svg image that is near to your image divider.

This code in child-theme functions.php:

function insert_dividers(){
?>
<script>
(function($){

// just give a custom-class to the color-section or the slider : divider
// and a custom class for top or bottom position: top / bottom
// so there is in that input field f.e.:  "divider bottom"
  $('.avia-section.divider.top').prepend('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.avia-section.divider.bottom').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.divider.top .avia-slideshow .avia-slideshow-inner').after('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.divider.bottom .avia-slideshow').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_dividers');

this to quick css:

.avia-section.divider {
    position: relative !important;
}

.avia-section.divider .container a {
    z-index: 10;
}

.avia-section.divider svg {
    position: absolute;
    z-index: 5;
    width: 100vw;
}

.avia-section.divider svg.top {
    top: -2px !important;
    height: 150px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.avia-section.divider svg.bottom {
    bottom: -2px !important;
    height: 100px;
}

Now – how to insert the dividers:
you only have to give to a color-section – or a slider the class f.e. : divider bottom
then the divider will be inserted as inline svg. On that you can influence the fill color:

.avia-section.divider svg.top path {
  fill: #fff;
}
.avia-section.divider svg.bottom path {
  fill: #fff;
}

e.g. on that example page you see the section with the button “get in touch”
the following color-section has a different background-color!
just solve this by:

#av_section_3 svg.bottom path {
    fill: #c5e3ea;
}

or on top i gave to that color-section the custom-classes: divider top bottom
so there are two dividers in the same section

ok – now i see – and that was my suggestion – this image is a cmyk jpg !
Rendering of cmyk images with browsers tend to have a cast.

by the way: i would take a png file and let the top area transparent – then you can even have on the previous section a background-image.

• This reply was modified 5 years ago by Guenni007.

@DimaP : this is long time ago – why don’t you use the alb itself and goto Advanced Tab of the Slide Image:

we are posting nearly the same time : please read again my comment above.

Best would be to have a custom-class on those img – but you can select them this way too:

img.avia_image[src*="anbwhite"] {
-webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
}

img.avia_image[src*="vrwslogonoyearwhite"] {
	-webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);	
}

here you can have 4 drop-shadows similar to the heading above – but performance is important too.

With new DOM Elements ( mfp-top-bar) and for the mfp-bottom-bar a callback function with new content.
here is my magnific popup script written for that page here: https://webers-testseite.de/pureinstall/masonry-gallery/

See popup script code on that page please.

______

Off Topic : i just realized that a masonry with fixed size got a totaly different markup than the flexible masonry – so code must be changed.

• This reply was modified 5 years ago by Guenni007.

what is always a good way and even on GDPR Reasons is to show the map in an iframe.
This is “outside” your site and you do not need an api key for it.
Click the image:

besides that i will have a look what i have for maps : Maps Javascript API only is needed.

• This reply was modified 5 years ago by Guenni007.

hm – i can not confirm to this: on my opinion the poor rendering is given on firefox – chrome and safari are very near to each other.
Click to enlarge the images:

left to right: firefox, chrome, safari

what makes me wonder is that on firefox it shows a jpg but on info about that image there is webp

besides this it seems to be a high compression : an image of that dimension with only 48kb !

if these are headings then yes – might be done this way.
But as far as i can see is “Vacation Rental World Summit” and “A new beginning” etc. pp a png file and no text.

easiest way and not so performance intensive as f.e. filter : drop-shadow : just edit your images as png files with an outline in f.e. Photoshop.

you can see with drop-shadow :

.avia-image-overlay-wrap .avia_image {
   -webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
}

but you had to find a custom selector on your page. Bring a custom class to those containers.