CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

NEWS MODULE - different output based on category

https://forum.cmsmadesimple.org/viewtopic.php?t=84048

Page 1 of 2

NEWS MODULE - different output based on category

Posted: Tue May 07, 2024 7:28 am
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

Re: NEWS MODULE - different output based on category

Posted: Tue May 07, 2024 7:57 am
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...)?

Re: NEWS MODULE - different output based on category

Posted: Tue May 07, 2024 8:42 am
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

Re: NEWS MODULE - different output based on category

Posted: Tue May 07, 2024 10:46 am
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}

Re: NEWS MODULE - different output based on category

Posted: Tue May 07, 2024 11:23 am
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

Re: NEWS MODULE - different output based on category

Posted: Tue May 07, 2024 11:53 am
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 -->

Re: NEWS MODULE - different output based on category

Posted: Tue May 07, 2024 1:20 pm
by velden

Code: Select all

{if $entry->category == 'PressLeft'} ... {else} ... {/if}

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

Posted: Tue May 07, 2024 1:46 pm
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

Re: NEWS MODULE - different output based on category

Posted: Wed May 08, 2024 8:36 pm
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}

Re: NEWS MODULE - different output based on category

Posted: Thu May 09, 2024 1:48 pm
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!

Re: NEWS MODULE - different output based on category

Posted: Fri May 10, 2024 7:57 am
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.

Re: NEWS MODULE - different output based on category

Posted: Mon May 20, 2024 3:47 pm
by webform
If you just want to make an even/odd layout, you don't need to link your news articles to changing categories. Instead, do this:

Code: Select all

<!-- Start News Display Template -->
{foreach from=$items item=entry name=foo}

	{if $smarty.foreach.foo.iteration is even}
		My Even News Layout Code
	{else}
		My Odd News Layout Code
	{/if}

{/foreach}
See also: https://www.smarty.net/docs/en/language ... oreach.tpl

Re: NEWS MODULE - different output based on category

Posted: Mon May 20, 2024 5:07 pm
by webform
In fact, you could simplify it even more (based on your current layout):

Code: Select all

<!-- Start News Display Template -->
{foreach from=$items item=entry}

	<div class="row{cycle values=' flex-md-row-reverse,'} justify-content-center no-gutters press-black mb-5 mb-lg-0">

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

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

	</div>

{/foreach}

Re: NEWS MODULE - different output based on category

Posted: Thu May 23, 2024 9:53 am
by jakovbak
Hello webform! Thank you for your suggestion. I've been out of town and off grid for awhile and now I'm back so I'll check it out and get back to you with the result. Best regards!

Re: NEWS MODULE - different output based on category

Posted: Thu May 23, 2024 11:31 am
by jakovbak
Hello webform, again!
Everything works like a charm and your solution is exactly what I was looking for! The only difference in output is minor - text block was aligned left or right, depending on the attached category but it really doesn't matter. Everything looks good and works. Maybe later, when I find some spare time, I give a shot and play with text alignment but for now, I'm all good with this!
Thanks again and best regards from Croatia!
jakovbak
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited