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.
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.
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.
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>
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.
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.”