Embed pdf in Article and make it responsive

[deltaJ]

I used to use Aridocs Viewer to insert a pdf viewer into an article. But this component is not available in Joomla 4 (which I like a lot by the way). But I discovered in Joomla Community Magazine (October2022) that it can be inserted directly with Joomla 4. It can be inserted as a url within an iframe or using <object> html coding facilitated by "insert media" available with JCE or TinyMCE Editors. There is another J4 pdf viewer I tried but I found it limited and very slow so I want to persevere with the native Joomla solution.

I have inserted video using HTML5 code and found the image responsive, but the pdf is not. It grows out of proportion and looses the scroll bars to scroll the pdf whichever way I choose to embed it if I view the site on a mobile device or Ipad. I could shrink the pdf size down to cope but that just makes it too small to read on a desktop.

This is the code that runs, it is sized to display a readable pdf on a desktop.

<p><object data="images/history/CCHS%20History%20Doc.pdf" type="application/pdf" width="1000" height="1500">
You don't have a pdf plugin, but you can <a download="" href="images/history/CCHS%20History%20Doc.pdf"> download the pdf file.</a></object> </p>

Any ideas to make the pdf responsive?

Many thanks!

[miktowers2]

Hi deltaJ, how are you?
I was looking a solution for that.
I found the core Joomla media insert very useful and simplest way.
Just put the width in %. Works fine for me.

Hope this helps

[deltaJ]

Wow! Is it that simple? Have to give it a try tomorrow.

You simply insert a % instead of the pixel sizes in the code example I gave?

Many thanks.

[deltaJ]

Well, I tried modifying the code to embed the pdf as miktowers2 kindly suggested as follows:

<p><object data="images/history/CCHS%20History%20Doc.pdf" type="application/pdf" width="100%" height="850">
You don't have a pdf plugin, but you can <a download="" href="images/history/CCHS%20History%20Doc.pdf"> download the pdf file.</a></object></p>

Yes it does work but has a problem I cannot fix. It displays the pdf document in a responsive manner on an iPad and iphone but the scrollbars are missing so the remaining pages of the pdf document are not available to read. I fear this is a limitation of the devices in question and how they handle this.
I tried various alterations to the code such as adding scrollbar=1 to the command but it failed to do anything.

If anyone has an idea how to solve this using the native Joomla option to embed a multi-page pdf do let me know.

[gws]

Try removing the height attribute.

[deltaJ]

Hello gws
I tried as you suggested. I just get a letterbox shape display and the same on mobile devices and no scroll bars as usual. The responsiveness has been solved its just the lack of scrolling that remains a big obstacle.
From searching the internet this problem has been reported several times with no no clear solution. TinyMCE editor creates the <object> type code. If you use JCE it inserts an iframe. Both have the same problem - i.e. no scrolling on Apple mobile devices so multi-page pdfs cannot be displayed, Is it a Joomla bug or an IOS bug?

[Webdongle]

Try
width="100%" height="100%"

[deltaJ]

Hi Webdongle,

I tried 100% for both parameters and it didn't help. The height although 100% worked like it was 150 px or similar.

The previous suggestion of deleting height altogether didn't work as i found later the editor self corrected and inserted a height of 150.

I will look at a couple of extensions that claim to insert a pdf but they rely on google docs :-(

The native version is really good as the pdf loads lightening fast while google docs can be sluggish. So I may simply put a link in the article for users to click on - I just need to figure how to make that option to appear just for people using a IOS device. A link to the pdf file on IOS device loads fine.

[Webdongle]

...
The previous suggestion of deleting height altogether didn't work as i found later the editor self corrected and inserted a height of 150....

What editor?

[deltaJ]

That was TinyMCE. It seems to inspect the html code and alters it if it thinks there is something wrong or missing. This is using the insert image function they provide. I followed the information given in the Joomla Community Magazine about embedding pdf natively by Anja de Crom - I think it was October 2022.

Yes I totally deleted the height parameter and the editor inserted a replacement when I saved it.
There is a link between the outline of the pdf shown in the editor and the values in the code. If I grab the outline and change its dimensions the html code changes with new width and height parameters. So a feed back from the outline probably maintains at least a default value to insert in the code.

[Webdongle]

Try JCE editor and their mediabox https://extensions.joomla.org/extension/jce/
https://extensions.joomla.org/extension ... -mediabox/

[miktowers2]

Hi deltaJ. Did you tried with a lower width? For example 95%.

[sozzled]

There's a good article in the Joomla Community Magazine about embedding PDF documents with TinyMCE. I have used this technique successfully ... no other/3rd-party extensions needed. See Explore the Core: Easily embed PDFs in your Joomla content

[deltaJ]

Hi sozzled,

Yes the article in the Joomla Community Magazine is what got me started on trying this.

Have you tried embedding a multi-page pdf in a Joomla article following the guide in that magazine article? and have you tried looking at the result on an iPad?

I think you will find it doesn't work and you can only see the first page, but I would be pleased to hear otherwise.

I have tried many combinations of width and height but there is no magic combination to encourage scrollbars to appear on IOS.

This is interesting though.......

If you set the height to a very high number like 3000 it expands the pdf viewer so multiple pages appear in sequence - that's on my desktop pc with any browser. Guess what happens on IOS? the first page is stretched to extend for the entire height with font and images absurdly distorted. IOS does not want to have anything to do with pages other than the first to the extent of this absurd image distortion. And if there is only one page to display then scrollbars are not needed.

[deltaJ]

Hello webdongle

Thanks for the JCE Mediabox idea. Something to try tomorrow

[sozzled]

I haven't tried viewing an embedded PDF document on an iPad but I have no reason to doubt that it doesn't work as the magazine article mentions. I certainly didn't use a "very high number" to expand the width beyond the extremes of the display. I only tried with a simple PDF and it looked OK to me.

Besides ... what's wrong with scrollbars anyway? Most people have no real problem with them when, after all, viewing PDF documents like that is (kind of) like a preview. If the PDF document in large, it's probably better to view it from a desktop environment ... but that's just a matter of opinion, I suppose.

[deltaJ]

Well I guess we have taken this as far as we can.

In retrospect the fundamental problem is IOS will only display the first page of a multipage pdf document if the code to do it is built into a Joomla article and uses the inbuilt embed facility offered by Joomla 4.

But if you present IOS with a link to the document it will display all pages. Because it is a touch screen system it doesn't create scrollbars anyway, but you can pull down with your fingertip to see all the pages.

So the lack of scrollbars is a red herring, its just the failure of IOS to load more than one page.

[tuxor]

there is a problem to insert the pdf if the user is not superadmin. shows You don't have the plugin, you can donwnload the file here. How can insert the pdf if I'm not super admin?

[Per Yngve Berg]

Your width and height is invalid. A unit is missing like "1000px"

[raunhar]

The pdf is visible on desktop, but not on mobile. How to show on mobile. Please suggest