retrieve a custom field image with a specific size in wordpress

Question

I am using Custom MetaBoxes 2 to create an images uploader field.

Here is the code for the metabox:

$meta_boxes['home_page_slider'] = array(
        'id'           => 'home_page_slider',
        'title'        => __( 'Home Page Slider', 'cmb2' ),
        'object_types' => array( 'page', ), // Post type
        'context'      => 'normal',
        'priority'     => 'high',
        'show_names'   => true, // Show field names on the left
        'show_on'      => array( 'id' => array( 5, ) ), // Specific post IDs to display this metabox
        'fields'       => array(
            array(
                'name'         => __( 'Slider Images', 'cmb2' ),
                'desc'         => __( 'Upload or add multiple images/attachments.', 'cmb2' ),
                'id'           => $prefix . 'slider-images',
                'type'         => 'file_list',
                'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
            ),
        )
    );

How can I retrieve the images uploaded to this field, but with a specific size (for example "Full") , and display those images on the front-end on the following HTML markup?

<ul class="slides">
  <li>
    <img src="images/awn1.jpg" />
  </li>
  <li>
    <img src="images/awn2.jpg" />
  </li>
  <li>
    <img src="images/awn3.jpg" />
  </li>
</ul>

Answer 1

This code will do the trick:

<ul class="slides">
<?php

    $images = get_post_meta( 5, 'slider-images', true);

            if ( $images ) {
              foreach ( $images as $attachment_id => $img_full_url ) {

               $full = wp_get_attachment_link($attachment_id, 'full');

                echo "<li>";
                echo $full;
                echo "</li>";

              }
            }
?>
</ul>

• change the prefix with the same one of your repeatable group prefix;
• '5' is the id of your post, or just leave it like 'get_the_ID();' to get the id automatic;
• 'full' is the image size name, maybe at your side it is different as you can use the default wp thumbnail size which is 'thumbnail' or others sizes like 'full, medium, large'.

Enjoy it and please rate my answer if you find it helpful.

Thank you. Best, EF.

Answer 2

Check the docs at https://github.com/WebDevStudios/Custom-Metaboxes-and-Fields-for-WordPress/wiki/Field-Types#file , there is an example showing exactly what you want.

array(
    'name' => 'Test File',
    'desc' => 'Upload an image or enter an URL.',
    'id' => $prefix . 'test_image',
    'type' => 'file',
    'allow' => array( 'url', 'attachment' ) // limit to just attachments with array( 'attachment' )
),

$image = wp_get_attachment_image( get_post_meta( get_the_ID(), 'test_image_id', 1 ), 'medium' );

where get_the_ID is the ID of the post you upload your images to