Index Template

The index page (home page) for your theme can contain whatever you want. The most common format for the home page is to show the most recent 4 videos (or featured playlist) as a large feature or slider, along with the most recent 10 videos as a list below it. Other possible elements could include a list of popular videos, a list of recent comments, or a list of videos by category.

One of the most important objects on a Vidcaster video site is the 'item'. An item is simply a video. Throughout a theme, you can show different lists of items and compose the HTML however you want by using item attributes such as summary, headline, pub_date, get_absolute_url, fetch_thumbnail_url, group etc. in this format:


	<ul>
	{% for item in above_fold_list %}
	
							<li>
	
								<a class="thumbnail" href="{{ item.get_absolute_url }}" title="watch {{ item.headline }}"><img src="{% fetch_thumbnail_url item 245 175 %}" alt="video thumbnail for {{ item.headline }}" /><span></span></a>
	
								<h3 class="title"><a href="{{ item.get_absolute_url }}">{{ item.headline }}</a></h3>
	
							</li>
	</ul>
							{% endfor %}

 

The code above is a loop that goes through each item in a list called the 'above_fold_list'. This is a list of your 4 more recent videos, excluding the most recent video, which is called the lead_item. For each item, the thumbnail image will show inside a link that goes directly to the video playback page. Below that is an h3 with a link to the video playback page and the video headline as text.

To get this same information for the most recent video you could do something like this:



	{% if lead_item %}
	
							<div>
	
								<a class="thumbnail" href="{{ lead_item.get_absolute_url }}" title="watch {{ lead_item.headline }}"><img src="{% fetch_thumbnail_url lead_item 245 175 %}" alt="video thumbnail for {{ lead_item.headline }}" /><span></span></a>
	
								<h3 class="title"><a href="{{ lead_item.get_absolute_url }}">{{ lead_item.headline }}</a></h3>
	
							</div>

							{% endif %}

 

Common elements on the index page

  • lead_item – the most recent video.
  • above_fold_list – the most recent 4 videos, excluding the lead_item.
  • below_fold_list – the most recent 10 videos, excluding the lead_item and above_fold_list.
  • latest – a list of the most recent 10 videos.
  • top_viewed_items – a list of the most popular videos.
  • total_items – the number of total videos. This is used to navigate to the first page of the video archive if there are more than 10 videos <a href="/videos/archive/?page=2">View {{ total_items|add:"-10" }} more video{{ total_items|add:"-10"|pluralize }}<a>
  • group – a category that videos can belong to, (i.e. a grouping of items).
  • group_list – a list of all categories that have videos (you must fetch the list {% get_groups as group_list %} before going through the loop).
  • Within the group list, you can also loop through items within each category, for example: {% for item in group.item_set.public_on_site|dictsortreversed:"pub_date"|slice:"6" %}
  • recent_comments_list – a list of recent comments. See example below.

{% if current_site.siteprofile.allow_comments %}
					{% if recent_comments_list %}
					<div id="recent-comments" class="block">
						<div class="block-header">
							<h3>Recent Comments</h3>
						</div>
						<ol>
						{% for comment in recent_comments_list %}
							<li>
								<div class="text">
									<p>{{ comment.comment|truncatewords:17 }}</p>
								</div>
								<div class="meta">
									<img src="{{ comment.get_poster_gravatar_url }}" alt="" />
									<p><span class="author">{{ comment.get_poster_HTML_tag|safe }}</span> said about <span class="video"><a href="{{ comment.item.get_absolute_url }}">{{ comment.item.headline|truncatewords:5 }}</a></span></p>
									<span class="point"></span>
								</div>
							</li>
						{% endfor %}
						</ol>
					</div>
					{% endif %}
					{% endif %}

 

The above code is says – if the current site has comments enabled and there are comments, show a list of recent comments. Each comment has few attributes you can optionally display, such as the gravatar, headline, absolute_url.

Tip: It is good practice to wrap code in if statements to check for the existence of videos, groups, and lists. This will prevent null errors.

Tip: If you're building a theme on a new Vidcaster site, make sure to watch some of your videos in order to populate lists such as most popular and related videos.

Next section →