Got a HTTP 500 after turning off HTML Article Galley

Describe the issue or problem
The deployed OJS now throws a HTTP 500 after a user turned off HTML Article Galley. I tried turning the same plugin off in my local copy and it still works fine. The user said that the theme reverted back to the default theme as well. I found out the settings.xml inside InlineHtmlGallery doesn’t really do anything, it’s always set to true even if you turn off “HTML Article Galley”.

Steps I took leading up to the issue

  1. User turned off HTML Article Galley

What application are you using?
OJS 3.3.0.11

Got an update from our IT and they found this error:

PHP Warning: require_once(/var/vhosts/irjiest/ojs/plugins/generic/htmlArticleGalley/HtmlArticleGalleyPlugin.inc.php): failed to open stream: No such file or directory in /var/vhosts/irjiest/ojs/lib/pkp/includes/functions.inc.php on line 25

which is quite weird. So I copied that directory from my local copy of our OJS to the deployed one and it fixed the issue. Now our deployed OJS is “working” again. But we got a new issue, the header is broken, like the CSS got broken or something

After some debugging, I think I found the cause of my issue. Somehow, some header related classes wasn’t replaced with the pkp- classes, and I think some pkp related elements are missing as well. Also, some files were missing on our deployed OJS like some plugins were missing so I had to copy those from my local copy. Should that be the expected behavior of toggling HTML Article Galley? Which file/s are controlling those class changing for the header? Here’s what the compiled HTML looks like:

<header class="navbar navbar-default" id="headerNavigationContainer" role="banner">
	<div class="container-bg">
		<div class="container-fluid">
			<div class="row">
				<nav aria-label="User Navigation">
					<ul id="navigationUser" class="nav nav-pills tab-list pull-right loggedIn">
						<li class=" menu-item-82">
							<a href="https://ojs.our-domain.com/index.php/JOURNAL/login/signOut">
								Logout
							</a>
						</li>
					</ul>
				</nav>
			</div><!-- .row -->
		</div><!-- .container-fluid -->

		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>

				<div class="site-name">
					<a href="https://ojs.batstate-u.edu.ph/index.php/index" class="navbar-brand">International Research Journal on Innovations in Engineering, Science and Technology</a>
				</div>
				
			</div>
			
			<nav id="nav-menu" class="navbar-collapse collapse" aria-label="Site Navigation">
				<ul id="main-navigation" class="nav navbar-nav ">
					<li class=" menu-item-83">
						<a href="https://ojs.our-domain.com/index.php/JOURNAL/issue/current">
							Current
						</a>
					</li>
					<li class=" menu-item-86 dropdown">
						<a href="https://ojs.our-domain.com/index.php/JOURNAL/about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
							About
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu ">
							<i class=" menu-item-87">
								<a href="https://ojs.our-domain.com/index.php/JOURNAL/about">
									About the Journal
								</a>
							</li>
							<li class=" menu-item-101">
								<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/editorialTeam">
									Editorial Team
								</a>
							</li>
							<li class=" menu-item-88">
								<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/submissions">
									ubmissions
								</a>
							</li>
							<li class=" menu-item-90">
								<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/privacy">
									Privacy Statement
								</a>
							</li>
							<li class=" menu-item-91">
								<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/contact">
									Contact
								</a>
							</li>
						</ul>
					</li>
					<li class=" menu-item-84">
						<a href="https://ojs.our-domain.com/index.php/JOURNAL/issue/archive">
							Archives
						</a>
					</li>
					<li class=" menu-item-85">
						<a href="https://ojs.our-domain.com/index.php/JOURNAL/announcement">
							Announcements
						</a>
					</li>
				</ul>
				<div class="pull-md-right">
					<form class="navbar-form navbar-left" role="search" method="post" action="https://ojs.our-domain.com/index.php/JOURNAL/search/search">
						<div class="form-group">
							<input class="form-control" name="query" value="" type="text" aria-label="Search Query" placeholder="">
						</div>
					<button type="submit" class="btn btn-default"><i class="material-icons">Search</i></button>
					</form>
				</div>
			</nav>
		</div><!-- .pkp_head_wrapper -->
	</div>
</header>

