[Resolved] How to display thumbnails of of PDFs uploaded to the Types document field

[Author]

Posts

[Price]

I am trying to: display thumbnails of PDFs uploaded to a WP-Types document field using Views or Content Templates

I visited this URL: hidden link

I expected/wanted to see: "true" (small size) thumbnails of PDFs that had been loaded into the document field.

Instead, I got: full-size thumbnails (which are resized via CSS)

So as you know, WordPress now generates an image for each PDF loaded into its Media library (before it didn't: https://toolset.com/forums/topic/display-thumbnail-of-an-uploaded-pdf-file/). As you also know, WordPress generates multiple sizes for each image created in its system.

I can see from looking at the post_meta table that WordPress does indeed automatically create a "small" size thumbnail for the PDF images that are uploaded to the WP-Types document field.

My question is how do I display this image via Views or a content type?

Thank you!

[Noman]

Hi Rowan,

Thank you for contacting Toolset support. I have not tried this personally. Can you please send me backend screenshot of your View or Content Template where you have inserted this PDF & Thumbnail? The one which is used here: hidden link

Thank you

[Price]

Hey Norman, thanks for getting back to me.

Yeah, I'm happy to provide a screenshot. I have included a screenshot of the post edit screen as well as the Views code that displays the thumbnail.

It's displaying a thumbnail using a shortcode. Here's how that shortcode is generated:

function getPDFimg() {
	return '<img src=' . str_replace(".pdf", "-pdf.jpg", types_render_field( "publication_document" , array("style" => "text"))) . ' class="pubdoc-pdf-image"> ';
}
add_shortcode('getpublicationpdfimg', 'getPDFimg')

p.s. I can see the filepath I want in the database; I uploaded a screenshot.

[Noman]

Thanks for details. The thumbnails work for the featured image shortcode but not for this doc field. As you are using custom shortcode to display image, I have been trying to modify this code so it works with thumbnails.

I am still working on it and will update you shortly on this. Thanks

[Noman]

Hello,

I have updated the code, please replace the code with this one in your theme’s or child theme’s functions.php file:

function getPDFimg($atts) {
        	
        	 extract( shortcode_atts( array(
            'size'=>'full',
    	), $atts ) );
        	
        	$image_url = str_replace(".pdf", ".jpg", types_render_field( "publication_document")); // publication_document = your field name
        	$dirname = str_replace('.jpg','',str_replace(home_url('/'),'',$image_url));
        	$images = glob($dirname."*.jpg");
        	if(isset($images[0])){
                    	$small_image = home_url('/').$images[0];
        	}
        	if(isset($images[1])) {
                    	$medium_image = home_url('/').$images[1];
        	}
        	if(isset($images[2])) {
                    	$large_image = home_url('/').$images[2];
        	}
        	
        	switch($size) {
                    	case 'small':
                                	if(isset($small_image) && $small_image != '' ) {
                                            	$image_src = $small_image;  	
                                	}
                                	else{
                                            	$image_src = $image_url;
                                	}
                    	break;
                    	
                    	case 'medium':
                                	if(isset($medium_image) && $medium_image != '' ) {
                                            	$image_src = $medium_image;  
                                	}
                                	else{
                                            	$image_src = $image_url;
                                	}
                    	break;
                    	
                    	case 'large':
                                	if(isset($large_image) && $large_image != '' ) {
                                            	$image_src = $large_image;   	
                                	}
                                	else{
                                            	$image_src = $image_url;
                                	}
        	        	break;
                    	
                    	default:
                                	$image_src = $image_url;
                                            	
        	}
        	
	return '<img src=' .$image_src  . ' class="pubdoc-pdf-image"> ';
}
 
add_shortcode('getpublicationpdfimg', 'getPDFimg');          

==> Whereas publication_document = your field name slug and should be replaced as needed.

In the shortcode you can mention size like = small / medium / large:

 [getpublicationpdfimg size="small"] 

I hope this will resolve the issue. Thank you

[Price]

Hey Norman, I am really impressed you took the time to come up with a solution to a very difficult little problem. Thanks!!

I tested and deployed your code and with a slight modification and it works fine; your idea was the key. It's not perfect but I don't think there's anything you could do to improve on the solution and I don't think it's worth pursuing in any case. Even though it's not finding all small thumbnails, it's finding most and greatly improving page load.

It would be nice if there were some way that Toolset itself associated auto-generated PDF images to the file field so that you could pull them out through a database relationship as opposed to a file name hack like this, but that's probably not a super important feature.

Thanks again and I hope this helps someone else.

- Rowan

[Alan]

Would be great if the code could be amended to include the filename as the alt tag.