Meteor Slides
[resolved] Alt text and titles for accessible meteor slides (4 posts)

  1. HaveANiceDay
    Posted 2 years ago #

    There is probably a simple way to do this, but I haven't found it yet. So I'm posting because I'm sure somebody somewhere has already found the answer.

    Our requirement is easy to explain ...

    1. The slide image 'alt' attribute must always contain the alt text set in the WordPress 'Edit media' interface.
    2. If there is no alt text, the 'alt' attribute must contain an empty string. It must never contain the image title.
    3. The slide image 'title' attribute must never be used at all.

    I know we can use a plug-in to remove 'title' attributes, but surely it is better not to insert them in the first place.

    Ensuring the empty string for an unused 'alt' attribute has got me stumped.

    Can anyone help?

    TIA :-)


  2. Josh Leuze
    Plugin Author

    Posted 2 years ago #

    Hi, because the the_post_thumbnail() function outputs the complete markup for the featured image, you can only tweak it so much. If you want something really custom, you have to get just the URL for the featured image and write your own featured image mark up.

    You can do this using a custom slideshow template. Just take this code, which appears twice, once with an anchor and once without:

    <?php the_post_thumbnail( 'featured-slide', array( 'title' => get_the_title() ) ); ?>

    And replace both of them with this custom version that makes an image with the featured image url and always has alt text, whether it is empty or not:

    <?php // Get the featured image URL
    $meteor_featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-slide' , false );
    // Get the featured image alt text
    $meteor_featured_image_alt   = get_post_meta( get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true );
    // Check for a featured image
    if ( !empty( $meteor_featured_image ) ) {
    	// Output a custom featured image with no title and a consistent alt text option
    	echo '<img src="' . $meteor_featured_image[0] . '" alt="' . $meteor_featured_image_alt . '" />';
    } ?>
  3. HaveANiceDay
    Posted 2 years ago #

    Thanks JL - posting just to confirm that your solution works for us.

  4. Josh Leuze
    Plugin Author

    Posted 2 years ago #

    No problem, glad to hear that it worked for you.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic