Problem styling HTML Galley OJS 3.0

Hi @florianruckelshausen,

I’d suggest working with a developer tool like Firebug for Firefox to inspect the page elements and styles. If you’re able to put the site up somewhere I can see it, perhaps I can provide some guidance.

Regards,
Alec Smecher
Public Knowledge Project Team

OK i got it working. In the display.css i switched the body html style to:

html, body {
	overflow: auto;
}

and everything works fine. Thanks a lot.

I want to know in OJS 3.0.2 what is the location for uploading .css and .js files for HTML Galley

HTML file was created by using PKP Open Typesetting Stack

Hi @hannanhazari,

If you click Edit in the Editor’s listing of Galleys for the submission, you should see the opportunity to upload/manage files. This is where you’d upload images/CSS/JS/etc. to go with the HTML. I’d strongly suggest using the latest OJS 3.x release for this – you may need to upgrade.

Regards,
Alec Smecher
Public Knowledge Project Team

Guys, my html is like

and I want like this

I tried Vitaliy’s way of embeding (The solution, which worked for me, was adding this variable into HTML plugin php file: https://github.com/pkp/ojs/pull/1219/commits/5e308cea65933ff9d2b0c6f08a78d600a30b4ecf3

Than adding this line to display.tpl (in htmlArticleGalley): {$htmlGalleyContents}
So all your html article content will be downloaded.) it. However I cant scroll down since there is no scroller.

Any idea of what should i do?

We also had similar problem. Here ist our display.tpl

{**
 * plugins/generic/htmlArticleGalley/display.tpl
 *
 * Copyright (c) 2014-2017 Simon Fraser University
 * Copyright (c) 2003-2017 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * Embedded viewing of a HTML galley.
 *}
<!DOCTYPE html>
<html lang="{$currentLocale|replace:"_":"-"}" xml:lang="{$currentLocale|replace:"_":"-"}">
{translate|assign:"pageTitleTranslated" key="article.pageTitle title=$article->getLocalizedTitle()}
{include file="frontend/components/headerHead.tpl"}
{include file="frontend/components/header.tpl"}
<body class="pkp_page_{$requestedPage|escape} pkp_op_{$requestedOp|escape}">

	{* Header wrapper *}
	<header class="header_view">

		<a href="{url page="article" op="view" path=$article->getBestArticleId()}" class="return">
			<span class="pkp_screen_reader">
				{translate key="article.return"}
			</span>
		</a>

		<a href="{url page="article" op="view" path=$article->getBestArticleId()|to_array:$galley->getBestGalleyId()}" class="title">
			{$article->getLocalizedTitle()|escape}
		</a>
	</header>
	<div id="htmlContainer" class="rot">
	{$htmlGalleyContents}
	</div>
	{call_hook name="Templates::Common::Footer::PageFooter"}
	{include file="frontend/components/footer.tpl"}
</body>
</html>

We modified the header and footer includes and remvoed the iframe to embed the html article. The htmlGalleyContents has to be defined in HtmlArticleGalleyPlugin.inc.php as already described

This ist display.css of the HTML-galley plugin. I think the overflow was the critical point.

/**
 * plugins/generic/htmlArticleGalley/display.css
 *
 * Copyright (c) 2014-2017 Simon Fraser University
 * Copyright (c) 2003-2017 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * Styles for embedded viewing of a HTML galley.
 */

html, body, #htmlContainer, iframe {
	height: 100%;
	width: 100%;
}

iframe {
	padding-bottom: 30px;
}

html, body {
	overflow: auto;
}

iframe {
	border: 0px;
}

Okay. It worked. Thanks a lot

Hi everyone,

This thread recently came to my attention, as I was working on a stats issue with a hosted site who had modified their htmlArticleGalley plugin in a similar manner. Please be aware that not calling the “download” op when loading the HTML galley contents (which is what happens in the original iframe solution) will result in the usage stats framework not logging a hit on the download. Only the download op generates a stats log entry. If you’ve implemented something like this and have noticed a discrepancy between the usage stats report and something like google analytics, this may be why.

We have a journal who has recently solved this issue by generating a jQuery .get() request to the galley download with the inline?=1 parameter, and then inserting the HTML in the div element, instead of grabbing it in the plugin and then passing it in via a template parameter.

Cheers,
Jason

The solution described in this thread worked perfectly for us using OJS 3.1.0-1, but when we recently tried to upgrade to 3.1.2-1, the display unfortunately broke. It seems that display.css is no longer called in connection with the HTML galley display, which results in something like this:

screenshot

We called @florianruckelshausen and apparently the same workaround still works for 3.1.1-4. Does anyone have any idea what caused this regression?

