Correct attachment size

Question

I am trying using Really Simple slideshow with Wordpress and I am having issue while trying to retrive the correct image size for the slideshow.

I am able to retrieve the first image without problem using the following code:

<?php if ( $attachments ) {
    $first_image = array_slice($attachments, 0, 1);
    $first_thumb = wp_get_attachment_url( $first_image[0]->ID, 'blog-thumb', false );
    ?>
    <img src="<?= $first_thumb; ?>" alt="" title="" />

However, I am using the following code to retrieve the rest of the images:

<?php foreach ($attachments as $attachment) { ?>
    <li><a href="<?= wp_get_attachment_url( $attachment->ID, 'blog-thumb', false ); ?>"></a></li>
<?php } ?>

and I am able to retrieve the images, but the original version of the images, not the "blog-thumb" dimensions.

I am not sure what I'm doing wrong here...

Here's how I am retrieving attachments:

        <?php if ( $post->post_type == 'post' && $post->post_status == 'publish' ) {
                $attachments = get_posts( array(
                    'post_type' => 'attachment',
                    'posts_per_page' => -1,
                    'post_parent' => $post->ID,
                    'exclude'     => get_post_thumbnail_id(),
                    'orderby'           => 'menu_order',
                    'order'           => 'ASC'  

                ) );
        ?>

I am also adding the whole code, so you guys can check the whole picture of what's going on:

        <?php if ( $post->post_type == 'post' && $post->post_status == 'publish' ) {
                $attachments = get_posts( array(
                    'post_type' => 'attachment',
                    'posts_per_page' => -1,
                    'post_parent' => $post->ID,
                    'exclude'     => get_post_thumbnail_id(),
                    'orderby'           => 'menu_order',
                    'order'           => 'ASC'  

                ) );
        ?>

          <?php if ( $attachments ) { 
            $first_image = array_slice($attachments, 0, 1);
            $first_thumb = wp_get_attachment_image_src( $first_image[0]->ID, 'blog-thumb', false );

          ?>    

        <div id="post-<?php the_ID(); ?>" <?php post_class() ?>>                

        <div class="rss-container">

            <div id="slideshow<?php the_ID(); ?>" class="rs-slideshow">
                <div class="slide-container">
                    <img src="<?php echo '' . $first_thumb[0] . ''; ?>" alt="" title="" />
                </div> 
                <ol class="slides">
                <?php foreach ($attachments as $attachment) { ?>
                  <li><a href="<?= wp_get_attachment_image( $attachment->ID, 'blog-thumb'); ?>"></a></li>

                <?php } ?>
                </ol>
            </div>

            <!--<ul class="controls clearfix">
                <li><a href="#" class="rs-play-pause" data-control-for="slideshow<?php the_ID(); ?>">Click to Pause</a></li>
                <li><a href="#" class="rs-prev" data-control-for="slideshow<?php the_ID(); ?>">Previous Slide</a></li>
                <li><a href="#" class="rs-next" data-control-for="slideshow<?php the_ID(); ?>">Next Slide</a></li>
            </ul>-->

                        <?php } ?>
        <?php } ?>  

        </div> <!--rss-container-->

As mentioned, I am having difficulties while trying to retrieve the correct image size inside the list, the code to retrieve the first image works like a charm.

Thanks for your help!

Answer 1

You need to echo your wp_get_attachment_image, BUT since this function returns a HTML object in the form of,

<img src="path/to/image.jpg"/>

It's not going to work because you are are trying to return this function withing the href attribute of an anchor <a>

This is wrong,

<a href="<?= wp_get_attachment_image( $attachment->ID, 'blog-thumb'); ?>"></a>

This is right,

<a href="<?php echo wp_get_attachment_image_src( $attachment[0]->ID, 'blog-thumb'); ?>"> 
<?php echo wp_get_attachment_image( $attachment->ID, 'blog-thumb'); ?>
</a>

So all in all something like this which is a little neater despite that we are still mixing two image functions that could be condensed down into just using wp_get_attachment_image_src however the following will still work,

foreach ($attachments as $attachment) {

    $src = wp_get_attachment_image_src( $attachment[0]->ID );

    $html = '<a href="'.$src.'">';
    $html .= wp_get_attachment_image( $attachment->ID, 'blog-thumb') .'</a>';
    echo $html;
}