AVIF Support

The plugin has an internal list of supported image types based on the extension, since the backend also needs to be able to determine the width and height of the image.

So just adding .avif and .avifs to the list is not enough, but I have to check, if the backend code can reliably read the width/height of the images. If this is possible, I will add these types as well in the backend.

Thank you for your intervention and I keep my fingers crossed for good news in this matter

I just checked the possible support for AVIF in the backend and it works as expected. Version 5.5.2 of Lightbox with PhotoSwipe will now support AVIF as well. Just keep in mind that you should use a decent version of PHP and at least WordPress 6.5 to be sure.

Unfortunately, AVIF images still cannot enter into lightbox.
I’ve realized that they haven’t got needed attributes: data-lbwps-width, and data-lbwps-height, so I’ve wrote the workaround (put in functions.php)

/**
 * Fix for AVIF images that can't get lightbox effect
 */
add_filter('the_content', function($content) {
  if ( !is_singular() || strpos($content, '.avif') === false ) {
      return $content;
  } else {
    // Use DOMDocument to parse and modify content
    $dom = new DOMDocument();
    libxml_use_internal_errors(true); // Suppress warnings for invalid HTML
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    libxml_clear_errors();

    // Get all <a> elements in the content
    $anchors = $dom->getElementsByTagName('a');

    foreach ($anchors as $a) {
      $href = $a->getAttribute('href');

      // Check if the link points to an .avif image
      if (strpos($href, '.avif') !== false) {
        // Retrieve image metadata
        $image_id = attachment_url_to_postid($href);
        if ($image_id) {
          $image_meta = wp_get_attachment_metadata($image_id);

          if (!empty($image_meta['width']) && !empty($image_meta['height'])) {
            // Add data attributes to the <a> tag
            $a->setAttribute('data-lbwps-width', $image_meta['width']);
            $a->setAttribute('data-lbwps-height', $image_meta['height']);
          }
        }
      }
    }
      // Save the modified HTML content
      return $dom->saveHTML();
  }
});

this works for me ??

That is strange – I tested it with existing AVIF images and had no issues at all. However my plugin does not use wp_get_attachment_metadata(). I will add this as an additional option in case the image details could not be determined, because your workaround will add a lot of additional load to the site since every page/post has to be processed fully by the DOM parser and in case there is some problem with the HTML code you may get unexpected results. Can you provide an example image where this problem occured?

@awelzel , Thank you for your willingness to look more closely at the AVIF issue.

I’ve just withdrawn the function; Here are WebP and AVIF images linked (for example: in the accordion – the first is WebP, next AVIF)

Ok, thanks for the examples. I will need some time to come up with a solution (maybe until the weekend).

As I expected – all images work fine in my environment. Also see here as an example, where I used one of your example images:

https://wordpress-demo.arnowelzel.de/avif-images-in-photoswipe/

My plugin uses the PHP function getimagesize() to determine the width and height of the image. So either the plugin does not recognize the image at all (and thus it does not even try to handle it) or your PHP version does not support getimagesize() for AVIF.

I will add additional code to be able to use wp_get_attachment_metadata() – but it would also be interesting, what PHP version you use and what extensions are available.

Edit: AVIF needs at least PHP 8.1 – older PHP version do not support AVIF images to determine the image size using getimagesize(). In this case additional extensions are needed like GD.

• This reply was modified 1 month, 2 weeks ago by Arno Welzel.
• This reply was modified 1 month, 2 weeks ago by Arno Welzel.