Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Torbjörn Sjögren
PLUS
Torbjörn Sjögren
Courses Plus Student 1,621 Points

Code tip: Repeater field for displaying project images.

Hi Watching 'How to Build a WordPress Theme' course , video: 'http://teamtreehouse.com/library/websites/how-to-build-a-wordpress-theme/converting-static-code-into-wordpress-templates/convert-custom-post-type-details-template

Just wanted to share an alternate way to display project images with the 'repeater field' add-on: http://www.advancedcustomfields.com/add-ons/repeater-field/

I think its a better admin experience for the user and easier to style/code. The drawback is that its a payed add-on.

Here is a code snippet for single-work.php that loops through all added images and displays them using 'wp_get_attachment_image':

<div class="project-images">
<?php if ( get_field( 'work_project_images' ) ): ?>
   <?php while ( has_sub_field( 'work_project_images' ) ): ?>
   <?php
      $image_id = get_sub_field( "work_project_image" ); 
      echo wp_get_attachment_image( $image_id, large); //The image without link
    //echo wp_get_attachment_link( $image_id, large); //The image whith link
   ?>
 <?php endwhile; ?>
 <?php endif; ?>
</div>

Sorry for the code styling. Just couldn't format it right in this forum post. [Edit] Fixed now (with code fences)

Torbjörn Sjögren
Torbjörn Sjögren
Courses Plus Student 1,621 Points

Just a note. This code requires the 'return value' in image field set to 'Image ID'.

1 Answer

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Great suggestion!!! Thanks for sharing :)

What are your thoughts about beginning to suggest that people use Gists to share PHP code instead of directly on the forums? It is a little tricky to do the 4 character indent for each line of code.

James Barnett
James Barnett
39,199 Points

Also instead of using 4 spaces I always use code fences, which I wrote a post about once

https://teamtreehouse.com/forum/how-to-type-code-in-the-forum

Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Hot dang, I like them code fences right there. That's my solution.

As for a third party embedable type thing, I'm thinking Gist out of these options. Would also git more students on Github too, which is good.

James Barnett
James Barnett
39,199 Points

I love code fences because there's syntax highlighting support for them which makes them easier to read.

Torbjörn Sjögren
Torbjörn Sjögren
Courses Plus Student 1,621 Points

OK code fixed using code fences. James Barnet I think that your guide should be sticky in this forum and i think that those options should show when clicking 'Markdown Cheatsheet' or via link. This is a "Code heavy" forum and it should be clear/easy to enter code. Its OK with external services but i rather not use i Gist for code that i know is wrong (as in most questions here). OK for students to adopt GitHub though (just starting out myself). OK with third party solution but its best to have all content in this forum.

So... Please give the forum users more info on how to enter code. Clear instructions via link below text area would be best. Thanks ;-)