Question 2654 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to get alt of each gallery attachment to use it for another data attribute? – WordPress

I searched here a lot, but the decisions are for post attachments.
I have gallery on each product page.
I want to make custom data attribute for each thumbnail, that has to be equal to alt or caption value.
There’s the code, a standard attachments loop, and the script what I want to do

    <div class="gallery_thumbs show-all-thumbs">
        <?php       
            $attachment_ids = $product->get_gallery_attachment_ids();
           if ( ! empty( $attachment_ids ) ) { ?>        
         <?php         
            foreach( $attachment_ids as $attachment_id ) {
//There I try to get alt of each image
                  $image_alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true);?>
            <div class="woocommerce-product-gallery__item">
               <a href="<?php echo wp_get_attachment_image_url( $attachment_id, 'full' ); ?>">
                <?php 
                  echo wp_get_attachment_image( $attachment_id, 'full' );?>            
                   </a>  
                  <div class="caption">                   
                    <?php             
                     echo $image_alt;                    
                      ?>
                 </div>
              </div> 
         <script>   
        var caption = <?php echo $image_alt;?>  
     
        jQuery( "img" ).each(function() {
          jQuery(this).attr('data-name', caption);
        });  
             
        </script>
            <?php 
            }
       }  
        ?>
        
    </div>

Instead of var value I see data-name="[object Object]". Like it’s empty.
How to get this attribute correctly, to use its value in my custom data-name attribute?

Tags:

2

Answers


  1. 0

    "[object Object]" doesn’t mean it’s empty. It means it’s an object, try to console.log it.
    Either way, I think this line should be:

    var caption = <?php echo json_encode($image_alt); ?>;
    Login or Signup to reply.
  2. 0

    It can be done using the hook. here is an example code, modify it as per your need/use.

    add_filter(
    'woocommerce_gallery_image_html_attachment_image_params',
    function( $params, $attachment_id ) {
        // Get the alt text from attachment ID.
        $alt_text = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );

        // Get the attachment caption.
        $caption = _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true );

        // Get the attachment title.
        $title = _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true );

        // Add custom data attributes in parameters.
        $params['data-custom-attr-1'] = $alt_text;
        $params['data-custom-attr-2'] = $caption;
        $params['data-custom-attr-1'] = $title;

        return $params;
    },
    10,
    2
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search