Correction: we had a mistake in the <div> section in display.tpl. class needs to be "rot", which had apparently changed in 3.1.2-1. With that HTML is displayed correctly as before. We will do some more tests and post any new findings. Here is our display.tpl:

{**
 * plugins/generic/htmlArticleGalley/display.tpl
 *
 * Copyright (c) 2014-2019 Simon Fraser University
 * Copyright (c) 2003-2019 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * Embedded viewing of a HTML galley.
 *}
<!DOCTYPE html>
<html lang="{$currentLocale|replace:"_":"-"}" xml:lang="{$currentLocale|replace:"_":"-"}">
{capture assign="pageTitleTranslated"}{translate key="article.pageTitle" title=$article->getLocalizedTitle()|escape}{/capture}
{include file="frontend/components/headerHead.tpl"}
{include file="frontend/components/header.tpl"}
<body class="pkp_page_{$requestedPage|escape} pkp_op_{$requestedOp|escape}">

	{* Header wrapper *}
	<header class="header_view">

		<a href="{url page="article" op="view" path=$article->getBestArticleId()}" class="return">
			<span class="pkp_screen_reader">
				{translate key="article.return"}
			</span>
		</a>

		<a href="{url page="article" op="view" path=$article->getBestArticleId()}" class="title">
			{$article->getLocalizedTitle()|escape}
		</a>
	</header>

	<div id="htmlContainer" class="rot">
{$htmlGalleyContents}
	</div>
	{call_hook name="Templates::Common::Footer::PageFooter"}
{include file="frontend/components/footer.tpl"}
</body>
</html>

We just upgraded to OJS 3.1.2-1 and in can confirm that the descibed modifications still work to display HTML-galleys. For us it was also possible to leave class=“rot” out of the code without any effect.

