Jump to content

Theme customization: how to limit the number of tags / categories displayed for a video


Recommended Posts

When grabbing content from other sites it is possible that number of tags or categories for a specific content will be quite high, so that rendering them all will look bad for design. In this case it is very easy to fix theme templates to list only first N tags or categories and skip the rest.

The same approach works for both videos and albums. For videos you should edit Website UI -> Pages -> View Video page -> video_view block template. For albums it will be Website UI -> Pages -> View Album page -> album_view block template.

Both templates have the following foreach constructs to render list of tags and categories:

{{foreach item="item" from=$data.tags}}
   <a ...>{{$item.tag}}</a>
{{/foreach}}

 

{{foreach item="item" from=$data.categories}}
   <a ...>{{$item.title}}</a>
{{/foreach}}

 

Render only the maximum possible number of items and skip the rest of them

Add name="list" attribute to foreach construct in order to access list properties. If you want to display the first 10 items, wrap <a> tag with this condition: {{if $smarty.foreach.list.iteration<=10}}...{{/if}}:

{{foreach item="item" from=$data.tags name="list"}}
   {{if $smarty.foreach.list.iteration<=10}}
   <a ...>{{$item.tag}}</a>
   {{/if}}
{{/foreach}}

 

Change 10 to 5 in order to limit list rendering to 5 items:

{{foreach item="item" from=$data.categories name="list"}}
   {{if $smarty.foreach.list.iteration<=5}}
   <a ...>{{$item.title}}</a>
   {{/if}}
{{/foreach}}

 

That's it!

WARNING: please make sure you do not forget the closing {{/if}} tag.

 

Hide the rest of items and render "More..." button to display them on click

Add name="list" attribute to foreach construct in order to access list properties. If you want to display the first 10 items, add {{if $smarty.foreach.list.iteration>10}}style="display: none"{{/if}} block to A tag inside the iteration plus add a block after {{foreach}} iterator to render "More..." button:

{{foreach item="item" from=$data.tags name="list"}}
   <a {{if $smarty.foreach.list.iteration>10}}style="display: none"{{/if}} ...>{{$item.tag}}</a>
{{/foreach}}
{{if count($data.tags)>10}}
   <a onclick="$(this).parents('.item').find('a').css({'display': ''}); $(this).css({'display': 'none'});">More...</a>
{{/if}}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...