LISE instance and vertical tabs problem

[jakovbak]

Hello everyone!
I have a problem with implementing an LISE instance into vertical tabs. Since I have no knowledge of Smarty, I believe that's where the solution lays. But let me start from the beginning...

1) This is how it suppose to look like:
http://autocentarstar.com/index.php?page=test-00

It's all just HTML with some javascript. It is functional thou, but it's hard to maintain. So I have decided to give it a try with LISE module.

2) This is what I have now:
http://autocentarstar.com/index.php?page=test

Menu on the left side is very simple and it works fine. It is "Summary Template" of LISE instance and it looks like this:

Code: Select all

{if $items|@count > 0}
	{foreach from=$items item=item}
		<div class="item">
			<h4 class="tab01">{$item->fielddefs.naslov->value}</h4> {*naslov=title*}
		</div>
	{/foreach}
{/if}

Its call in page template looks like this:

Code: Select all

{LISEtabs category="auto-dijelovi" template_summary="00_acs_vertical_tabs_LISE_summary_TPL" exclude_category="002,003"}

3) THE PROBLEM
The problem I'm trying to solve is in the right area where description and image should appear. This is my "Detail Template" of LISE instance:

Code: Select all

{if !empty($item->fielddefs)}

	<left class="col-lg-8 col-md-8 col-sm-12 col-xs-12 bhoechie-tab">
		{foreach from=$item->fielddefs item=fielddef}
			{if $item->fielddefs.opis->value}
				<h3>{$item->fielddefs.naslov->value}</h3> {*naslov=title*}
				<p>{$item->fielddefs.opis->value}</p> {*opis=description*}
			{/if}
		{/foreach}
	</left>

	<left class="col-lg-4 col-md-4 col-sm-12 col-xs-12 bhoechie-tab">
		{foreach from=$item->fielddefs item=fielddef}
			{if $item->fielddefs.slika->value} {*slika=image*}
				<img class="img-responsive" {CGSmartImage src="{uploads_url}/{$item->fielddefs.slika.value}" filter_resize='w,245' quality='100'} />
			{/if}
		{/foreach}
	</left>

{/if}

And this is the call for "Detail Template" in my page template:

Code: Select all

{LISEtabs category="auto-dijelovi" template_detail="00_acs_vertical_tabs_LISE_detail_TPL" exclude_category="002,003"}

[*Note: So far I have one main category called "auto-dijelovi" and seven subcategories, from 001 to 007 but for the purpose of this topic they have been cut down to three.]

As you can see, it seems for some reason "Summary Template" is being called on the right too. No description, no image, only title as defined in "Summary Template" (<h4> instead of <h3>).
I've been struggling with this for last few days and whatever I do I just can't move away from this result. It seems like my "Detail Template" doesn't exist at all! Also, I know my summary and detail templates should be written differently so I don't have to use 'exclude_category' but it was the only way for me to deal with it. This kind of code is way above my knowledge. But it's still very weird why my "summary template" is working and "detail template" is not if both were marked as 'default' and names are not misspelled.

If anyone could give me a hint on this one I would be very grateful!

Have a good day and best regards!
Jakovbak

[velden]

Think you shouldn't combine both the detail and the summary template/calls.

Just use summary template and iterate (foreach) it twice; once for the 'menu' and once for the contents.

[jakovbak]

I thought it might be the catch, mixing both templates in practically same place... How to iterate it by myself is a whole different question!
But I'll give it a shot and get back with the result...
Thank you Velden and 'see' you soon!
Jakovbak

[velden]

Summary template something like (UNTESTED):

Code: Select all

{if $items|@count > 0}
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 bhoechie-tab-menu">
 <div class="list-group">
   {foreach from=$items item=item}
  <a href="#" class="list-group-item active text-center">
   <h4 class="tab01">{$item->fielddefs.naslov->value}</h4>
  </a>
  {/foreach}
 </div>
</div>

<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 bhoechie-tab">
{foreach from=$items item=item}
<div class="bhoechie-tab-content{if $item@index == 0} active{/if}">
	<left class="col-lg-8 col-md-8 col-sm-12 col-xs-12 bhoechie-tab">
		<h3>{$item->fielddefs.naslov->value}</h3>
		{$item->fielddefs.opis->value}
	</left>
	<left class="col-lg-4 col-md-4 col-sm-12 col-xs-12 bhoechie-tab">
		{if $item->fielddefs.slika->value} {*slika=image*}
            <img class="img-responsive" {CGSmartImage src="{uploads_url}/{$item->fielddefs.slika.value}" filter_resize='w,245' quality='100'}
		{/if}
	</left>
</div>
{/foreach}
</div>
{/if}

BTW: it seems strange to have a 'naslov' field definitions as I thing the title field is required and always present; {$item->title}

[jakovbak]

Yes it's strange but I did it at the beginning of the process when the idea of how to use LISE instance in this particular case was not completely clear to me. I thought it might be useful in some case. So I left it there but, yes, it can be removed I suppose...
One more thing I don't know how to handle:
You suggested not to mix summary and detail template and it sounds reasonable to me. But I still can't figure out how to call summary template in two different div's and force it to show two different contents?

This is what we get with one template:

http://autocentarstar.com/index.php?page=test

Two unclosed tags were in the template code so this is corrected template:

Code: Select all

