How can I get only the image src in a wordpress loop

2 Views

I’m making a responsive WordPress folio site (www.jasongilmour.co.uk) and I know very little about WP theme development so got really stuck at some of the PHP. I’m looking to make my site truly responsive by loading different images for different devices but can’t get the right code…

What I have now is getting the full size images from a post for a maximage2 slideshow.

Read More
<div id="maximage">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post();    

            $args = array(
                'post_type' => 'attachment',
                'numberposts' => -1,
                'post_status' => null,
                'post_parent' => $post->ID
            );

            $attachments = get_posts( $args );
                if ( $attachments ) {
                foreach ( $attachments as $attachment ) {
                echo wp_get_attachment_image( $attachment->ID, 'full' );
                }
            }

        endwhile; endif; ?>
    </div>

I tried to embed it in a <picture> tag and echo out only the src but when I use wp_get_attachment_image_src it returns the HTML “ArrayArrayArrayArray“. I also tried putting echo wp_get_attachment_image( $attachment->ID, 'full', 'src' but that didn’t change the returned HTML.

I don’t really understand the WP documentation enough to make it work in a… loop or array I think this is called? So that wasn’t much good to me.

This is a pretty important part of my site since I’m using massive images to keep to my design idea and it makes the site very slow before it’s cached.

PS

Although I’ve learned a lot over the past couple of weeks making this, I still don’t really understand what I’m doing with PHP… I’m just a graphic design student.

I might also make the theme open source so if anyone is interested in getting a copy let me know.

I also need to sort an issue with mouse hover menus on tablet devices before I’m happy with it but I don’t understand what I’m doing there either.

Thanks in advance!

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. but when I use wp_get_attachment_image_src it returns the HTML

    That’s beacause that function returns an array according to the source, containing image URL, width and height.

    So:

    list($url, $width, $height) = wp_get_attachment_image_src($attachment->ID, 'full');
printf('<img src="%s" width="%d" heigt="%d"', $url, $width, $height);

// or vprintf and directly pass the function call...

  2. Well it’s not as clean as I hoped but it certainly works, the site is a million times faster now. The Javascript simply comments out the unwanted HTML at certain screen sizes so I can get all the image sizes I need meaning the PHP wasn’t changed.

    <script>
document.write("<!--");
if (screen.width <= '400') {document.write(" good -->");}
</script>
<div id="maximage">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post();    

        $args = array(
            'post_type' => 'attachment',
            'numberposts' => -1,
            'post_status' => null,
            'post_parent' => $post->ID
        );

        $attachments = get_posts( $args );
            if ( $attachments ) {
            foreach ( $attachments as $attachment ) {
            echo wp_get_attachment_image( $attachment->ID, 'full' );
            }
        }

    endwhile; endif; ?>
</div>
<script>
 if (screen.width <= '400') {document.write("<!-- good ");}
</script>
-->

<script>
document.write("<!--");
if ((screen.width >= '401') && (screen.width <= '800')) {document.write(" good -->");}
</script>
<div id="maximage">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post();    

        $args = array(
            'post_type' => 'attachment',
            'numberposts' => -1,
            'post_status' => null,
            'post_parent' => $post->ID
        );

        $attachments = get_posts( $args );
            if ( $attachments ) {
            foreach ( $attachments as $attachment ) {
            echo wp_get_attachment_image( $attachment->ID, 'full' );
            }
        }

    endwhile; endif; ?>
</div>
<script>
 if ((screen.width >= '401') && (screen.width <= '800')) {document.write("<!-- good ");}
</script>
-->

<script>
document.write("<!--");
if ((screen.width >= '801') && (screen.width <= '1280')) {document.write(" good -->");}
</script>
<div id="maximage">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post();    

        $args = array(
            'post_type' => 'attachment',
            'numberposts' => -1,
            'post_status' => null,
            'post_parent' => $post->ID
        );

        $attachments = get_posts( $args );
            if ( $attachments ) {
            foreach ( $attachments as $attachment ) {
            echo wp_get_attachment_image( $attachment->ID, 'large' );
            }
        }

        endwhile; endif; ?>
</div>
<script>
 if ((screen.width >= '801') && (screen.width <= '1280')) {document.write("<!-- good ");}
</script>
-->

<script>
document.write("<!--");
if (screen.width >= '1281'){document.write(" good -->");}
</script>
<div id="maximage">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post();    

        $args = array(
            'post_type' => 'attachment',
            'numberposts' => -1,
            'post_status' => null,
            'post_parent' => $post->ID
        );

        $attachments = get_posts( $args );
            if ( $attachments ) {
            foreach ( $attachments as $attachment ) {
            echo wp_get_attachment_image( $attachment->ID, 'full' );
            }
        }

        endwhile; endif; ?>
</div>
<script>
 if (screen.width >= '1281') {document.write("<!-- good ");}
</script>
-->