Got some details from the user, they said that they installed some themes from the plugin gallery before the issue. Right now, the header looks ok-ish. It looks like some CSS is affecting it now, but the color isn’t completely applied to the background of pkp_head_wrapper.

The header looks like this now

Here’s what the compiled header looks like of the deployed OJS:

<headernavigationcontainer id="headerNavigationContainer" role="banner">
	<nav class="cmp_skip_to_content" aria-label="Jump to content links">
		<a href="#pkp_content_main">Skip to main content</a>
		<a href="#siteNav">Skip to main navigation menu</a>
			<a href="#pkp_content_footer">Skip to site footer</a>
	</nav>

	<div class="pkp_head_wrapper" style="background: #d51017;">

		<div class="pkp_site_name_wrapper">
			<button class="pkp_site_nav_toggle">
				<span>Open Menu</span>
			</button>
			<div class="pkp_site_name">
				<a href="https://ojs.our-domain.com/index.php/JOURNAL/index" class="is_text">
					International Research Journal on Innovations in Engineering, Science and Technology
				</a>
			</div>
		</div>
					
		<nav class="pkp_site_nav_menu" aria-label="Site Navigation">
			<a id="siteNav"></a>
			<div class="pkp_navigation_primary_row">
				<div class="pkp_navigation_primary_wrapper">
					<ul id="navigationPrimary" class="pkp_navigation_primary pkp_nav_list">
						<li class="">
							<a href="https://ojs.our-domain.com/index.php/JOURNAL/issue/current">
								Current
							</a>
						</li>
						<li class="">
							<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="pkpDropdown0">
								About
							</a>
							<ul class="dropdown-menu" aria-labelledby="pkpDropdown0">
								<li class="">
									<a href="https://ojs.our-domain.com/index.php/JOURNAL/about">
										About the Journal
									</a>
								</li>
								<li class="">
									<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/editorialTeam">
										Editorial Team
									</a>
								</li>
								<li class="">
									<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/submissions">
										Submissions
									</a>
								</li>
								<li class="">
									<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/privacy">
										Privacy Statement
									</a>
								</li>
								<li class="">
									<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/contact">
										Contact
									</a>
								</li>
							</ul>
						</li>
						<li class="">
							<a href="https://ojs.our-domain.com/index.php/JOURNAL/issue/archive">
								Archives
							</a>
						</li>
						<li class="">
							<a href="https://ojs.our-domain.com/index.php/JOURNAL/announcement">
								Announcements
							</a>
						</li>
					</ul>

					<div class="pkp_navigation_search_wrapper">
						<a href="https://ojs.our-domain.com/index.php/index/search" class="pkp_search pkp_search_desktop">
							<span class="fa fa-search" aria-hidden="true"></span>
							Search
						</a>
					</div>
				</div>
			</div>
			<div class="pkp_navigation_user_wrapper" id="navigationUserWrapper">
				<ul id="navigationUser" class="pkp_navigation_user pkp_nav_list">
					<li class="profile">
						<a href="https://ojs.our-domain.com/index.php/JOURNAL/user/register">
							Register
						</a>
					</li>
					<li class="profile">
						<a href="https://ojs.our-domain.com/index.php/JOURNAL/login">
							Login
						</a>
					</li>
				</ul>
			</div>
		</nav>
	</div><!-- .pkp_head_wrapper -->
	<!-- .pkp_structure_head -->

	<div class="pkp_structure_content has_sidebar">
		<div class="pkp_structure_main" role="main">
			<a id="pkp_content_main"></a>

		<div class="page page_login">
			<nav class="cmp_breadcrumbs" role="navigation" aria-label="You are here:">
				<ol>
					<li>
						<a href="https://ojs.our-domain.com/index.php/JOURNAL/index">
							Home
						</a>
						<span class="separator">/</span>
					</li>
					<li class="current">
						<span aria-current="page">
							Login
						</span>
					</li>
				</ol>
			</nav>

			<h1>
				Login
			</h1>
			
			<form class="cmp_form cmp_form login" id="login" method="post" action="https://ojs.our-domain.com/index.php/JOURNAL/login/signIn">
				<input type="hidden" name="csrfToken" value="b987be48639ab2895ffd29027c947c2a">
				<input type="hidden" name="source" value="">

				<fieldset class="fields">
					<legend class="pkp_screen_reader">Login</legend>
					<div class="username">
						<label>
							<span class="label">
								Username
								<span class="required" aria-hidden="true">*</span>
								<span class="pkp_screen_reader">
									Required
								</span>
							</span>
							<input type="text" name="username" id="username" value="rmanalo" maxlength="32" required="" aria-required="true">
						</label>
					</div>
					<div class="password">
						<label>
							<span class="label">
								Password
								<span class="required" aria-hidden="true">*</span>
								<span class="pkp_screen_reader">
									Required
								</span>
							</span>
							<input type="password" name="password" id="password" value="" password="true" maxlength="32" required="" aria-required="true">
							<a href="https://ojs.our-domain.com/index.php/JOURNAL/login/lostPassword">
								Forgot your password?
							</a>
						</label>
					</div>
					<div class="remember checkbox">
						<label>
							<input type="checkbox" name="remember" id="remember" value="1" checked="$remember">
							<span class="label">
								Keep me logged in
							</span>
						</label>
					</div>
					<div class="buttons">
						<button class="submit" type="submit">
							Login
						</button>

						<a href="https://ojs.our-domain.com/index.php/JOURNAL/user/register?source=" class="register">
							Register
						</a>
					</div>
				</fieldset>
			</form>
		</div><!-- .page -->
	</div><!-- pkp_structure_main -->

	<div class="pkp_structure_sidebar left" role="complementary" aria-label="Sidebar">
					 
	<div class="pkp_block block_information">
		<h2 class="title">Information</h2>
		<div class="content">
			<ul>
				<li>
					<a href="https://ojs.our-domain.com/index.php/JOURNAL/information/readers">
						For Readers
					</a>
				</li>
				<li>
					<a href="https://ojs.our-domain.com/index.php/JOURNAL/information/authors">
						For Authors
					</a>
				</li>
				<li>
					<a href="https://ojs.our-domain.com/index.php/JOURNAL/information/librarians">
						For Librarians
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="pkp_block block_Keywordcloud">
		<h2 class="title">Keywords</h2>
		<div class="content" id="wordcloud"><svg viewBox="0 0 300 200" width="100%"><g transform="translate(150,100)scale(1)"><text class="keyword" text-anchor="middle" transform="translate(-29,33)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">biomass density</text><text class="keyword" text-anchor="middle" transform="translate(-58,-2)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(227, 119, 194); cursor: pointer; opacity: 0.7;">lactobacillus casei</text><text class="keyword" text-anchor="middle" transform="translate(-110,-4)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">escherichia coli atcc 25922</text><text class="keyword" text-anchor="middle" transform="translate(65,48)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(227, 119, 194); cursor: pointer; opacity: 0.7;">cell-free supernatant</text><text class="keyword" text-anchor="middle" transform="translate(42,5)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">bacteriostatic</text><text class="keyword" text-anchor="middle" transform="translate(-88,-12)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">f-test</text><text class="keyword" text-anchor="middle" transform="translate(12,-44)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(227, 119, 194); cursor: pointer; opacity: 0.7;">bartlett’s test</text><text class="keyword" text-anchor="middle" transform="translate(-130,13)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">relative plant health</text><text class="keyword" text-anchor="middle" transform="translate(-56,-57)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">image analysis</text><text class="keyword" text-anchor="middle" transform="translate(82,20)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(214, 39, 40); cursor: pointer; opacity: 0.7;">leaf color</text><text class="keyword" text-anchor="middle" transform="translate(44,-27)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">particulate</text><text class="keyword" text-anchor="middle" transform="translate(86,-29)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">village-level</text><text class="keyword" text-anchor="middle" transform="translate(75,-64)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(44, 160, 44); cursor: pointer; opacity: 0.7;">potato grader</text><text class="keyword" text-anchor="middle" transform="translate(23,43)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(44, 160, 44); cursor: pointer; opacity: 0.7;">premium price</text><text class="keyword" text-anchor="middle" transform="translate(12,56)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(148, 103, 189); cursor: pointer; opacity: 0.7;">laborious</text><text class="keyword" text-anchor="middle" transform="translate(100,-19)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">yield</text><text class="keyword" text-anchor="middle" transform="translate(132,-25)rotate(-90)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">pectin</text><text class="keyword" text-anchor="middle" transform="translate(26,81)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(127, 127, 127); cursor: pointer; opacity: 0.7;">optimization</text><text class="keyword" text-anchor="middle" transform="translate(-73,56)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(255, 127, 14); cursor: pointer; opacity: 0.7;">extraction</text><text class="keyword" text-anchor="middle" transform="translate(-77,-62)rotate(-30)" style="font-size: 16px; font-family: serif; fill: rgb(255, 127, 14); cursor: pointer; opacity: 0.7;">vitamins</text><text class="keyword" text-anchor="middle" transform="translate(-2,-52)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">metabolism</text><text class="keyword" text-anchor="middle" transform="translate(-47,13)rotate(-60)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">ocr</text><text class="keyword" text-anchor="middle" transform="translate(-83,-83)rotate(0)" style="font-size: 16px; font-family: serif; fill: rgb(23, 190, 207); cursor: pointer; opacity: 0.7;">visser</text><text class="keyword" text-anchor="middle" transform="translate(81,43)rotate(30)" style="font-size: 16px; font-family: serif; fill: rgb(31, 119, 180); cursor: pointer; opacity: 0.7;">hots</text></g></svg></div>

		<script>
			function randomColor() {
				var cores = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
				return cores[Math.floor(Math.random()*cores.length)];
			}

			document.addEventListener("DOMContentLoaded", function() {
				var keywords = [{"text":"mango peels, naoh pretreatment, delignification, reducing sugar, bioethanol production","size":1},{"text":"biomass density","size":1},{"text":"lactobacillus casei","size":1},{"text":"escherichia coli atcc 25922","size":1},{"text":"cell-free supernatant","size":1},{"text":"bacteriostatic","size":1},{"text":"f-test","size":1},{"text":"bartlett\u2019s test","size":1},{"text":"relative plant health","size":1},{"text":"statistical model","size":1},{"text":"image analysis","size":1},{"text":"leaf color","size":1},{"text":"flexural strength","size":1},{"text":"composite lamina","size":1},{"text":"particulate","size":1},{"text":"village-level","size":1},{"text":"regional processing","size":1},{"text":"potato grader","size":1},{"text":"premium price","size":1},{"text":"manual grading","size":1},{"text":"laborious","size":1},{"text":"pressure drop, temperature drop, programming language, pipe size, acu","size":1},{"text":"yield","size":1},{"text":"pectin","size":1},{"text":"optimization","size":1},{"text":"extraction","size":1},{"text":"bilimbi","size":1},{"text":"vitamins","size":1},{"text":"metabolism","size":1},{"text":"5-methyltetrahydrofolic acid","size":1},{"text":"recommended dietary allowance (rda)","size":1},{"text":"ocr","size":1},{"text":"binarization","size":1},{"text":"adsorption, air pollution, exhaust filter, natural zeolite","size":1},{"text":"single-well","size":1},{"text":"civil engineering","size":1},{"text":"fibre composites","size":1},{"text":"sandwich structures","size":1},{"text":"visser","size":1},{"text":"science education","size":1},{"text":"science laboratory","size":1},{"text":"hots","size":1},{"text":"germination percentage","size":1},{"text":"sowing depth","size":1},{"text":"soil moisture","size":1},{"text":"seed coating","size":1},{"text":"hydraulic barrier","size":1},{"text":"five-well","size":1},{"text":"three-well","size":1},{"text":"groundwater table depth","size":1}];
				var totalWeight = 0;
				var width = 300;
				var height = 200;
				var transitionDuration = 200;	
				var length_keywords = keywords.length;
				var layout = d3.layout.cloud();

				layout.size([width, height])
					.words(keywords)
					.fontSize(function(d)
					{
						return fontSize(+d.size);
					})
					.on('end', draw);
				
				var svg = d3.select("#wordcloud").append("svg")
					.attr("viewBox", "0 0 " + width + " " + height)	
					.attr("width", '100%');		
				
				function update() {
					var words = layout.words();
					fontSize = d3.scaleLinear().range([16, 34]);
					if (words.length) {
						fontSize.domain([+words[words.length - 1].size || 1, +words[0].size]);
					}
				}
				
				keywords.forEach(function(item,index){totalWeight += item.size;});

				update();

				function draw(words, bounds) {
					var w = layout.size()[0],
						h = layout.size()[1];

					scaling = bounds
						? Math.min(
							w / Math.abs(bounds[1].x - w / 2),
							w / Math.abs(bounds[0].x - w / 2),
							h / Math.abs(bounds[1].y - h / 2),
							h / Math.abs(bounds[0].y - h / 2),
						) / 2
						: 1;

					svg
					.append("g")
					.attr(
						"transform",
						"translate(" + [w >> 1, h >> 1] + ")scale(" + scaling + ")",
					)
					.selectAll("text")
						.data(words)
					.enter().append("text")
						.style("font-size", function(d) { return d.size + "px"; })
						.style("font-family", 'serif')
						.style("fill", randomColor)
						.style('cursor', 'pointer')
						.style('opacity', 0.7)
						.attr('class', 'keyword')
						.attr("text-anchor", "middle")
						.attr("transform", function(d) {
							return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
						}) 
						.text(function(d) { return d.text; })
						.on("click", function(d, i){
							window.location = "https://ojs.our-domain.com/index.php/index/search?query=QUERY_SLUG".replace(/QUERY_SLUG/, encodeURIComponent(''+d.text+''));
						})
						.on("mouseover", function(d, i) {
							d3.select(this).transition()
								.duration(transitionDuration)
								.style('font-size',function(d) { return (d.size + 3) + "px"; })
								.style('opacity', 1);
						})
						.on("mouseout", function(d, i) {
							d3.select(this).transition()
								.duration(transitionDuration)
								.style('font-size',function(d) { return d.size + "px"; })
								.style('opacity', 0.7);
						})
						.on('resize', function() { update() });
				}

				layout.start();

			});
		</script>
	</div>
	<div class="pkp_block block_developed_by">
		<h2 class="pkp_screen_reader">
			Developed By
		</h2>

		<div class="content">
			<a href="http://pkp.sfu.ca/ojs/">
				Open Journal Systems
			</a>
		</div>
	</div>
	<div class="pkp_block block_make_submission">
		<h2 class="pkp_screen_reader">
			Make a Submission
		</h2>

		<div class="content">
			<a class="block_make_submission_link" href="https://ojs.our-domain.com/index.php/JOURNAL/about/submissions">
				Make a Submission
			</a>
		</div>
	</div>

