The best way to display Pod based images in your template file

I am relatively new to the WordPress CMS and decided to use Pods for my custom field implementations including several image fields. While I love the admin UI I was a bit flustered trying output the images in my post template file.

After a lot of research and experimenting I wanted to share the technique I used. Obviously if there is a better way I’d love to know.

Related posts

Leave a Reply

1 comment

  1. The first thing I learned from the Pods forum was that Pods saves images to the database as ‘Attachment’ posts. So, they can be accessed as you would access any regular old WordPress attachment.

    Attachments have a parent-child relationship with their post which means you can programmatically grab all the attachments for a given post using this snippet adapted from WP beginners:

    <?php 
     if ( $post->post_type == 'post-type' && $post->post_status == 'publish' ) {
        $attachments = get_posts( array(
            'post_type' => 'attachment',
            'posts_per_page' => -1,
            'post_parent' => $post->ID,
            'exclude'     => get_post_thumbnail_id()
        ) );
    
        if ( $attachments ) {
            foreach ( $attachments as $attachment ) {
                $class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
                $thumbimg = wp_get_attachment_image( $attachment->ID, 'thumbnail');
                echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
            }
    
        }
    }
    ?>
    

    But this solution is sub-optimal because the parent-child relationship between the post and the image can only be broken if the image is deleted from the media library. So:

    1. An image removed from it’s original post but left in the library for future use will still be output by the above code on the original post
    2. If you do re-purpose the image on a different post’s Pod field the code above won’t print it on the new entry.
    3. The attachment system does not record field level relationships. So, if you have more than one image based Pod field on a Post the code above will print them all regardless if their field.

    That said, I have found the best option for outputting Pod based image data by field is to combine the ‘get_post_meta’ function outlined here on the WordPress support forums with the ‘wp_get_attachment_image’ function as shown below.

    <?php 
    if ( get_post_meta( get_the_ID(), 'image_field', false ) ){
        $image_array = get_post_meta( get_the_ID(), 'image_field', false );
    }
    if ( $image_array ) {
        echo '<ul>';
        foreach ( $image_array as $image ) {
            $class = "post-attachment mime-" . sanitize_title( $image->post_mime_type );
            $thumbimg = wp_get_attachment_image( $image['ID'], 'thumbnail');
            echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
        }
        echo '</ul>';
    }
    ?>
    

    The former function gives you an object with only the current images. The latter renders those images with size and alt info limited to the attachments system.