{if $items|@count > 0}
	<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 bhoechie-tab-menu">
		<div class="list-group">
			{foreach from=$items item=item}
				<a href="#" class="list-group-item active text-center">
					<h4 class="tab01">{$item->fielddefs.naslov->value}</h4>
				</a>
			{/foreach}
		</div>
	</div>

	<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 bhoechie-tab">
		{foreach from=$items item=item}
			<div class="bhoechie-tab-content{if $item@index == 0} active{/if}">
				<left class="col-lg-8 col-md-8 col-sm-12 col-xs-12 bhoechie-tab">
					<h3>{$item->fielddefs.naslov->value}</h3>
						{$item->fielddefs.opis->value}
				</left>
				<left class="col-lg-4 col-md-4 col-sm-12 col-xs-12 bhoechie-tab">
					{if $item->fielddefs.slika->value} {*slika=image*}
						<img class="img-responsive" {CGSmartImage src="{uploads_url}/{$item->fielddefs.slika.value}" filter_resize='w,245' quality='100'}
					{/if}
				</left>
		{/foreach}
	</div>
{/if}

My summary template was used to get menu items in one div and detail template was used to get article and image in second div.
Now, all I can think of is something like 'exclude_field="naslov"' to make difference in template calls but there is no such parameter so I'm stuck again...
Meanwhile I did some tweaks in my page template but it's still a bit messy and I'm still not sure I would be able to make it work this way. Still trying thou...

[jakovbak]

Getting somewhere! Guess I was too anxious to see your suggestion at work so I did it too fast and imported it completely wrong! Now, just by taking it slow, one step at the time, it makes sense. But only first article has description and none has image. Take a look here:

http://autocentarstar.com/index.php?page=test

Now, while left area where the menu is shows up properly (and works the way it should), there's something definitely wrong with the right side, the content area. If one use developer tools then it's clearly visible that all the articles (description and image fields) are one under another, like subfolders or submenus. Images are hidden for some reason but I believe I'll deal with it later and much easier than with this cascading system of articles.

[Jeff]

That is caused by missing closing tag. We need your current template to verify where the problem is, but here are some problems in your last one.

Code: Select all

{if $item->fielddefs.slika->value} {*slika=image*}
                  <img class="img-responsive" {CGSmartImage src="{uploads_url}/{$item->fielddefs.slika.value}" filter_resize='w,245' quality='100'}
{/if}

<img isn't closed need the />

And the order of elements for your detail foreach are

Code: Select all

<div>
  {foreach}
    <div>
      <left>
        <h3></h3>
      </left>
      <left>
        <img>
      </left>
              <------ There should be a </div> here
  {/foreach}
</div>

[jakovbak]

Tnx Jeff!
I’ve seen there was unclosed image tag and closed it but missing closing div tag was left unnoticed until your remark! Now it looks ok except the images but I believe it’s something about CSS. I’ll check it out and come back with the result. Meanwhile, this is corrected summary template for LISE instance:

Code: Select all

{if $items|@count > 0}
	<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 bhoechie-tab-menu">
		<div class="list-group">
			{foreach from=$items item=item}
				<a href="#" class="list-group-item {if $item@index == 0} active{/if} text-center">
					<h4 class="tab01">{$item->fielddefs.naslov->value}</h4>
				</a>
			{/foreach}
		</div>
	</div>

	<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 bhoechie-tab">
		{foreach from=$items item=item}
			<div class="bhoechie-tab-content{if $item@index == 0} active{/if}">
				<left class="col-lg-8 col-md-8 col-sm-12 col-xs-12 bhoechie-tab">
					<h4 class="tab01">{$item->fielddefs.naslov->value}</h4>
						{$item->fielddefs.opis->value}
				</left>
				<left class="col-lg-4 col-md-4 col-sm-12 col-xs-12 bhoechie-tab">
					{if $item->fielddefs.slika->value} {*slika=image*}
						<img class="img-responsive" {CGSmartImage src="{uploads_url}/{$item->fielddefs.slika.value}" filter_resize='w,245' quality='100'} />
					{/if}
				</left>
			</div>
		{/foreach}
	</div>
{/if}

[jakovbak]

Hmmm... It was not about CSS after all. It was about the path of CGSmartImage. It should be like:

Code: Select all

{CGSmartImage src="{uploads_url}/img/{$item->fielddefs.slika.value}

(/img/ was missing in my original path). But then, another strange moment appeared... The img tag is now closed but it looks like it shouldn't be. Check the enclosed image to see...
If I remove closing, everything still looks ok on my page. But I'm just not sure if it's right and if it won't cause some problems later.

Any ideas about this issue?

[Rolf]

Code: Select all

<img class="img-responsive" {CGSmartImage src="{uploads_url}/{$item->fielddefs.slika.value}" filter_resize='w,245' quality='100'} />

Read CGSI help text, for parameter notag=1

[jakovbak]

Thank you Rolf! Guess I've read it once but never needed to go over it again and forgot about it... I believe I can call this topic SOLVED but I'll leave it open for a few days, just in case.
Tnx each and every one of you on your contribution in solving this case!
Best regards and have great day!!!
Jakovbak

[velden]

While reading help check about src parameter too.

I THING that this would be good too:

Code: Select all

{CGSmartImage src=$item->fielddefs.slika.value filter_resize='w,245' quality='100'}