How to get WordPress image_size url

0 Views

I’m using Woocommerce for a 1800+ product e-shop. Woocommerce comes with a built-in PrettyPhoto lightbox plugin. By default it loads the original WordPress image size when you click to zoom the image in the lightbox.

Woocommerce calls for this original image in the template ‘product-image.php’. I can modify that one. The variable $image_link calls the original size. I would like to call a custom size that I already made. I just don’t know how to call it, I’ve looked for over a day in docs, forums and sites but can’t find it.

Read More

I need to modify $image_link so that it calls my custom image size (that I added via add_image_size). But how? I know this is WordPress basics but I’m unable to get it done…

Example of my site (click to zoom, it shows a reduced image of 1600px wide image, but I want a smaller one): http://www.affichesmarci.com/shop/the-railys-cycling-act/ 

<?php
    if ( has_post_thumbnail() ) {

        $image              = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );

        $image_title        = esc_attr( get_the_title( get_post_thumbnail_id() ) );
        $image_link         = wp_get_attachment_url( get_post_thumbnail_id() );

        $attachment_count   = count( $product->get_gallery_attachment_ids() );

        if ( $attachment_count > 0 ) {
            $gallery = '[product-gallery]';
        } else {
            $gallery = '';
        }

        echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="bigbox woocommerce-main-image zoom" title="%s" rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_title, $image ), $post->ID );

    } else {

        echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" class="bigbox" />', woocommerce_placeholder_img_src() ), $post->ID );

    }
?>

<?php do_action( 'woocommerce_product_thumbnails' ); ?>
Post Views: 0

Related posts

Leave a Reply

4 comments

  1. I found the solution myself.

    Original variable that calls the full size image.

    $image_link = wp_get_attachment_url( get_post_thumbnail_id() );

    New variable that calls a custom size ‘zoom’.

    $image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'zoom' );

  2. If you already set “add_image_size” in functions, I think you could easily edit

    $image              = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );

    to

    $image              = get_the_post_thumbnail( $post->ID, apply_filters( 'your_thumbnail_name', 'shop_single' ) );

    you could also use WP’s default sizes which is “thumbnail”, “medium”, “large” and “full”

  3. ok, adding large size instead of full

    $image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');

    Now change $image_link to $image_link[0]

    echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s"  rel="prettyPhoto' . $gallery . '">%s</a>', $image_link[0], $image_title, $image ), $post->ID );

    Thanks for ideas 🙂

  4. for get src url use this code:

    $image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail');

    and for use to tag image by alt and size:

    echo '<a href="' . get_permalink() . '" class="thumb"><span class="face">
<img src="' . $image_link[0]. '" width="'.$image_link[1].'"
height="'.$image_link[2].'"  loading="lazy" alt="'.get_the_title().'" /></span></a>';