Background images tags

  • Hello,

    I see the plugin does its best to find background images using the following:

          // Process background images on div elements.
      $buffer = $this->parse_background_images( $buffer, 'div' );
      // Process background images on li elements.
      $buffer = $this->parse_background_images( $buffer, 'li' );
      // Process background images on span elements.
      $buffer = $this->parse_background_images( $buffer, 'span' );
      // Process background images on section elements.
      $buffer = $this->parse_background_images( $buffer, 'section' );
      // Process background images on a/link elements.
      $buffer = $this->parse_background_images( $buffer, 'a' );

    My theme happens to put background images on header tags. Would it be possible to add a filter so that the list of tags can be tweaked? Something like:

          // Process background images on specific tag elements
      $background_images_tags = apply_filter( 'ewwwio_background_images_tags', array( 'div', 'li', 'span', 'section', 'a' ) );
      foreach ($background_images_tags as $tag) {
          $buffer = $this->parse_background_images( $buffer, $tag );
      }

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter therealgilles

    (@chamois_blanc)

    Hmm that may not work. I see the background image is specified as inline css and not directly attached to the header tag.

    Thread Starter therealgilles

    (@chamois_blanc)

    I see the plugin does not seem to do webp replacement for background images in css inline code. Is that something you may be willing to add?

    Plugin Author nosilver4u

    (@nosilver4u)

    Do you mean inline style blocks, or within the style attribute directly on any given element?

    If the former, this is something we can only do with a couple of our paid products (Easy IO and SWIS Performance). For more info on paid products, please send us an email: https://ewww.io/contact-us/

    If the latter, our Lazy Loader (on the Easy Mode tab) enables WebP rewriting alongside the JS WebP rewriter for such URLs.

    I do like your idea for allowing filtering of the element types to parse for background images. I might have to look into that further ??

    Thread Starter therealgilles

    (@chamois_blanc)

    Thank you for your response. It’s within inline style blocks.

    I did notice in the code that inline style blocks were linked to Easy IO. I guess I was only looking for webp replacement without lazy loading in this case, as it is the header/title background image and lazy loading would look odd.

    Plugin Author nosilver4u

    (@nosilver4u)

    Both Easy IO and SWIS will do that, but otherwise it’s pretty much impossible to do JS-based WebP replacement in an inline style block with proper fallback for non-WebP browsers. We might get there someday, but not today.

    Thread Starter therealgilles

    (@chamois_blanc)

    Thank you for your response. Understood.

    CSS Tricks suggest doing the following:

    .no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}
.no-js .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

    but I can see how that would be hard to do with post-processing like your plugin is doing. Hopefully WP and/or plugin owners will soon add better support for the format (and hopefully something forward-compatible with any new format that could improve image sizes).

    Plugin Author nosilver4u

    (@nosilver4u)

    Indeed, that gets quite tricky trying to parse all that out with PHP (and then JS on the front-end). Feasible, but it’d be a whole lot easier if they just used direct style attributes like I’ve asked them to.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Background images tags’ is closed to new replies.