Woocommerce Gallery Image Caption: Use "caption" — not "alt tag". Keep <img> a

admin管理员组

文章数量:1122826

The website wasn't showing text ("captions") for the product images (the primary image and the gallery images). That was resolved by copying the woocommerce ../product-image.php file to the child theme directory and modifying it.

CSS was added to the file, and now the media "alt" fields show below the images on the product page. This CSS was added to the $html var if there were a thumbnail id. (The CSS will move to another place so that it's doesn't show up several times on the product page.).

$html = '
<style>
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    position: relative;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:after {
    content: attr(data-thumb-alt);
    position: relative;
    bottom: -2px;
    left:10px;
    padding: 5px 10px;
    background-color: none;
    color:#000;
}
</style>
';

The text below the image are from the data-thumb-alt="" in the <div> and <img> tags . (For some unknown reason, that repeats in the <div> and <img> tags and I don't know which one is used for the text.). The text assigned to that is from the media library Alternative text. The CSS, above, does that when the "data-thumb-alt" is assigned.

NEEDED (1) The image media Caption field text is needed to show up below the image, not the Alternative text field. (2) Keep the image Alternative text in the <img alt="">.

Why do we need the <img alt=""> tag different than the text below the image?

1. The longer alt field should stay in <img alt=""> for ADA (Americans with Disability Act) compliance because it's more descriptive.

2. The image "caption" has shorter descriptors such as the color, "Shown in black", "Shown in red", etc. That is short and to the point.

3. If the <img alt=""> tag is the same as the text below the image, then ADA people would see the text twice if they turn off images, one from the <img alt=""> and one from the text below the image. NOTE: Users with cognitive impairments may prefer to disable images from loading. They see the <img alt=""> text and can decide whether to load that particular image.

4. Not all products need text below the image, only those with the image Caption tag. If there is no Caption tag, then there would be no text below the image.

This was tested.

content: attr(data-thumb-alt); was changed to content: attr(data-caption); And, add this...

$caption = get_post_field('post_excerpt', $post_thumbnail_id);
$caption = str_replace('"', "''", $caption);
$caption_repl = 'data-caption="' . $caption . '"';

$html_next = wc_get_gallery_image_html( $post_thumbnail_id, true );
$html_next = preg_replace('/data-thumb-alt="[^"]+"/', $caption_repl, $html_next);
$html .= $html_next;

Primary Image: The above worked for only the primary product image, not the thumbnails. The Caption was below the primary image. The <img alt=""> was okay with the Alternative text.

Gallery image had the code, below. The data-thumb-alt needed to be changed to data-caption with the Caption as the value, but wasn't. If I can get that, then this will work. The <img> tag had the data-option with the correct Caption tag.

<div data-thumb="/wp-content/uploads/2024/08/image-2-100x100.jpg" data-thumb-alt="This is the alt, not the caption." class="woocommerce-product-gallery__image"> 

QUESTION: How can I edit that <div> for the gallery to have the data-option with the Option as the value?

NOTE 1: The image Caption field (from media library) needed to show below the image is the one in the table wp_posts > post_excerpt, not a post meta.

NOTE 2: The image Alternative text is a post meta.

NOTE 3: wp_get_attachment_metadata($thumbnail_id) returns ['image_meta']['caption'] which has been blank, thus I assume it's not the Caption and I have no idea where that value is gotten.

Thank you!

The website wasn't showing text ("captions") for the product images (the primary image and the gallery images). That was resolved by copying the woocommerce ../product-image.php file to the child theme directory and modifying it.

CSS was added to the file, and now the media "alt" fields show below the images on the product page. This CSS was added to the $html var if there were a thumbnail id. (The CSS will move to another place so that it's doesn't show up several times on the product page.).

$html = '
<style>
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    position: relative;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:after {
    content: attr(data-thumb-alt);
    position: relative;
    bottom: -2px;
    left:10px;
    padding: 5px 10px;
    background-color: none;
    color:#000;
}
</style>
';

The text below the image are from the data-thumb-alt="" in the <div> and <img> tags . (For some unknown reason, that repeats in the <div> and <img> tags and I don't know which one is used for the text.). The text assigned to that is from the media library Alternative text. The CSS, above, does that when the "data-thumb-alt" is assigned.

NEEDED (1) The image media Caption field text is needed to show up below the image, not the Alternative text field. (2) Keep the image Alternative text in the <img alt="">.

Why do we need the <img alt=""> tag different than the text below the image?

1. The longer alt field should stay in <img alt=""> for ADA (Americans with Disability Act) compliance because it's more descriptive.

2. The image "caption" has shorter descriptors such as the color, "Shown in black", "Shown in red", etc. That is short and to the point.

3. If the <img alt=""> tag is the same as the text below the image, then ADA people would see the text twice if they turn off images, one from the <img alt=""> and one from the text below the image. NOTE: Users with cognitive impairments may prefer to disable images from loading. They see the <img alt=""> text and can decide whether to load that particular image.

4. Not all products need text below the image, only those with the image Caption tag. If there is no Caption tag, then there would be no text below the image.

This was tested.

content: attr(data-thumb-alt); was changed to content: attr(data-caption); And, add this...

$caption = get_post_field('post_excerpt', $post_thumbnail_id);
$caption = str_replace('"', "''", $caption);
$caption_repl = 'data-caption="' . $caption . '"';

$html_next = wc_get_gallery_image_html( $post_thumbnail_id, true );
$html_next = preg_replace('/data-thumb-alt="[^"]+"/', $caption_repl, $html_next);
$html .= $html_next;

Primary Image: The above worked for only the primary product image, not the thumbnails. The Caption was below the primary image. The <img alt=""> was okay with the Alternative text.

Gallery image had the code, below. The data-thumb-alt needed to be changed to data-caption with the Caption as the value, but wasn't. If I can get that, then this will work. The <img> tag had the data-option with the correct Caption tag.

<div data-thumb="/wp-content/uploads/2024/08/image-2-100x100.jpg" data-thumb-alt="This is the alt, not the caption." class="woocommerce-product-gallery__image"> 

QUESTION: How can I edit that <div> for the gallery to have the data-option with the Option as the value?

NOTE 1: The image Caption field (from media library) needed to show below the image is the one in the table wp_posts > post_excerpt, not a post meta.

NOTE 2: The image Alternative text is a post meta.

NOTE 3: wp_get_attachment_metadata($thumbnail_id) returns ['image_meta']['caption'] which has been blank, thus I assume it's not the Caption and I have no idea where that value is gotten.

Thank you!

• woocommerce-offtopic
• images
• captions

Share Improve this question edited Aug 17, 2024 at 20:59 Catsy asked Aug 17, 2024 at 20:52 CatsyCatsy 1133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Phew!

Here is the code for functions.php.

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'change_alt_to_caption_gallery_images', 10, 2 );

function change_alt_to_caption_gallery_images ( $wc_get_gallery_image_html, $image_id ){

    $caption = get_post_field( 'post_excerpt', $image_id ); 

    if ( !empty($caption) && !empty($wc_get_gallery_image_html) ) {

        $caption = str_replace( '"', "''", $caption );
        $caption_repl = 'data-caption="' . $caption . '"';
        $wc_get_gallery_image_html = preg_replace( '/data-thumb-alt="[^"]+"/', $caption_repl, $wc_get_gallery_image_html );

    }
    return $wc_get_gallery_image_html;
}

本文标签： Woocommerce Gallery Image Caption Use quotcaptionquotnot quotalt tagquot Keep ltimggt alt tag as is