0

Default WordPress galleries img tags close like <img> which is invalid XHTML. The lazyload XT plugin that I'm using targets valid XHTML img tags which means ending should be:

<img src="http://www.acaciafotografia.com/wp-content/themes/jamdxstarter/img/tri.jpg"/>

instead of

<img src="http://www.acaciafotografia.com/wp-content/themes/jamdxstarter/img/tri.jpg">

How can I filter or modify this so lazyload works correctly?

Issue explained by author of wp lazyload XT integration.

The theme I'm using, UNDERSCORES, modifies the markup of WP galleries to make it HTML5 compliant. This doesn't work well with Lazyload XT , that fetches XHTML img tags that end with "/>" , while HTML5 img tags don't need this and close with ">"

In functions.php I commented out the following line:

    /*
     * Switch default core markup for search form, comment form, and comments
     * to output valid HTML5.
     */
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
//      'gallery',
        'caption',
    ) );
1

As linked to from the comments on your question, the post_gallery filter should help you here.

Unlike a lot of other hooks though, you can't filter the output that comes through from WordPress; you can only provide your own alternative output. This is slightly annoying, and results in you needing to build the gallery from scratch. You can do that with a bit of extra code, though, and the linked StackOverflow answer provides an example (but strangely uses <div src>, so just change that to <img src> - and then draw from the default WordPress markup for the rest, making sure to close your <img /> tag).


An alternative, where you can filter the output, is to use the the_content filter and some clever regex'ing. You need to be careful, because if you don't think of all potential cases, your regex could catch something you don't intend it to. This is exactly the problem the plugin author in this case is trying to avoid.

With that said, here's a potential solution. Modify to your needs, but don't rely on this as a 100% foolproof solution.

// priority must be more than 10, so it runs after the gallery shortcode does
add_filter( 'the_content', 'wpse231040_close_gallery_img_tags', 11);

  function wpse231040_close_gallery_img_tags ( $html ) {
    if ( strpos ( $html, '#gallery-' ) === false ) { return $html; }
    // make sure there's at least one gallery before running the more expensive preg_replace

    $html = preg_replace(
      '/
        (
          \<dl.*?class=["\'].*?gallery-item[\s"\'].*?   # look inside a <dl> with gallery-item class
          \<dt.*?class=["\'].*?gallery-icon[\s"\'].*?   # look inside a <dt> with gallery-icon class
          \<img\s                                       # look inside an <img> tag
        )
        (.*?)\>                                         # match the attributes inside the tag
      /sx',
      '$1$2 />',    // add the initial content, the img tag attributes, and finally a closing />
      $html
    );

  return $html;
  }
| improve this answer | |
0

Default wordpress galleries img tags close with invalid XHTML

That's not the case, as far as I understand it.

The native gallery uses wp_get_attachment_image() to generate each image tag and wp_get_attachment_link(), that's a wrapper for wp_get_attachment_image(), to fetch the image link.

The output of wp_get_attachment_image() is:

$html = rtrim("<img $hwstring");
foreach ( $attr as $name => $value ) {
    $html .= " $name=" . '"' . $value . '"';
}
$html .= ' />';

where we can explicitly see the /> closing.

| improve this answer | |
  • Thanks to your comment I found out a line in UNDERSCORES theme functions.php that is the one that was changing the markup to HTML5 valid. I have commented out this code and the markup is the standard now. ' ` add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', // 'gallery', 'caption', ) );` ' – Herzlin Jun 30 '16 at 18:48
  • I don't see how the html5 support for galleries can change the /> output from wp_get_attachment_image(). Are there any filters I'm missing? @mahadev – birgire Jul 1 '16 at 8:57
  • Dear @birgire HTML5 doesn't require /> ending for img tags. This theme (underscores) modifies WP to make it HTML5 compliant.I have commented out this lines and now the standard markup for the galleries is running and no issues, I can run lazy load XT without problem. thanks w3schools.com/tags/tag_img.asp – Herzlin Jul 1 '16 at 14:50
  • thanks for commenting, what I meant was that after skimming through the core code I can only see that the image tags are always closed, regardless of html5 gallery support in the theme. So I'm just curious how did you get unclosed image tags, in the native gallery, in the first place ;-) ps: I tried to test it on the TwentySixteen but I only get closed image tags - maybe I'm missing something obvious ;-) @mahadev – birgire Jul 1 '16 at 15:03
  • did you checked underscores theme? underscores.me let me know your findings, I might be wrong, will double check today. – Herzlin Jul 4 '16 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.