Theme: Code Snippets for Dynamic Content

You can pull various pieces of dynamic content into your Tendenci theme template. Before adding the snippets below be sure that your template file has the “load” tag for that module at the top of your page. Example: if you were to add an event feed you would want {% load event_tags %} pasted at the very top of your html doc.

Event Feed

Add {% load event_tags %} to the very top of your html page

Then add the following code snippet where you want to place your event feed:

{% list_events as events_list limit=3 %}
    <ul class="list-unstyled">
       {% for event in events_list %}
   <li><a href="{{ event.get_absolute_url }}"><strong>{% blocktrans with title=event.title %}{{ title }}{% endblocktrans %}</strong><br>
     <em>{{ event.start_dt|date:"F j, Y - P" }}</em>
  </a></li>
       {% empty %}
      {% trans 'Events will be shown here. <a href="/events/add/">Start adding events now!</a>' %}
       {% endfor %}
    </ul>
 {% if event_list %}
      <a href="{% url 'event.search' %}">{% trans 'View more events' %} »</a>
 {% endif %}

Articles Feed

Add {% load article_tags %} to the very top of your html page

Then add the following code snippet where you want to place your articles feed:

{% list_articles as articles_list limit=3 %}
<ul class="list-unstyled">
    {% for article in articles_list %}
    <li>
      <a href="{{ article.get_absolute_url }}"><strong>{{ article.headline }}</strong></a>
       <br>
       <span>
         {% if article.summary %}

         {{ article.summary|striptags|truncatewords:"6"|safe }}
          {% else %}
         {{ article.body|striptags|truncatewords:"6"|safe }}

         {% endif %}
       </span>
   </li>
    {% endfor %}
</ul>

Insert Box

Add {% load box_tags %} to the very top of your html page

Then add the following code snippet where you want to place your box: (The number 13 should be replaced with the number associated with the box you would like to load)

{% box 13 %}

Inside the boxes interface, adding code allows you to add images, add Font-Awesome Icons, and responsive Bootstrap Layouts.

../_images/boxexample.png

Tip

+ Show Added HTML for Layout
../_images/insidebox.png + Show Added HTML Inside Donation Box <> (Left)
+ Show Added CSS

Directories (use with flexslider)

Add {% load directory_tags %} to the very top of your html page

Then add the following code snippet where you want to place your directories:

{% list_directories as directories_list limit=20 tags="sponsor" %}

    <ul class="slides">
       {% for directory in directories_list %}
        <li>
            <a href="{{ directory.website }}">
               <!--<img src="{{ directory.get_logo_url }}" alt="{{ directory.headline }}" class="img-responsive">-->
               <img src="{{ directory.get_logo_url }}" alt="{{ directory.headline }}" class=" img-responsive">
            </a>
        </li>
       {% endfor %}
    </ul>

Jobs Feed

Add {% load job_tags %} to the very top of your html page

Then add the following code snippet where you want to place your jobas:

{% list_jobs as jobs_list limit=3 %}
  {% for job in jobs_list %}
  <h3><a href="{{ job.get_absolute_url }}">{{ job.title }} &raquo;</a></h3>
<p>{{ job.location }}</p>
  {% empty %}
<h4>{% if user.profile.is_superuser %}<a href="/jobs/add/">{Add your first job</a>{% else %}<a href="#">Great New Job</a>{% endif %}</h4>
  <p>Houston: A new job opening is available...</p>
  {% endfor %}

Simple Job Feed Layout

../_images/jobboard.png

Tip

+ Show HTML
+ Show CSS

Photos Feed

Add {% load photo_tags %} to the very top of your html page

Then add the following code snippet where you want to place your photos:

{% list_photos as photos_list limit=6 random=True %}
<ul>
  {% for photo in photos_list %}
  <li><a href="{{ photo.get_absolute_url }}"><img alt="{{ photo.title }}" src="{% photo_image_url photo size=72x66 crop=True %}" /></a></li>
  {% endfor %}
</ul>

Videos Feed

Add {% load video_tags %} to the very top of your html page Also add {% load video_filters %} to the very top of your html page

Then add the following code snippet where you want to place your videos:

<ul id="video-urls">
  {% list_videos as videos_list limit=1 tags="featured"  %}
  {% for video in videos_list %}
  <li>
    <a href="{{ video.get_absolute_url }}">{{ video|video_embed:"294" }}</a>
  </li>
  {% endfor %}
</ul>

News Feed (with Thumbnail Image)

Add {% load news_tags %} to the very top of your html page

Then add the following code snippet where you want to place your news feed:

<!-- begin: news-innerblock -->
    <div class="news-innerblock">
      {% list_news as news_list limit=3 %}
      <ul class="list-unstyled">
         {% for news_item in news_list %}
         <li>

           <div class="col-md-4 col-sm-12 col-xs-12 text-left">
       <!-- news-image -->
           {% if news_item.thumbnail %}
           <a href="{{ news_item.get_absolute_url }}">
             <div class="news-item-thumbnail">
             <img class="img" src="{% image_url news_item.thumbnail %}"
               alt="{{ news_item.headline|striptags|safe }}"
               style="width:100%;height:auto;"/>
             </div>
           </a>
           {% else %}
           <a href="{{ news_item.get_absolute_url }}">
             <div class="news-item-thumbnail-auto">
             <img src="{{ THEME_URL }}/files/quince.jpg"
               style="width:100%;height:auto;"/>
             </div>
           </a>
           {% endif %}
       <!-- end news-image -->

           <a href="{{ news_item.get_absolute_url }}">
            <h3>{% blocktrans with h=news_item.headline %}
              {{ h }}
              {% endblocktrans %}
            </h3>
           </a>
           <br>
            <p>
              {% blocktrans with c=news_item.summary|striptags|safe|truncatewords:"30" %}
              {{ c }}
              {% endblocktrans %}
           </p>
          </div>
         </li>
         {% endfor %}
      </ul>
    </div>
<!--end: news-innerblock-->

Here’s an example of what this snippet can look like:

../_images/newsfeed.png

Tip

HTML and CSS added to the above image:

+ Show Added HTML
+ Show Added CSS