This is the second post documenting my step-by-step creation of cloudspotting, a demonstration project built with the Pinax ecosystem. For an introduction to this project please read my first cloudspotting blog post. In this installment I show the ease of adding Pinax applications pinax-likes, pinax-announcements, and pinax-testimonials to cloudspotting. As before, links throughout this text provide git repository source and commit references on GitHub, including goofs I made along the way.

Our Audience

  • Somewhat familiar with Django
  • Unfamiliar with Pinax starter projects
  • Eager to leverage Pinax apps

Adding pinax-likes

The pinax-likes application provides the ability to “like” any object(s) in your project. For cloudspotting I decide users can “like” cloud image collections, embodied in code by the CloudSpotting model.

Following the pinax-likes installation instructions I update settings.py by adding “pinax-likes” to INSTALLED_APPS, adding the pinax-likes authentication backend, and setting PINAX_LIKES_LIKEABLE_MODELS to include the CloudSpotting model. Note the PINAX_LIKES_LIKABLE_MODELS model name format is slightly different from normal imports. Rather than <appname>.models.<modelname>, I only need to specify the app and model names:

PINAX_LIKES_LIKABLE_MODELS = {
    "cloudspotting.CloudSpotting": {},
}

Next I add pinax-likes urls to cloudspotting urlpatterns. Note: all Pinax applications in the latest Pinax release (16.04) use URL namespaces, i.e.

url(r"^likes/", include("pinax.likes.urls", namespace="pinax_likes"))

Finally I update requirements.txt to include the latest version of pinax-likes. (Note: Pinax published new releases of pinax-likes since I built cloudspotting; always use the latest version.)

With the foundation for pinax-likes in place, I update cloudspotting templates as directed by pinax-likes usage directions. The cloud image collection detail page must let the user “like” the collection, so I update cloudspotting_detail.html:

{% load pinax_likes_tags %}
...
<div>
{% likes_widget request.user cloudspotting %}
</div>

For the detail page, template context variable cloudspotting is the cloud image collection being viewed, and the likes_widget template tag produces a clickable link to “like” or “unlike” the object in question.

Similarly, the cloud collection list page should show what collections are “liked” so I update cloudspotting_list.html:

{% load pinax_likes_tags %}
...
{% liked object_list by request.user as liked_list %}
{% for cloudspotting in liked_list %}
<li>
    <a href="{% url "cloudspotting_detail" cloudspotting.pk %}">{{ cloudspotting }}</a>{% if cloudspotting.liked %} (liked){% endif %}
</li>
{% endfor %}

This uses the pinax-likes liked template-tag: if an image collection in the list is liked by any user, the word “liked” appears next to the collection.

Now it’s time to update the development environment, run the server and see what happens.

pip install -r requirements.txt  # install pinax-likes
./manage.py migrate              # create pinax-likes database tables
./manage.py runserver

When I try to “like” a CloudSpotting collection, the result is a 405 error. Pinax contributor Patrick Altman investigates and finds I did not include eldarion-ajax in the cloudspotting site Javascript. One pull request later and likes are working great. Thanks Patrick!

Adding pinax-testimonials

Enabling pinax-testimonials was super easy, and involved just three simple steps:

  1. Add “pinax-testimonials” to the INSTALLED_APPS setting and requirements.txt,
  2. Add testimonial template-tags to a template, and
  3. Run migrations to create the testimonials database tables.

Incorporating pinax-testimonials took just a few minutes, although I did find a templatetag bug. With that issue fixed I add testimonials via the Django admin and they appear on the cloudspotting list page. Sweet!

Adding pinax-announcements

Integration with pinax-announcements was almost as simple as testimonials. As with pinax-testimonials I add “pinax-announcements” to INSTALLED_APPS and requirements.txt. In addition I add pinax.announcements.auth_backends.AnnouncementPermissionsBackend to AUTHENTICATION_BACKENDS. This setting is not required but it does allow non-staff with the correct permissions to manage announcements.

pinax-announcements also requires hooking up urlpatterns with Pinax namespaces, just as with pinax-likes:

url(r"^likes/", include("pinax.likes.urls", namespace="pinax_likes"))

Finally I wire up the cloudspotting list template with pinax_announcements_tags in order to display any active announcements:

{% announcements as announcements_list %}
{% if announcements_list %}
<section>
    <div class="container">
        <h2 class="text-center">{% blocktrans %}Announcements{% endblocktrans %}</h2>


        <div class="announcements">
            {% for announcement in announcements_list %}
                <div class="announcement">
                    <strong>{{ announcement.title }}</strong><br />
                    {{ announcement.content }}
                    {% if announcement.dismiss_url %}
                        <a href="{{ announcement.dismiss_url }}" class="btn ajax" data-method="post" data-replace-closest=".announcement">
                            Clear
                        </a>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

The only issue with this integration was a pinax-announcements documentation HTML snippet was out-of-date, since fixed. In order to test functionality I add announcements via the Django admin and they appear on the cloudspotting list page. Yay!

Wrapping Up

Integrating these three Pinax applications was simple and fast, much easier than I expected. After these integrations were complete I produced a short screencast showing how to obtain, install, and use cloudspotting. The video shows how to add announcements and testimonials via the Django admin, and what they look like on the web page. It also shows the mechanics of “liking” and “unliking” a cloudspotting image collection. This screencast is available with other helpful Pinax Hangout videos.

The current Pinax cloudspotting source code is available in the cloudspotting repository on GitHub.

If you have questions or comments about this post, the cloudspotting project, or Pinax in general, please join our Pinax Slack team and post your thoughts in the #cloudspotting or #general channels. The Pinax community is welcoming and helpful and a great place to get started. My Slack username is grahamullrich. Feel free to ping me using “@grahamullrich” in any Pinax channel.

Inspiration for this project came from one of my favorite books, “The Cloudspotter’s Guide” by Gavin Pretor-Pinney.

Many thanks to Eldarion for supporting this project, and to Anna Ossowski and Patrick Altman for their assistance.

3 Great Talks You Should Check Out at DjangoCon 2016 Eldarion Sponsors Django Girls EuroPython 2016

Want to talk with us about something more custom or have questions?

Get in touch with us