[Resolved!] OJS 3.1.2. Custom Styling: Using Template Variable Modifier Vs. Less?

Hi Everyone,

I have created a child theme and currently trying to override a template file. I was reading through smarty template’s way of using variable modifiers and wanted to add custom styling to one part of my template. I’m trying to truncate the text of the $description variable using the variable modifier “truncate”. Unfortunately the text is not truncated even after adding the modifier. Is it better practice to be styling it with .less instead? Thank you for reading and your help!

indexSite.tpl file

{**
{if $about}
	<div class="about_site">
		{$about|nl2br}
	</div>
{/if}

<div class="journals">
	<div class="page-header">
		<h2>
			{translate key="journal.journals"}
		</h2>
	</div>

	{if !count($journals)}
		<div class="no_journals">
			{translate key="site.noJournals"}
		</div>

	{else}
		<ul class="media-list">
			{iterate from=journals item=journal}
				{capture assign="url"}{url journal=$journal->getPath()}{/capture}
				{assign var="thumb" value=$journal->getLocalizedSetting('journalThumbnail')}
				{assign var="description" value=$journal->getLocalizedDescription()}
				<li class="media">
					{if $thumb}
						<div class="media-left">
							<a href="{$url|escape}">
								<img class="media-object" src="{$journalFilesPath}{$journal->getId()}/{$thumb.uploadName|escape:"url"}"{if $thumb.altText} alt="{$thumb.altText|escape}"{/if}>
							</a>
						</div>
					{/if}

					<div class="media-body">
						<h3 class="media-heading">
							<a href="{$url|escape}" rel="bookmark">
								{$journal->getLocalizedName()}
							</a>
						</h3>
						{if $description}
							<div class="description">
					TRYING TO MODIFY THIS >>>>>>	{$description|strip_tags|nl2br|truncate:300:"..."}
							</div>
						{/if}
						<ul class="nav nav-pills">
							<li class="view">
								<a href="{$url|escape}">
									{translate key="site.journalView"}
								</a>
							</li>
							<li class="current">
								<a href="{url|escape journal=$journal->getPath() page="issue" op="current"}">
									{translate key="site.journalCurrent"}
								</a>
							</li>
						</ul>
					</div>
				</li>
			{/iterate}
		</ul>
	{/if}
</div>

Hi @wangra,

If you’ve added the truncate modifier but you’re not seeing any changes when you load the page, it’s possible that your file permissions in cache/t_compile are set so that OJS can’t modify the files there. But yes, I would generally recommend truncating etc. in less and/or CSS rather than server-side – that makes it possible, for example, to have truncation that’s layout-savvy rather than fixed to a hard character limit.

Regards,
Alec Smecher
Public Knowledge Project Team

1 Like

Hi @asmecher,

Thank you for your reply, I have changed permission on the cache/t_compile to ensure they care modifiable and unfortunately truncate still does not apply the changes. I just did a bit of experimenting by removing the $description variable and the reference to $description altogether however, it’s still displaying content. I feel something might be off, do you think there’s anywhere else I can look? I checked the php_errors.log and nothing seems amiss. Thank you for reading.

Section I removed:

{if $description}
						<div class="description">
		{$description|strip_tags|nl2br|truncate:300:"..."}
						</div>
					{/if}

Hi @wangra,

In that case, I suspect OJS isn’t looking at your custom template at all. Are you creating a new custom plugin from scratch? If so, you probably need to install the plugin’s version information into your database before it’ll behave as expected – you can do this using the lib/pkp/tools/installPluginVersion.php tool.

Regards,
Alec Smecher
Public Knowledge Project Team

Hi @wangra,

Also, you may run into this issue: https://github.com/pkp/pkp-lib/issues/4054
There is a reference to a merged PR at the end. This can be relevant if you are creating a child theme from any other theme besides the Default.

1 Like

Hi @asmecher & @Vitaliy

I have to thank you for your help and patience, I feel rather silly now seeing my mistake :flushed:, I had placed my indexSite.tpl file in the wrong folder! I didn’t place it in the pages folder! I think I have been staring at tpl files for too long. Thank you for your help! :wink:

Regards,
Rachel

1 Like