PDF thumbnail and viewer

Probably a silly question but, i have a file upload field that allows .jpg,.png,.gif,.pdf

When i upload any of the image file types it shows a small thumbnail that i have set and when you click on it i have made it show in a lightbox, all working great, except for a PDF, no thumbnail and no view in the lightbox either.
Am i doing something wrong or is this normal that it can not show a pdf file?

Hello Paul,
PDF files are not image files. They can’t be used as image source in the preview thumb images.

Maybe for PDF files you could just show a custom icon instead.

1 Like

Is there any way i could make this work with a pdf even if only in the lightbox, so i can add a custom thumbnail but in the lightbox i really need to show the PDF, otherwise i suppose worst case scenario is i can make clicking on a pdf not open in the lightbox but just in another browser window. Unless you have a way around this @Teodor

Thinking about this, can i convert the pdf to a jpg on upload to make it display

Unfortunately the lighbox does not support PDF files - only images and videos.

And converting the PDF to JPG, would that work?

We don’t have tools for converting PDF to jpeg.

OK cool, i will just make it open in a new browser window when clicked then, thanks @Teodor, saved me hours of fiddling that would have had no results, appreciate it

1 Like

Ok i have this mostly working now @Teodor, but my lightbox still reads that there is a PDF file somewhere so it tries to show it, can i have a lightbox setting that ignores .pdf

Here is my code, maybe there is another way to do this better.

<dmx-lightbox id="lightbox_pop_images" noscrollbars="true" loopvideo="true"></dmx-lightbox>
<div class="col-4" dmx-repeat:repeat="serverconnect_pop_checker.data.query_pop_images" id="repeat_pop_images" dmx-hide="pop_image.endsWith('.pdf')">
    <a dmx-bind:href="'pop_uploads/'.concat(pop_image)" dmx-lightbox:pop_images=""><img class="img-fluid img-thumbnail" dmx-bind:src="'pop_uploads/'.concat(pop_image)"></a>
</div>
<div class="col-4" dmx-repeat:repeat="serverconnect_pop_checker.data.query_pop_images" id="repeat_pop_pdfs" dmx-show="pop_image.endsWith('.pdf')">
    <a dmx-bind:href="'pop_uploads/'.concat(pop_image)" target="_blank"><img class="img-fluid img-thumbnail" dmx-bind:src="'pop_uploads/image_preview_pdf.png'"></a>
</div>

So what exactly happens? What do you mean by:

It seems this returns pdf - not an image.

I sent you a pm of the link to my site to see, but basically with the shown code I am hiding the first repeat if the extension is .pdf and then in the second div i am showing the pdf preview if the extension is .pdf, but if i click the first image it shows arrosw to the next image which can not display

Well, you should remove the group then …

Sorry im confused can you explain that in more detail, which line in the provided code is the “group”

In the lightbox link configuration, remove the group option (in the UI).

I do not see a group option though

Not there, it is where you setup your lightbox link.

Ok, finally, thanks @Teodor, sorry i did not realise that field could be left blank like that.