Embed PDF in v3

I can’t find an answer that works, so I’m putting it out there:
My site has embedded PDFs - I did them in HTML components (which appear to be gone in later versions). All the links have gone dead and I cannot find a way that works.

Any ideas?

thanks

Look Up: PDF Viewer

A free component I’m giving away…

Works great :+1:

Oops I forgot to put mine back on from February so I’ll do that tomorrow.

Deleted - old link

Dropbox says it’s been deleted (followed the link above)

Sorry new version:

Dropbox

thanks so much! I’ll try it out tonight or tomorrow!

Just noticed this post, and I am also very interested in seeing what this can do. Question though, how exactly does one use one of these files that ends in .elementsdevpack?

You don’t necessarily have to explain it to me if there’s somewhere I can just read about it.

In settings there is add devpack on the bottom…

(I’d make a folder for devpacks in documents on Mac hd)

Then browse to where your devpack is and - add or click the checkbox

Yeah, I had actually figured it out, but the forum website was being weird and wasn’t letting me post anything for a minute. Kept saying that drafts were offline. I was hoping to save you that response, but, you know, hey, if it helps other people, then that’s great. Either way, thank you. I look forward to checking this out.

Thank you for posting this. I have a lot of “tutorials” that are in PDFs used for editing photos, videos, and other instructions.
I was having to create a SEPARATE HTML component to display each of the different ones. Your component can be used over and over or even become a Global “template” so all displays are the same and then be unlinked with a separate PDF dropped into it. I have spent a lot of time with ChatGPT online trying to get it done, but I don’t think my “Plus” version allows me to create these DevPacks.

I’m really happy to hear that…. It’s nice to know they help people!

Thanx :slight_smile:

Back again. I’ve got some comments on the PDF Viewer Component:

I’m thinking you’re potentially going to end up releasing this as an official component. And I’m commenting in again to give a little bit of feedback…

This is actually pretty cool. I like how the website background does not scroll. It does appear as though I have to use a container to define the width, but the options are nice and simple. Really the only thing that I wish that this had that it doesn’t is a way to change the background color. I could probably figure out how to target and add custom CSS in my custom code block that I use for that kind of a thing, but it would be nice if that was just a built-in part of it. But otherwise, this is slick.

You know, if I could add a function, and I don’t know how well it would work, if it were possible for something like this to understand what the size, I guess I should say aspect ratio, of the PDF is, and then it were to draw the container that the PDF renders in and keep it at the same aspect ratio, obviously assuming all pages in a PDF are the same, of course. That would be incredible.

Honestly, the biggest issue I’ve found with anything that renders PDFs is trying to correctly define the size relative to the PDF itself. And then, of course, you have to go through every different breakpoint and figure out what that is all the way down to mobile.

If there were a way for it to just see the PDF, calculate the aspect ratio, and conform itself to that shape, it would be an unbelievably great Component, bar none! And like I said, add the ability to change the background color inside the rendered area.

Anyway, yeah, I’m checking it out, using it as a part of a modal, and it’s very close to what I’d want to use. In the meantime, I’ll see about trying to target what the background is and add that CSS to define it myself.

But this is cool. The simplicity is a part of its strength!

Just thinking this through a little bit, and to clarify, I don’t mean that it should try to force the container to the full size of the page or, you know, anything other than the first page, but that the container aspect ratio match the PDF’s aspect ratio.

If there’s no way to do this on the back end, you could also just have some kind of a space to put in what the aspect ratio is, and it could solve for that. And then, assuming the PDF’s been designed and not in an insane way, and all the PDF pages are the same aspect ratio, then it would be a great way to conform the size of the container holding the PDF. And then the sizing component would only need to be one dimension, and you could just determine how much of the viewport the PDF is going to show up in, and then from there, you could have that just scale all the way from the biggest desktops down to the smallest mobile device.

I was actually wondering if wrapping it in container wasn’t the best idea because you’ve already thought about that since I realized there’s no way to change the width variable for different breakpoints.

Anyway, I just thought a little bit of clarification would be good.

[I did find the class to target to change the iframe body background]

I have had this pdf viewer for ages, still waiting for a way to release custom components for free
responsive, search, scale, print, changes to colours of viewer etc, thumbnails on off, etc

will be free

@upssjw Well, that’s a different way to view the same thing. The difference with that one is you’re having it open up in a separate browser tab. And then it looks like it has all of the features of PDF.js.

I think one of the most simple and elegant solutions is something that can be opened up in a modal, conformed to the PDF itself, with user-selectable border options, which I guess would be the amount of background that’s still showing through. Obviously the ability to change the background color, and then just have it stay at that size relative to the viewport size. Along with the kind of options already in this PDF Viewer Component.

What is that anyway? Is that a browser plugin? Looks like it is.

As for free custom Components, I mean, there are free custom Components on the store, so it’s certainly possible. Maybe those were all by the core company? I don’t know. But yeah, I agree, there should be a way to do that.

This is a custom component

Free components

You have to be invited, I have no interest in signing up to a payment method anyway

So this may never be made available

Okay, cool. You have a version in a modal. Is it the one, is it the thing that generates the modal, or do you just have to use standard components to add the modal?

I see you just edited it again. When you say full screen, does it stay on the page otherwise until you close that, and then you’re just where you were previously? I think that’s important.

And then in the modal version, does it have all the options you showed and then allow you to uncheck a bunch of stuff to take it down to the most simple version?

Actually, if it goes full screen anyway, and it doesn’t take you out of the page other than to show it, interact with it, and then to close it, then, you know, maybe the modal part isn’t really necessary. I guess I’d need to know more about how components were built and what you mean by full screen.

Anyway, this sounds good.

You have to be invited? That’s bizarre. I can see there being a vetting process to make sure that it maintains full compatibility and interface standards and all of that, but that sounds a bit exclusive. Definitely outside of my ethos wheelhouse.

Are you sure the invited thing isn’t just where it’s at now? Because the whole app is still basically being developed and the store component hasn’t been fully sussed out? And once it’s to whatever standard they need it to be at, then they can open it up to the public with guidelines and whatever else.

What you’re saying sounds strange as a business philosophy. Manual gating doesn’t make sense if you want to build a successful ecosystem.