How to call thumbnail from image usign Types plugin in Wordpress

Question

I am using Types plugin in Wordpress to create custom post type. I have added custom filed "Image field" which is repeating field and in this way I want to create something like gallery in my post type

here is how I call the images in the front end

       $images = get_post_meta(get_the_ID(), 'wpcf-application-image');          
       foreach ($images as $image) {

        echo '<a rel="attachment" href="' . $image . '"><img src="' . $image . '" /></a>'; 

        } 

With that code I see the list with all images and link to the media file. But how can I add a thumbnail instead of the exact image in the img tag? Thank you!

Answer 1

If you only have the image url (not the id) then you can use a function like this to return the url (add it to functions.php etc):

/**
 * Return an ID of an attachment by searching the database with the file URL.
 *
 * First checks to see if the $url is pointing to a file that exists in
 * the wp-content directory. If so, then we search the database for a
 * partial match consisting of the remaining path AFTER the wp-content
 * directory. Finally, if a match is found the attachment ID will be
 * returned.
 *
 * @param string $url The URL of the image (ex: http://example.com/wp-content/uploads/2013/05/test-image.jpg)
 *
 * @return int|null $attachment Returns an attachment ID, or null if no attachment is found
 */
function get_attachment_id_by_url( $url ) {
  // Split the $url into two parts with the wp-content directory as the separator
  $parsed_url  = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );
  // Get the host of the current site and the host of the $url, ignoring www
  $this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) );
  $file_host = str_ireplace( 'www.', '', parse_url( $url, PHP_URL_HOST ) );
  // Return nothing if there aren't any $url parts or if the current host and $url host do not match
  if ( ! isset( $parsed_url[1] ) || empty( $parsed_url[1] ) || ( $this_host != $file_host ) ) {
    return;
  }
  // Now we're going to quickly search the DB for any attachment GUID with a partial path match
  // Example: /uploads/2013/05/test-image.jpg
  global $wpdb;
  $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM {$wpdb->prefix}posts WHERE guid RLIKE %s;", $parsed_url[1] ) );
  // Returns null if no attachment is found
  if(isset($attachment[0])) {
    return $attachment[0];
  } else {
    return null;
  }
}

Then you can use that ID to display the thumbnail:

$images = get_post_meta(get_the_ID(), 'wpcf-application-image');          
foreach ($images as $image) {
  $image_id = get_attachment_id_by_url($image);
  echo '<a rel="attachment" href="' . $image . '"><img src="' . wp_get_attachment_image_src($image_id,'thumbnail') . '" /></a>'; 
}

Answer 2

Hi Simon and thank you for your help! I added the code you posted but the images doesn't show up and I had

 <img src="Array"> 

but you showed the the right way I and modified my code and now its work! here is what I have:

function get_attachment_id_from_src ($image_src) {
            global $wpdb;
            $query = "SELECT ID FROM {$wpdb->posts} WHERE guid='$image_src'";
            $id = $wpdb->get_var($query);
            return $id;
        }

        $images = get_post_meta(get_the_ID(), 'wpcf-application-image');          
        foreach ($images as $image) {
          $image_src = get_attachment_id_from_src($image);                
          $image_thumb = wp_get_attachment_image ($image_src, 'medium');

          echo '<a rel="attachment" href="' . $image . '">'. $image_thumb .'</a>'; 
        }

Thanks again!