Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Umy Ikem
Umy Ikem
21,383 Points
Posted by Umy Ikem
Umy Ikem
21,383 Points

Image Swap Gallery

Hi, I'm using the Custom Post UI and Advanced Custom Fields plugin, One of my custom fields is a WYSIWYG field for uploading images (attached to a 'Project' custom post type).I would then like to get the images I uploaded to this WYSIWYG field one by one. Using echo get_field ('name of field') doesnt work because it returns all the images at once.l tried using

<?php 
    $args = array(
       'post_type' => 'attachment',
       'post_per_page' => '-1',
       'post_mime_type' => 'image',
       'post_parent' => $post-> ID
);
?>
<ul>
      <?php $attachments = get_posts($args);

if ( $attachments ) {
     foreach ($attachments as $attachment) { ?>
       <li><img src="<?php echo wp_get_attachment_thumb_url ( $attachment->ID ); ?>"</li>

<?php  }
} ?>
</ul>

This also doesnt work as it returns all images attached to the post even those not in the WYSIWYG field i'm trying to target although in thumbnail sizes.

Note, I have other images attached to this same post but i just want images from a specific WYSIWYG field in the post. I'm actually trying to create an image swap gallery with the thumbnails as navigation so I created a wysiwyg field where the user can upload thumbnail images.I'm trying to use the ultimate image swap gallery used here http://bit.ly/10eyycX Sorry for the long post.Looking forward to any help I can get, I've been on this for weeks...

Umy Ikem
Umy Ikem
21,383 Points
Umy Ikem
Umy Ikem
21,383 Points

It seems like the code i wrote is not showing completely,it shows when i try to edit the post.Not sure if this is peculiar to my browser or something

Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

You can get the code to show up correctly by using code fences like this:

```
function test() {
  console.log("notice the blank line before this function?");
}
```

4 Answers

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

With core WordPress, you can only upload things in one place -- so it doesn't track where things get uploaded. I doubt that Advanced Custom Fields stores this extra piece of data. (If it does, it would be a custom field on the image.)

Instead of WYSIWYG, have you tried using the Repeater field in Advanced Custom Fields? This will let you upload multiple images to one field, and the data is stored in a way that makes it easier to retrieve for your purposes. Will that work?

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

I think you want to use get_field ('name of field'), but without echoing it. Can you try doing something like this ...

var_dump(get_field ('name of field'));

... and pasting the output here?

Umy Ikem
Umy Ikem
21,383 Points
Umy Ikem
Umy Ikem
21,383 Points

Thanks for your reply Randy especially on the code fences, when i use var_dump(get_field('name of field')); It outputs - string(564) which is all the image urls at once - i would like to get the image urls in this field one after the other instead of all at once. How can i do this please?

<p><img class="alignnone size-full wp-image-87" alt="small_alakija_4" src="http://localhost/faultless_wordpress/wp-content/uploads/2014/02/small_alakija_4.jpg" width="150" height="113" /> 
<img class="alignnone size-full wp-image-86" alt="small_alakija_3" src="http://localhost/faultless_wordpress/wp-content/uploads/2014/02/small_alakija_3.jpg" width="150" height="113" />
<img class="alignnone size-full wp-image-85" alt="small_alakija_2" src="http://localhost/faultless_wordpress/wp-content/uploads/2014/02/small_alakija_2.jpg" width="150" height="113" /></p>
Umy Ikem
Umy Ikem
21,383 Points
Umy Ikem
Umy Ikem
21,383 Points

Thanks Randy, I was looking for a free option as I'm just playing around with a custom theme i made.Guess I'll have to go ahead and make the purchase for the Repeater field.Thanks again for your help.I love u guys at Treehouse, always helpful

Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

Ah. The repeater field should be what you need, but you could probably make that WYSIWYG work. You'd have to load the contents from get_field() into a variable, and then write some string manipulation code to extract all the URLs out of it. It wouldn't be very pretty. :-)