Basic Rotator - Main Index: Category Lists

The below design instructions are for the Basic Rotator theme only. By using these modifications, you agree to these terms (click here)

The theme modifications: 

    • Display a snapshot list of video content available on the site by category, up to 20 videos in each category 

Image and video hosting by TinyPic

Instructions

Make the following modifications in the listed files of your Advanced Editor while on the Basic Rotator Theme. Press 'Save & Publish' after each step. 

1) Add the following code to your CSS file 

.main-page #related-videos {
    padding-left: 0;  
}
 
.main-page h2 {
    font-weight: bold;
    margin-bottom: 15px;
}

2) REPLACE the current code in your Index file with the following code 

{% extends base_template %}
{% load users_tags %}
{% load item_extras %}
{% load sites_extras %}
{% block bodyid %} id="home"{% endblock bodyid %}
{% block google-admanager %}{% endblock google-admanager %}
{% block canonical %}<link rel="canonical" href="http://{{ current_site.domain }}/" />{% endblock canonical %}
{% block intro %}{% endblock intro %}
{% block content %}
            <div class="section-offset">
                {% get_items_by_filters item_list max_items=6 sorting=featured backfill_type=pub_date %}
                {% if item_list %}
                <div class="section rotating-promo">
                    <div class="section-wrap flexslider">
                        <ol class="slides">
                            {% for item in item_list %}
                            <li>
                                <div class="main-column">
                                    <a class="thumbnail" href="{{ item.get_absolute_url }}" title="watch {{ item.headline }}"><img src="{% fetch_thumbnail_url item 640 360 %}" alt="video poster for {{ item.headline }}" /><span></span></a>
                                </div>
                                <div class="sub-column">
                                    {% if item.group %}<p class="group {{ item.group.short_name }}">{{ item.group.get_html_tag|safe }}</p>{% endif %}
                                    <h2><a href="{{ item.get_absolute_url }}">{{ item.headline }}</a></h2>
                                    {% if item.summary %}<p class="summary">{{ item.summary|truncatewords:35 }}</p>{% endif %}
                                </div>
                            </li>
                            {% endfor %}
                        </ol>
                    </div>
                    <div id="flexslider-controls"></div>
                </div>
                {% else %}
                {% if user.is_authenticated %}{% include include_no_videos %}{% endif %}
                {% endif %}
            </div>
            <div class="main-page section">
                <div class="sub-column">
                    <h2>For Employees</h2> <!-- replace text -->
                    <div id="related-videos" class="video-list on">
                    {% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat1 %} <!-- replace group_short_names -->
                    {% if group_list %}
                        <ol>
                            {% for current_item in group_list %}
                            <li>
                            <a class="thumbnail" href="{{ current_item.get_absolute_url }}"><img src="{% fetch_thumbnail_url current_item 120 68 %}" alt="video thumbnail for {{ current_item.headline }}" /><span></span></a>
                            <h4><a href="{{ current_item.get_absolute_url }}">{{ current_item.headline }}</a></h4>
                            </li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                    </div>
                </div>
                <div class="sub-column">
                    <h2>For Supervisors</h2> <!-- replace text -->
                    <div id="related-videos" class="video-list on">
                    {% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat2 %} <!-- replace group_short_names -->
                    {% if group_list %}
                        <ol>
                            {% for current_item in group_list %}
                            <li>
                            <a class="thumbnail" href="{{ current_item.get_absolute_url }}"><img src="{% fetch_thumbnail_url current_item 120 68 %}" alt="video thumbnail for {{ current_item.headline }}" /><span></span></a>
                            <h4><a href="{{ current_item.get_absolute_url }}">{{ current_item.headline }}</a></h4>
                            </li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                    </div>
                </div>
                <div class="sub-column">
                    <h2>For HR & Executives</h2> <!-- replace text -->
                    <div id="related-videos" class="video-list on">
                    {% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat3 %} <!-- replace group_short_names -->
                    {% if group_list %}
                        <ol>
                            {% for current_item in group_list %}
                            <li>
                            <a class="thumbnail" href="{{ current_item.get_absolute_url }}"><img src="{% fetch_thumbnail_url current_item 120 68 %}" alt="video thumbnail for {{ current_item.headline }}" /><span></span></a>
                            <h4><a href="{{ current_item.get_absolute_url }}">{{ current_item.headline }}</a></h4>
                            </li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                    </div>
                </div>
            </div>
{% endblock content %}
{% block page-scripts %}<script src="/media/js/jquery.flexslider-min.js"></script>
<script>//flexslider 
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            controlsContainer: "#flexslider-controls",
            prevText: "&lsaquo;",
            nextText: "&rsaquo;"
        });
    });
</script>{% endblock page-scripts %}

3) Additional Notes

As in the public index change, you'll want to change these values:

  1. Each <h2> on this page should have it's text replaced with whatever titles the end user would like to use.
  2. Replace all instances of group_short_names with the short names of whatever category they want displayed.

{% get_items_by_filters group_list max_items=20 sorting=featured group_short_names=cat1 %} needs to be explained:

  1. max_items: change this to change the total number of videos it will return
  2. group_short_names: they need to change these to each be a specific short name for each category they have. To get the short names, tell them to go to the category page and it's the short string at the end of the URL. They defined this as the short name when they created the category, for instance: http://public-theme-test.vidcaster.com/cat1/ in this case, the short name is cat1
  3. sorting: will sort this according to order of videos in the playlist if you use featured

To make this process easier, we've put in comments next to the things that need to be replaced. Simply search the code for the text "replace" and you'll find all the areas you need to fill in.