[Gelöst] Preview/screenshot of uploaded file on front-end.

[Author]

Artikel

[Guido]

Tell us what you are trying to do?
People can make an ad on the front-end of my website with a form. They also have the possibility to upload files. Can be an image or a file like pdf, word, excel etc.

If a visitor watches that ad i want them to see a preview/screenshot of the uploaded file. And if they click on it it opens bigger or download the file.

Is there a similar example that we can see?
In the back-end of an custom post you can see all the toolset custom fields if you make an new custom post. If you upload the files there you will see the link and under it you see the preview/screenshot. That's what i want on the front-end. But without showing the link. Just the preview/screenshot.

Also when i uploaded the screenshot here you see a preview of the image. Something like that but then on the front-end after the ad was submitted.

I added also a screenshot of the back-end.

Thanks!

Guido

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - there is no such feature exists to display the preview of uploaded PDF file or any file.

However, I've some custom code to suggest and try out. Please try to add following code to your current theme's functions.php file:

add_shortcode( 'generate-file-preview','generate_file_preview');
function generate_file_preview($atts){ 
 
 global $post;
 $preview_img = '';
  $atts = shortcode_atts(
    'size' => 'medium',
    'field' => null
  , $atts );
  
    if ( isset( $atts['field'] ) ) {
     $size = $atts['size'];
     
    $field = get_post_meta( $post->ID,'wpcf-'.$atts['field'], true );
 
    if ( $field ) {
      $attachment_id = attachment_url_to_postid( $field );
 
      $attachment_metadata = wp_get_attachment_metadata( $attachment_id );
 
      if ( isset( $attachment_metadata ) ) {
         
        $preview_img = $attachment_metadata['sizes'][$size]['file'];
      }
    }
  }
 
    return $preview_img;
}

Call the shortcode as:

[generate-file-preview  size="medium" field="field-name"]

Where:
- Repalce "field-name" with your original field name.