NEWS MODULE - different output based on category Topic is solved

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
jakovbak
Forum Members
Forum Members
Posts: 232
Joined: Thu Dec 13, 2012 2:54 pm

NEWS MODULE - different output based on category

Post by jakovbak »

Hello everyone!
I have a question regarding the use of templates and categories in News module. Is it possible to call different templates for different categories? For example:
- first news summary post appears in following order: photo on the left, text on the right, category is "PressLeft" (I made this template and it works);
- second news summary post should appear like: photo on the right, text on the left, category is "PressRight" (I made this but don't know how to make it work);
- third news summary post is like the 1st one, fourth is like the 2nd one etc...
I'm not that familiar with smarty but from what I have learned about it so far, I thought there must be a way to connect category and template. Here is the example of what I have right now but it's only template based and it worked perfectly until it grew too big:

https://sevenandcounting.studioides.com ... page=press

My idea was to have one template with two different parts with conditional behaviour based on a syntax I'm not able to create ??? :

Code: Select all

<!-- Start News Display Template -->

{foreach from=$items item=entry}*******

	<div class="row justify-content-center no-gutters press-black mb-5 mb-lg-0">

		<div class="col-lg-6">

			{if isset($entry->fields)}
				{foreach from=$entry->fields item='field'}
					<div class="text-center">
						{if $field->type == 'file'}
							{if isset($field->value) && $field->value}
								<img class="img-fluid" src="{$entry->file_location}/{$field->value}"/>
							{/if}
						{elseif $field->type == 'linkedfile'} {* also assume it's an image... *}
							{if !empty($field->value)}
								<img class="img-fluid" src="{file_url file=$field->value}" alt="{$field->value}"/>
							{/if}
						{else}
							
						{/if}
					</div>
				{/foreach}
			{/if}
		</div>

		<div class="col-lg-6">
			<div class="bg-black text-center h-100 project">
				<div class="d-flex h-100">
					<div class="project-text w-100 my-auto text-center text-lg-left">
						{if $entry->summary}
							<h4 class="text-white">
								{$entry->title}
							</h4>
							<p class="mb-0 text-white-50">
								{$entry->summary}
							</p>
							<hr class="d-none d-lg-block mb-0 ml-0">
						{/if}

						{if isset($entry->extra)}
							<div class="NewsSummaryExtra">
								{$entry->extra}
								{cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue}
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>
	</div>

{elseif item=entry category=PressRight}********

	<div class="row justify-content-center no-gutters press-black mb-5 mb-lg-0">

		<div class="col-lg-6">
			<div class="bg-black text-center h-100 project">
				<div class="d-flex h-100">
					<div class="project-text w-100 my-auto text-center text-lg-left">
						{if $entry->summary}
							<h4 class="text-white">
								{$entry->title}
							</h4>
							<p class="mb-0 text-white-50">
								{$entry->summary}
							</p>
							<hr class="d-none d-lg-block mb-0 ml-0">
						{/if}

						{if isset($entry->extra)}
							<div class="NewsSummaryExtra">
								{$entry->extra}
								{cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue}
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-6">

			{if isset($entry->fields)}
				{foreach from=$entry->fields item='field'}
					<div class="text-center">
						{if $field->type == 'file'}
							{if isset($field->value) && $field->value}
								<img class="img-fluid" src="{$entry->file_location}/{$field->value}"/>
							{/if}
						{elseif $field->type == 'linkedfile'} {* also assume it's an image... *}
							{if !empty($field->value)}
								<img class="img-fluid" src="{file_url file=$field->value}" alt="{$field->value}"/>
							{/if}
						{else}
							
						{/if}
					</div>
				{/foreach}
			{/if}
		</div>
	</div>

{/foreach}

<!-- End News Display Template -->
Now, as you probably noticed, there are two syntaxes marked with ******* and they could be the answer but I can't find the way to do so due to my poor smarty knowledge.
The way I see it, the first syntax "{foreach from=$items item=entry}" should have some additional formatting based on category like "{foreach from=$items item=entry category=PressLeft}" while the second one should call for output based on the category "PressRight" - something like {elseif item=entry category=PressRight}.
And that's where I got stuck and can't make it work. But the main question I'm asking is - is it possible to do something like this?

Thank you in advance for suggestions and help!

jakovbak
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3487
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: NEWS MODULE - different output based on category

Post by velden »

Are you sure you want to connect it to a category?
Or better to just switch layout one after the other (left, right, left, right, etc...)?
jakovbak
Forum Members
Forum Members
Posts: 232
Joined: Thu Dec 13, 2012 2:54 pm

Re: NEWS MODULE - different output based on category

Post by jakovbak »

Hello Velden! Your suggestion will do just fine too but I can't figure out how to make it work. This is what I have in my Press content page:

Code: Select all

{news summarytemplate='00_sacb_PRESS_NEWS' category="PressLeft,PressRight"}
I have tried and failed to add the second template and it took me to the conclusion it's not possible unless I define conditions within a single template. But maybe I can't see the tree because of the forrest? :o
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3487
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: NEWS MODULE - different output based on category

Post by velden »

Yes, I think easiest is to do all in one template. You can not have multiple templates in one action.
However, I think it's possible to include templates. But you would only benefit if re-using those templates in other places.

I'm not an layout expert but I guess often some css is used to push/pull content from left to right or vice versa. Then you would have less repetitive code and perhaps could have one or a few conditional statements to determine the div's positions.

something like: {if $entry@index % 2 == 0} then even {else} odd {/if}
jakovbak
Forum Members
Forum Members
Posts: 232
Joined: Thu Dec 13, 2012 2:54 pm

Re: NEWS MODULE - different output based on category

Post by jakovbak »

Yes, I agree on using less repetitive code but i posted that code snippet only to illustrate the general idea. On the other hand, the more I look at it, the more I think it could actually be very useful even if some extra css work is required later. But if that's correct, I think category should be used somewhere in the syntax. Now, this is obviously bulls**t but something like this:

{elseif $category->type == 'PressRight'}

You're far better with smarty than me so you understand what I'm thinking of. I just can't find something similar to work with and tweak it to get what I need. Btw, this is my own project, it's not commercial and I was left to take care of the entire webpage - construction, maintaining, updating... So this case, if solved, it would make my life much easier! ;D
jakovbak
Forum Members
Forum Members
Posts: 232
Joined: Thu Dec 13, 2012 2:54 pm

Re: NEWS MODULE - different output based on category

Post by jakovbak »

This is what I came up with and it produced nothing in output but also didn't broke the page... ;D

Code: Select all

<!-- Start News Display Template -->

{foreach from=$items item=entry}

{if $category == 'PressLeft'}

	<div class="row justify-content-center no-gutters press-black mb-5 mb-lg-0">

		<div class="col-lg-6">

			{if isset($entry->fields)}
				{foreach from=$entry->fields item='field'}
					<div class="text-center">
						{if $field->type == 'file'}
							{if isset($field->value) && $field->value}
								<img class="img-fluid" src="{$entry->file_location}/{$field->value}"/>
							{/if}
						{elseif $field->type == 'linkedfile'} {* also assume it's an image... *}
							{if !empty($field->value)}
								<img class="img-fluid" src="{file_url file=$field->value}" alt="{$field->value}"/>
							{/if}
						{else}
							
						{/if}
					</div>
				{/foreach}
			{/if}
		</div>

		<div class="col-lg-6">
			<div class="bg-black text-center h-100 project">
				<div class="d-flex h-100">
					<div class="project-text w-100 my-auto text-center text-lg-left">
						{if $entry->summary}
							<h4 class="text-white">
								{$entry->title}
							</h4>
							<p class="mb-0 text-white-50">
								{$entry->summary}
							</p>
							<hr class="d-none d-lg-block mb-0 ml-0">
						{/if}

						{if isset($entry->extra)}
							<div class="NewsSummaryExtra">
								{$entry->extra}
								{cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue}
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>
	</div>

{elseif $category == 'PressRight'}

	<div class="row justify-content-center no-gutters press-black mb-5 mb-lg-0">

		<div class="col-lg-6">
			<div class="bg-black text-center h-100 project">
				<div class="d-flex h-100">
					<div class="project-text w-100 my-auto text-center text-lg-left">
						{if $entry->summary}
							<h4 class="text-white">
								{$entry->title}
							</h4>
							<p class="mb-0 text-white-50">
								{$entry->summary}
							</p>
							<hr class="d-none d-lg-block mb-0 ml-0">
						{/if}

						{if isset($entry->extra)}
							<div class="NewsSummaryExtra">
								{$entry->extra}
								{cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue}
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-6">

			{if isset($entry->fields)}
				{foreach from=$entry->fields item='field'}
					<div class="text-center">
						{if $field->type == 'file'}
							{if isset($field->value) && $field->value}
								<img class="img-fluid" src="{$entry->file_location}/{$field->value}"/>
							{/if}
						{elseif $field->type == 'linkedfile'} {* also assume it's an image... *}
							{if !empty($field->value)}
								<img class="img-fluid" src="{file_url file=$field->value}" alt="{$field->value}"/>
							{/if}
						{else}
							
						{/if}
					</div>
				{/foreach}
			{/if}
		</div>
	</div>

{/if}

{/foreach}

<!-- End News Display Template -->
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3487
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: NEWS MODULE - different output based on category

Post by velden »

Code: Select all

{if $entry->category == 'PressLeft'} ... {else} ... {/if}
jakovbak
Forum Members
Forum Members
Posts: 232
Joined: Thu Dec 13, 2012 2:54 pm

[SOLVED!] Re: NEWS MODULE - different output based on category

Post by jakovbak »

This works! Not the most elegant solution but it works!

Code: Select all

<!-- Start News Display Template -->

{foreach from=$items item=entry}

	{if $entry->category == 'PressLeft'}

		<div class="row justify-content-center no-gutters press-black mb-5 mb-lg-0">

			<div class="col-lg-6">

				{if isset($entry->fields)}
					{foreach from=$entry->fields item='field'}
						<div class="text-center">
							{if $field->type == 'file'}
								{if isset($field->value) && $field->value}
									<img class="img-fluid" src="{$entry->file_location}/{$field->value}"/>
								{/if}
							{elseif $field->type == 'linkedfile'} {* also assume it's an image... *}
								{if !empty($field->value)}
									<img class="img-fluid" src="{file_url file=$field->value}" alt="{$field->value}"/>
								{/if}
							{else}
								
							{/if}
						</div>
					{/foreach}
				{/if}
			</div>

			<div class="col-lg-6">
				<div class="bg-black text-center h-100 project">
					<div class="d-flex h-100">
						<div class="project-text w-100 my-auto text-center text-lg-left">
							{if $entry->summary}
								<h4 class="text-white">
									{$entry->title}
								</h4>
								<p class="mb-0 text-white-50">
									{$entry->summary}
								</p>
								<hr class="d-none d-lg-block mb-0 ml-0">
							{/if}

							{if isset($entry->extra)}
								<div class="NewsSummaryExtra">
									{$entry->extra}
									{cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue}
								</div>
							{/if}
						</div>
					</div>
				</div>
			</div>
		</div>

	{elseif $entry->category == 'PressRight'}

		<div class="row justify-content-center no-gutters press-black mb-5 mb-lg-0">

			<div class="col-lg-6">
				<div class="bg-black text-center h-100 project">
					<div class="d-flex h-100">
						<div class="project-text w-100 my-auto text-center text-lg-right">
							{if $entry->summary}
								<h4 class="text-white">
									{$entry->title}
								</h4>
								<p class="mb-0 text-white-50">
									{$entry->summary}
								</p>
								<hr class="d-none d-lg-block mb-0 mr-0">
							{/if}

							{if isset($entry->extra)}
								<div class="NewsSummaryExtra">
									{$entry->extra}
									{cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue}
								</div>
							{/if}
						</div>
					</div>
				</div>
			</div>

			<div class="col-lg-6">

				{if isset($entry->fields)}
					{foreach from=$entry->fields item='field'}
						<div class="text-center">
							{if $field->type == 'file'}
								{if isset($field->value) && $field->value}
									<img class="img-fluid" src="{$entry->file_location}/{$field->value}"/>
								{/if}
							{elseif $field->type == 'linkedfile'} {* also assume it's an image... *}
								{if !empty($field->value)}
									<img class="img-fluid" src="{file_url file=$field->value}" alt="{$field->value}"/>
								{/if}
							{else}
								
							{/if}
						</div>
					{/foreach}
				{/if}
			</div>

		</div>
	{/if}

{/foreach}

<!-- End News Display Template -->
You can check it here: https://sevenandcounting.studioides.com ... press-news

Thank you Veleden and check your PM! ;D
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: NEWS MODULE - different output based on category

Post by Dr.CSS »

Or you could just use the category as a class on your main div...

<div class="row justify-content-center no-gutters press-black mb-5 mb-lg-0 {$entry->category}">

Then CSS would move the images where you want...

.PressLeft img {float: left}
jakovbak
Forum Members
Forum Members
Posts: 232
Joined: Thu Dec 13, 2012 2:54 pm

Re: NEWS MODULE - different output based on category

Post by jakovbak »

Hello Dr.CSS!
I have tried but it took a little bit more than that to achieve the same output. I'll give it a few more tries and get back to you. Hopefully, I'll get to more elegant code!
jakovbak
Forum Members
Forum Members
Posts: 232
Joined: Thu Dec 13, 2012 2:54 pm

Re: NEWS MODULE - different output based on category

Post by jakovbak »

After many tries and fails I came up with the conclusion I'm not up to this task. It takes deeper knowledge of smarty to get more elegant code. However, my impression is it could be done in template itself without altering CSS. But the only solution I came up with is the one I posted earlier, the one with basically doubled code divided by conditional tagging. It works like a charm but the code is a bit long.
Post Reply

Return to “Modules/Add-Ons”