Problem styling HTML Galley OJS 3.0

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

UPDATE: I figured it out. The default CSS had some odd restrictions on width for the media calls. I fixed it by inserting this code into the html body:

<style>@media (min-width: 992px) {
    body {
        max-width: 100%;
        margin: auto;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    body {
        max-width: 100%;
        margin: auto;
    }
}
@media (max-width: 767px) {
    body {
        padding-left: 5px;
        padding-right: 5px;
    }
}</style>

Hi @aszymczyk,

Just want to note that your approach has a side effect - links in the header (inside the iframe) don’t work as they should, at least on my environment.

The links seem to be working fine for me so far. Maybe it’s a difference in our themes?

I’ve looked at the instance available by the link you provided. When I trying to navigate from the HTML galley page by the links in the header, e.g., by pressing archives or the current link, the actual page loads but URL stays the same. I’d move anything except the HTML galley itself out from the iframe.

I mean, I would avoid including the parts of the site markup, like header or footer, inside the HTML galley file, so they are displayed inside the iframe on the front-end, as per your example.

Oh, I see! I’m not sure how I would display the site header, footer, and the sidebar without including the site markup in the html galley file. I know I could upload my own CSS file, but I’d still need the content somewhere? I think I’ve cobbled together a solution. I’ve added a target="_parent" attribute to all of my external hyperlinks which seems to do the trick. Admittedly, this might be a clunky solution. If you have a more elegant one, I’m happy for the advice! My skill level is somewhere around “knows just enough to be dangerous.” :slight_smile:

It’s possible to create a child theme and override HTML galley template.

great data! always solving things, thanks for sharing solutions