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.

For more tag references, check out the docs built into your site at: yourdomain/admin/doc/tags/

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>{{ event.title }}</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 %}

Time Display on Event Feed (hide time if all day)

{% if event.all_day %}{{ event.start_dt|date:”F j, Y” }}{% else %}{{ event.start_dt }}{% 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>

Drag and drop photo albums to change the order of display on /photos/. To display photos from the top of your list in your feed - as opposed to the most recently added photos - add this order selection to your code.

{% list_photos as photos_list limit=2 order=’photoset__position’ %}

To pull photos from one or more photo sets, use list_photo_sets template tag. You can either tag your photo set(s):

{% list_photo_sets as photo_sets_list tags="tendencidemo"  %}
<ul>
  {% for photo_set in photo_sets_list %}
  {% for photo in photo_set.get_images %}
  <li><a href="{{ photo.get_absolute_url }}"><img alt="{{ photo.title }}" src="{% photo_image_url photo size=72x66 crop=True %}" /></a></li>
  {% endfor %}
  {% endfor %}
</ul>

Or specify the photo set id as below. (The filters can accept multiple photo sets. For example, filters=”id=1|id=2”.)

{% list_photo_sets as photo_sets_list filters="id=1" %}
<ul>
  {% for photo_set in photo_sets_list %}
  {% for photo in photo_set.get_images %}
  <li><a href="{{ photo.get_absolute_url }}"><img alt="{{ photo.title }}" src="{% photo_image_url photo size=72x66 crop=True %}" /></a></li>
  {% endfor %}
  {% 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="{% static '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

RSS Feed

Add the following code snippet where you want to place your RSS Feed, include only the elements that you can to display on your page. If the RSS feed does not contain the elements you’re calling, they won’t show on the page and may throw an error.

../_images/rssfeed.png 
<!-- begin: subscribe-block -->
     <div class="col-xs-12">
        <h3>Careers</h3>
         <ul class="list-unstyled">{% get_rss "https://example.com" as rss %}
           {% for entry in rss.entries|slice:":4" %}
           <li>
             <p class="rss-title"><a target="_blank" href="{{ entry.link }}">{{ entry.title }}</a><br />
               <span class="date">Posted Date: {{ entry.updated_parsed|rss_date:"F j, Y" }}</span></p>
           </li>
           {% endfor %}
         </ul>
         <a class="read-more" href="/example/">View More</a>
     </div>
     <!-- end: subscribe-block -->

Example 2 shows more of the rss elements that could be included in your site:

{% get_rss "http://rss.nytimes.com/services/xml/rss/nyt/PersonalTech.xml" as rss %}
{% if rss.feed.image %}
    <img src="{{ rss.feed.image.href }}" alt="" />
{% endif %}
{% for entry in rss.entries %}
<div class="row entry-item">
     <div class="col-xs-4 col-md-3">
     {# media image #}
      {% if entry.media_content %}
          {% for media in entry.media_content %}
              {% if media.medium == 'image' %}
              <img src="{{ media.url }}" width="{{ media.width }}" height="{{ media.height }}" alt="" />
              {% endif %}
          {% endfor %}
      {% endif %}
       </div>
      <div class="col-xs-8 col-md-9">
          {# title #}
          <h4 class="entry-title"><a href="{{ entry.link }}">{{entry.title}}</a></h4>
          {# pubdate #}
          <div class="small">Published on: {{entry.published}}</div>
          {# authors #}
          {% if entry.authors %}
              <div class="small">Author{{ entry.authors|pluralize }}:
              {% for author in entry.authors %}
                  {{ author.name }}
            {% endfor %}
              </div>
        {% endif %}
        {# categories #}
        {% if entry.tags %}
              <div class="small">Categories:
              {% for tag in entry.tags %}
                  {% if tag.scheme  %}
                  <a href="{{ tag.scheme }}">{{ tag.term }}</a>
                  {% else  %}
                  {{ tag.term }}
                  {% endif %}
            {% endfor %}
              </div>
        {% endif %}
        {# description #}
        {% if entry.content %}
          {% for content in entry.content %}
              <div>{{ content.value|safe }}</div>
          {% endfor %}
        {% elif entry.summary %}
          <div>{{ entry.summary|safe }}</div>
        {% endif %}
        {# enclosure #}
        {% if entry.links %}
          {% for link in entry.links %}
              {% if link.rel == 'enclosure' %}
              <div>
               <audio controls>
                  <source src="{{ link.href }}" type="{{ link.type }}">
                </audio>
                {{ link.length|filesizeformat }}
                </div>
              {% endif %}
          {% endfor %}
        {% endif %}
      <a href="{{entry.link}}">read more...</a>
   </div>
</div>
{% endfor %}

Tip

Other elements you can include:

{{ entry.enclosure }}
{{ entry.pubdate }}
{{ entry.updateddate }}
{{ entry.author_name }}
{{ entry.author_email}}
{{ entry.author_link }}