Dear all,
currently, our journal embeds the html galleys in an iframe (Anzeige von Editorial | sub\urban. zeitschrift für kritische stadtforschung). For several reasons, we want to switch to a different display method. So I updated our display.tpl and display.css with this code posted by @florianruckelshausen (Problem styling HTML Galley OJS 3.0 - #68 by florianruckelshausen) and by adding the variable
'htmlGalleyContents' => $this->_getHTMLContents($request, $galley),
to HtmlArticleGalleyPlugin.inc.php according to the solution by @Vitaliy (Problem styling HTML Galley OJS 3.0 - #61 by Vitaliy).

Unfortunately, this solution does not work for us and I don’t know why. After updating the files, when clicking on the HTML galleys, nothing happens. There is only a white screen. What could be the solution?
I have already cleared the template cache.

Our current display.tpl looks like this:

{**
 * plugins/generic/htmlArticleGalley/display.tpl
 *
 * Copyright (c) 2014-2019 Simon Fraser University
 * Copyright (c) 2003-2019 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * Embedded viewing of a HTML galley.
 *}
<!DOCTYPE html>
<html lang="{$currentLocale|replace:"_":"-"}" xml:lang="{$currentLocale|replace:"_":"-"}">
{capture assign="pageTitleTranslated"}{translate key="article.pageTitle" title=$article->getLocalizedTitle()|escape}{/capture}
{include file="frontend/components/headerHead.tpl"}
{include file="frontend/components/header.tpl"}

<body class="pkp_page_{$requestedPage|escape} pkp_op_{$requestedOp|escape}">

	{* Header wrapper *}
	<header class="suburban" style="background-color:white"  >

    <table style="width:99%";  ><tr><td>
   		 <a href="{url page="article" op="view" path=$article->getBestArticleId()} ";>
   			<strong>{$article->getLocalizedTitle()|escape}</strong><div  style="color:black">{$article->getLocalizedSubtitle()|escape}</div>
       </a> </div></strong>
                         </tr></td>
                         <tr><td>
            {if $article->getAuthors()}
   					<div class="authors"> <font color="black">
   						{foreach from=$article->getAuthors() item=author}
   							<div class="author ">
   							<a href="{url page="article" op="view" path=$article->getBestArticleId()}#autorensprung"> {$author->getFullName()|escape}
                 </a>
   								{if $author->getLocalizedAffiliation()}
   									<div class="article-author-affilitation">
   										{$author->getLocalizedAffiliation()|escape}

   								{/if}
   							 </div>
   							</div>
   						{/foreach}
   					</div>

   				{/if}
               </td>

               <td>
                            <font color="black"> <div align="right" ><a href="{url page="issue" op="view" path=$issue->getBestIssueId()} " >
                              {$issue->getissueSeries()}
                                 {if $article->getStartingPage()}<br>S. {$article->getStartingPage()}-{$article->getEndingPage()}<br>
   				{$article->getSectionTitle()}

                                  {/if}
   </h4>
   		 </div>
            </td>
            </tr>
            <tr>
            <td><br>

                                   {* Published date *}
   			<div><font color="black">	{if $article->getDatePublished()}

   						{translate key="submissions.published"}:
   						{$article->getDatePublished()|date_format:$dateFormatLong}

                           {**
                        	*{translate key="submissions.submitted"}:
                           *{$article->getDateSubmitted()|date_format}
                               *}
   				{/if}</div>
                    </td>
                    <td><br>

                             <div align="right">   <a href="{url page="article" op="view" path=$article->getBestArticleId()}"  class="title"><strong>abstract & PDF </strong>
                          </a></div>
               </td>
                </tr>
               </table>

            </font>
	</header>

     <iframe name="htmlFrame"  width=100% height=500 frameborder="0"
         src="{url page="article" op="download" path=$article->getBestArticleId()|to_array:$galley->getBestGalleyId() inline=true}" allowfullscreen webkitallowfullscreen scrolling="yes" style="overflow:hidden;"></iframe>
 	{call_hook name="Templates::Common::Footer::PageFooter"}
   {include file="frontend/components/footer.tpl"}
</body>
</html>

Hi @adm_sub,

What version of OJS are you using?

Hi @Vitaliy, we are currently using OJS 3.1.2.4 and planning to upgrade to 3.2 soon.

The method you described works for me in OJS 3.1.2-4.
Can you look at PHP error log for any relevant errors?

Hi @Vitaliy,
our error_log file is huge. It is cluttered with error messages like here: [OJS 3.1.2.0, PHP 7.72stable] PHP Deprecated Errors.

However, after searching a little bit, I found the following entries:

[19-Mar-2020 09:58:56 Europe/Berlin] PHP Fatal error:  Uncaught Error: Call to undefined method IssueDAO::getIssueByArticleId() in /home/suburban/public_html/sys/plugins/generic/htmlArticleGalley/HtmlArticleGalleyPlugin.inc.php:177
Stack trace:
#0 /home/suburban/public_html/sys/plugins/generic/htmlArticleGalley/HtmlArticleGalleyPlugin.inc.php(81): HtmlArticleGalleyPlugin->_getHTMLContents(Object(Request), Object(ArticleGalley))
#1 /home/suburban/public_html/sys/lib/pkp/classes/plugins/HookRegistry.inc.php(107): HtmlArticleGalleyPlugin->articleViewCallback('ArticleHandler:...', Array)
#2 /home/suburban/public_html/sys/pages/article/ArticleHandler.inc.php(220): HookRegistry::call('ArticleHandler:...', Array)
#3 /home/suburban/public_html/sys/lib/pkp/classes/core/PKPRouter.inc.php(390): ArticleHandler->view(Array, Object(Request))
#4 /home/suburban/public_html/sys/lib/pkp/classes/core/PKPPageRouter.inc.php(231): PKPRouter->_authorizeInitializeAndCallRequest(Array, Object(Request), Array, false)
#5 /home/suburban/public_html/sys/lib/pkp/classes/core/Dispatcher.inc.ph in /home/suburban/public_html/sys/plugins/generic/htmlArticleGalley/HtmlArticleGalleyPlugin.inc.php on line 177

Thank you in advance for your kind help!

Are you sure that you are using the relevant version of the plugin? As far as I see, the call to this method was removed before OJS 3.1
I suggest rechecking if it’s the relevant plugin’s version.

I guess we use an old version, but this is part of the problem. The newest version does not work. After clicking on the HTML-galley the galley is not loaded properly.

Anmerkung%202020-03-20%20100128

This is our current version:

htmlArticleGalley
plugins.generic
1.0.0.0
2013-07-02
1
HtmlArticleGalleyPlugin

@adm_sub,

It seems that for HTML Galley Plugin the version.xml file hasn’t been updated for a long time. Anyway, it should be the version that goes with OJS 3.1.2 release, e.g.: ojs/plugins/generic/htmlArticleGalley at stable-3_1_2 · pkp/ojs · GitHub

If it’s the one, can you check PHP logs ones more?

Hello! I am relatively new to the OJS game and trying to get up to speed on the proper way to format my HTML galleys so that they are wrapped in the OJS styling. So far, besides broken image links I need to fix, it’s working beautifully on mobile and on other smaller screen sizes, but on desktop, everything below the title and back button provided by OJS gets squished to the left instead of taking up the full screen. I have inspected the code and tried to find the culprit but am coming up empty handed. Any ideas on how to fix this? Here is a link to my tester article: View of Third Space as Decolonial Con/Text: Okinawa’s American Champurū | Transnational Asia