</div><!-- pkp_sidebar.left -->
</div><!-- pkp_structure_content -->

	<div class="pkp_structure_footer_wrapper" role="contentinfo">
		<a id="pkp_content_footer"></a>

		<div class="pkp_structure_footer">

			<div class="pkp_brand_footer" role="complementary">
				<a href="https://ojs.our-domain.com/index.php/JOURNAL/about/aboutThisPublishingSystem">
					<img alt="More information about the publishing system, Platform and Workflow by OJS/PKP." src="https://ojs.our-domain.com/templates/images/ojs_brand.png">
				</a>
			</div>
		</div>
	</div><!-- pkp_structure_footer_wrapper -->

</headernavigationcontainer>

What code should be processing headernavigationcontainer?

Hi @chai_blew,

I think this must be in local modifications to your installation, or a custom theme – there is no headernavigationcontainer element in the OJS codebase, or any of the themes I’m aware of. But look in lib/pkp/templates/frontend/components/header.tpl, or templates/frontend/components/header.tpl in your theme directory, to see if that’s where it’s coming from.

Regards,
Alec Smecher
Public Knowledge Project Team

It is in lib/pkp/…header.tpl, and I don’t remember fiddling with it when I modified some parts of our OJS

Hi @chai_blew,

That’s been modified. Compare it with the 3.3.0-11 version:

Regards,
Alec Smecher
Public Knowledge Project Team

That’s weird. My local copy have the same code but it’s working fine

This topic was automatically closed after 12 days. New replies are no longer allowed.