[Resolved] Displaying the PDF thumbnail instead of plain link in loop

[Author]

Posts

[Ellen]

I am currently looping through a repeatable list of files like so:

[wpv-conditional if="( $(file) ne '' )"]
[fusion_title hide_pop_tinymce="" margin_top="25px" margin_bottom="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="library-attachment-header" id="" size="4" content_align="left" style_type="underline solid" sep_color="#6dbfc6"]Files[/fusion_title]
<div>[types field="file" title="Attached File" size="thumbnail" separator="<div></div>"][/types]</div>
[/wpv-conditional]

Right now, the files come out as just "attached file" links. How would I have it display the pdf thumbnail if it's a pdf instead of just the words "attached file?"

[Nigel]

Hi Ellen

Do you have thumbnails for the PDFs somewhere, perhaps as a second field?

When you upload PDFs these are treated as files not images, no thumbnails are generated.

It is possible to generate thumbnails from PDFs automatically but requires the use of additional libraries that you would need to discuss installing with your host. If you google "php pdf thumbnail" you'll find posts about what is involved.

Needless to say, this is custom work, and I wouldn't even file this as a feature request as it requires non-standard libraries and so would not work on most people's servers without modification.

[Ellen]

I'm not sure what you mean. WordPress generates pdf thumbnails now built in and has since 4.7. They are referenced for a file no different than the thumbnails/different sizes of images...

[Nigel]

Yes, you are right if you are attaching PDFs through the Media Gallery.

If these PDFs are Types image fields and you are adding the PDFs through the post edit screens in the admin pages (and your server has the required packages installed) then you will get thumbnails generated.

If you are adding them through front-end Forms then it is not possible, because in Toolset Forms .pdf is not an accepted format for the image field type, and so your field type must be File, in which case you would need to generate such thumbnails via some custom solution as mentioned above.

We have an existing feature request for Toolset Forms to use the standard Media Library for uploading images, which would then allow submitting PDFs as images that would generate thumbnails if it was supported by the server, but it is not been worked on currently and I can't say when it might be added.

Is your Types field an image field and are you adding the PDFs in the backend via the Media Library? (And does your server support generating the thumbnails?)

If so I can set up a test server to do the same and I should be able to write a custom shortcode that can output the thumbnail. (My local test server doesn't support it.)

[Ellen]

You hit the nail on the head! You’re absolutely right - I’m uploading through the media gallery, but am copy and pasting the file url into the types field. I forgot about that.

I’d love to have a script to use or any recommendations you might have to handle this sort of thing. Thank you.

[Nigel]

I'm just waiting on our server team to help setting up a test site with the required libraries for WordPress to be able to generate the thumbnails, and then I can double-check what data gets stored where and should be able to help you with something like a custom shortcode.

I'll update you as soon as I can.

[Nigel]

Hi Ellen

Sorry for the delay getting back to you, I have had chance to look at this now.

I should point out the custom code falls outside our support policy, but I have prepared (and tested) an example custom shortcode which will output the URL of the thumbnail for a file field which contains the URL for a PDF.

You can try using this on your site, but if you have problems with it you'll have to examine the code and work through them yourself, I'm afraid.

add_shortcode( 'pdf-thumb', function( $atts = [] ){

  $atts = shortcode_atts( [
	'size' => 'medium',
	'field' => null
  ], $atts );

  global $post;
  $output = "";
  $size = $atts['size'];

  if ( isset( $atts['field'] ) ) {
	
	$field = get_post_meta( $post->ID, $atts['field'], true );

	if ( $field ) {
	  $attachment_id = attachment_url_to_postid( $field );

	  $attachment_metadata = wp_get_attachment_metadata( $attachment_id );

	  if ( isset( $attachment_metadata ) ) {
		
	    $output = $attachment_metadata['sizes'][$size]['file'];
	  }
	}
  }

	return $output;
} );

Register the custom shortcode pdf-thumb by adding the above to your theme's functions.php file, or using a plugin such as Code Snippets.

You can then use it in the context of a post which has a file field, optionally specifying the required size (defaults to medium), like so:

[pdf-thumb field='wpcf-pdf-file' size='large']