Previewer for file URL's as small miniature

Hej bubblers

im searching for a way to to display files in a RG but i want them to be displayed as small miniatures and when you click on them the opens up in a new browser tab

does anyone have experince with doing that and can help me out?

Hey @christian_bargmann :waving_hand:

Hope we can help out. :blush:
What have you tried so far? Have you tried displaying them in the RG with an image element?

hi @J805

yeah i tried with the image element and that actually works okay with pictures..
but it doesnt work so well with files as f.ex. pdf files :slight_smile:

i also have tried the plugin better previewer.. but it doesnt work well on mobiles nor either when its as small as miniatures.. only when its displayed as bigger size

To clarify you don’t mean something like this screenshot? I’ve also wondered how to do what you’re trying to do (if I think what you mean is a small preview of a file) but I haven’t gotten around to looking into how to do that. I know an image element will show a preview of a pdf file though.

I have never used or tried displaying

files before. But PDF usually works well with just placing it in a background of a group or as an image.

Here is an example with a PDF. I don’t have another file like the one you were talking about to test it though.

Editor: testApp42wCleanDB | Bubble Editor

Preview: https://testapp42wcleandb.bubbleapps.io/version-test/previewer_for_file_url_s_as_small_miniature?debug_mode=true

Let me know if this helps. :blush:

You can see the small preview and then when you click on the group it takes you to the new tab with the full document.

omg.. i have tried that out previously but it didnt work as i wanted it to :sweat_smile:
but this actually worked perfectly..

okay then i have another question there is related to this..

i have this third part page where my users customer can display quotes there has been sendt to them.. it works really well on pc..
but on mobile its really crap..
is there any suggestions to how i can preview a full pdf like this but there also works on mobile edition?

1 Like

So what does it look like now on mobile? Can you share a screenshot of how it looks the way I set it up? It seems to look good on my phone. :man_shrugging:

i tried to search for some help in this post also but no response yet.. :sweat_smile:
there you can see how it acts differently from iphone and android.. and if i get it to work on iphone it only can display 1 out of 2 pages
and on android i get the message that “this plugin is not compatible”

What about the way I showed you from above? That seems to work good on mobile as well.

yeah but i dont think that one work as an actually pdf previewer where you can scroll throw pages and so on.. isnt that just a still image of the pdf?

the different is this bar showing on top of the previewed file so it kinda show an open file inside a group

The small preview is just an image. When you click on the link from your phone, it will take you to the whole document. Did you try it out yet?

yeah excatly.. and that is what i want to avoid.. i want the full document to be displayed in a group as it does now on the desktop version.. was just hoping that was possible on mobiler version also :slight_smile:

Maybe you can use this code in an HTML element?

<div style="position:relative; width:100%; padding-top:56.25%;">
  <iframe src="https://example.com" 
          style="position:absolute; top:0; left:0; width:100%; height:100%; border:none;" 
          allowfullscreen 
          loading="lazy">
  </iframe>
</div>

Try this again: https://testapp42wcleandb.bubbleapps.io/version-test/previewer_for_file_url_s_as_small_miniature?debug_mode=true

This shows a page with the viewer inside of it now: https://testapp42wcleandb.bubbleapps.io/version-test/previewer_for_file_url_s_as_small_miniature?debug_mode=true

oooh… thank you so much!! :smiley:
does i then just put in my URL in the example field?

Yes :blush:

It gets displayed like this

I need to tweak the code a bit more. Let me see.