[OJS] Add preview PDF article

We need your help. I want to view articles on their personal pages from downloaded PDF files (which are used in proofs).
There was a problem in the code that would form a link to the downloaded PDF file of the article.
The proofreader has this link, but I don 't really understand how it is formed.
All changes are made in the article_details file.tpl.
OJS is used.
I plan to insert a PDF using a simple html code in the drop-down menu.
I didn’t find any built-in features for creating such an object. if possible, specify what to look for and how to configure it in the article’s detail code
I would appreciate your help.

Can no one help me in this question?
@asmecher ?

hello @Yuriy_Kadatski

is this solution util for you?

Dashboard → Settings → Website → Plugins → [x] PDF.JS PDF Viewer


This plugin is enabled, and Yes, this is not the solution.
The question is. so that in my window, let’s say a frame or something like that, a PDF file corresponding to the article described at this link is loaded.
This is why it is important for me to find the code that forms a link to this PDF file as shown in my first message.

Link is built on


{* Article Galleys *}
                        {if $primaryGalleys}
                                <div class="item galleys">
                                        <ul class="value galleys_links">
                                                {foreach from=$primaryGalleys item=galley}
                                                                {include file="frontend/objects/galley_link.tpl" parent=$article publ$

@Yuriy_Kadatski Perhaps you can from js:


Thanks. I’m changing this file. But since I’m not very experienced in coding, I can’t find a way to convert the code you specified to a link or file to insert it as an object.
Maybe You could help with the full code? I know it’s a lot to ask, but I can’t find a way to do it yet.

I need to do this like on this page ПОЛОВЫЕ ОСОБЕННОСТИ АСИММЕТРИИ КРАНИОМЕТРИЧЕСКИХ ПОКАЗАТЕЛЕЙ ПРИ РАЗЛИЧНЫХ ФОРМАХ ЛИЦЕВОГО ЧЕРЕПА | Алиева | Морфологические ведомости. But I can’t Express a link to the article file from this code so that I can insert it as an object later.
Maybe this is already implemented in OJS and I just don’t know?

You cand add to tpl a div, for exmaple

<div id="pdfviewer">Click</div>


$('#pdfviewer').on('click', function() {
    urlpdf = $('.obj_galley_link.file').attr('href');
    $(this).html('<iframe src="'+ urlpdf +'"></iframe>');

That need debug, is only pseudocode but functional.

@Yuriy_Kadatski ironic question, Why are there alot of bots from Rusia? :blush:

Thank you very much.

Good afternoon.
First of all, I want to thank @juanito for his responsiveness and patience. And, in particular, for the desire to help and spend your personal time on it (yesterday it took a whole day of correspondence and trial and error).
secondly,. I want to tell you that all manipulations were carried out only in the file templates/frontend/objects/article_details.tpl and no matter how hard we tried, any Java scripts when saved in it were not processed when loading the page (I suspect that they were ignored by OJS, but I as a non-coder could not understand where and why).
Third, there was only one place/code in this file that would form a link to the final PDF of the article that we uploaded, and this was done in the form of proofs.
Fourthly, only this morning I decided to go from the opposite, that is, try to change the code of this proofs and found there an otsulku on another file-the file templates/frontend/objects/galley_link.tpl and then it dawned on me - you can also insert a PDF based on it. To do this, I made a copy of this file and cleaned out everything in it that was not useful - in fact, there was just a code for forming a link with the following content:

{* Get page and parentId for URL *}
{if $parent instanceOf Issue}
{assign var=“page” value=“issue”}
{assign var=“parentId” value=$parent->getBestIssueId()}
{assign var=“page” value=“article”}
{assign var=“parentId” value=$parent->getBestArticleId()}

Where the first code is creating the link structure, and the second is expressing it in the hyperlink view and displaying it on the site

<a class="{if $isSupplementary}obj_galley_link_supplementary{else}obj_galley_link{/if} {$type|escape}{if $restricted} restricted{/if}" href="{url page=$page op="view" path=$parentId|to_array:$galley->getBestGalleyId()}">

{* Add some screen reader text to indicate if a galley is restricted *}
	{if $restricted}
		<span class="pkp_screen_reader">
			{if $purchaseArticleEnabled}
				{translate key="reader.subscriptionOrFeeAccess"}
				{translate key="reader.subscriptionAccess"}


	{if $restricted && $purchaseFee && $purchaseCurrency}
		<span class="purchase_cost">
			{translate key="reader.purchasePrice" price=$purchaseFee currency=$purchaseCurrency}
	{/if} </a>

Next, in the same file, I reworked the second code and added an iframe to it, and the following came out:

{* Get page and parentId for URL *}
{if $parent instanceOf Issue}
	{assign var="page" value="issue"}
	{assign var="parentId" value=$parent->getBestIssueId()}
	{assign var="page" value="article"}
	{assign var="parentId" value=$parent->getBestArticleId()}
{* View page *}
<div style="height:600px;padding:0.5em">
<iframe id="viewer" class="ui-widget-content" frameborder="no" src="{url page=$page op="view" path=$parentId|to_array:$galley->getBestGalleyId()}" width="100%" height="100%" allowfullscreen webkitallowfullscreen></iframe>

Of course, everything is done on the principle of “just to work” and the code is probably excessive or inconvenient, but it works, so use it on your health!

You can see it in the work by following the link NATURAL RISKS AND STRATEGY OF THE WATER AVAILABILITY RESEARCH OF TERRITORIES | Hydrosphere. Hazard processes and phenomena. Read online tab.

1 Like

Hello everyone!
This seems to be the topic which is closest to my problem - so I dare to post here.
I am not an experienced programmer so I try to avoid to change the code as Yuriy did in his solution. My problem is so simple that I might have made a stupid mistake and you can help me immediately:
When I install OJS on the same server as OJS 3.0.2 the preview of PDFs does no longer work. The page starts to load normally but the iframe which should contain the preview does not load but breaks after a few hundred characters:

<iframe src="[https://XXXXXXX/ojs32/plugins/generic/pdfJsViewer/pdf.js/web/viewer.html?file=https%3A%2F%2Fojs-hslu.ch%2Fojs32%2Findex.php%2Fakwi%2Fissue%2Fdownload%2F1%2F1](view-source:https://ojs-hslu.ch/ojs32/plugins/generic/pdfJsViewer/pdf.js/web/viewer.html?file=https%3A%2F%2Fojs-hslu.ch%2Fojs32%2Findex.php%2Fakwi%2Fissue%2Fdownload%2F1%2F1)" width="100%" height="100%" style="min-height: 500px;" title=" <hr> <p>Any idea what is going wrong? The server allows same-origin and it works well with OJS 3.0.2<br> Is there a config option where I have to specify the file type? Config.inc.php looks very much like the working version on the same server.<br> Any help is very appreciated!!</p>

Hi @kmarfurt,

Can you write more about the preview breaking after a few hundred characters? Maybe include a screenshot?

Alec Smecher
Public Knowledge Project Team

Hi @asmecher
Thanks for your quick reply. I include a pic with the output window above (correct heading) and the HTML code in front of it.
Note that the iframe URL as is works well with 3 browsers when the link is copy-pasted as URL of a new browser tab.
My only explanation so far is a Web Application Firewall between me and the server which cuts off the transfer of the iframe and the browser reaches end of file - although after receiving the relevant part of the iframe code which only breaks at the title tag. Feel free to test both versions online by downloading the current isssue of our journal. The working version is ojs302 instead of ojs32 in the URL path part. You can then copy the iframe code from the source code view and see that it works, too.

ADDED: my firewall explanation is weak because the same server software serves both instances… just in a different directory.

Hi @kmarfurt,

Is there anything relevant in your PHP error log? If the page stops serving in the middle of nowhere, there will likely be something logged. I suspect you’re probably hitting Error when viewing a PDF issue galley · Issue #5762 · pkp/pkp-lib · GitHub, which is resolved in the freshly-released OJS 3.2.0-3.

Alec Smecher
Public Knowledge Project Team

1 Like

THX @asmecher ! It works now.
You were right - it was the suspected “missing title” thing. The iframe URL ended witth the first quote after the title="
I reinstalled my test environment with version and it worked.
This is solved. I can continue to prepare the migration to the new server. Still looking for a friendly text to convince our readers to reregister on the new site… :slight_smile: