lektor-website/templates/showcase.html

{% extends "layout.html" %}
{% block title %}Showcase{% endblock %}
{% block outerbody %}
  {% set image = site.get('/showcase').attachments.images.first() %}
  {% if image %}
    <div class="page-banner page-banner-300" style="background-image: url({{ image|url }})"></div>
  {% endif %}
  {{ super() }}
{% endblock %}
{% block body %}
  <h1>Showcase</h1>
  <p>
    Want to see what Lektor is used for?  This should give you a brief overview
    of what projects are built on the basis of Lektor.  We take good care of
    ensuring this list stays up to date by carefully moderating it.
  <p>
    Click any of the showcases to learn a bit more about how it uses Lektor.
  <div class="showcase row">
    {% for project_row in this.children | batch(2) %}
      <div class="row">
        {% for project in project_row %}
          <div class="project col-md-6">
            <a href="{{ project|url }}">
              <h2>{{ project.name }}</h2>
              {% if project.cover_image %}
                {% set image = project.attachments.get(project.cover_image) %}
                <div class="frame">
                  <img src="{{ image.thumbnail(480)|url }}" width="100%" alt="">
                </div>
              {% endif %}
            </a>
          </div>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <p>
    <small>You want your own website on here?  <a
      href="https://github.com/lektor/lektor-website/tree/master/content/showcase">Fork
      the Lektor Website Repository on GitHub</a> to add your own project.
      Make sure to add screenshots and a description about the project.
      The primary screenshot is thumbnailed on this page to 415px wide, and cropped to
      260px tall, and on your site's individual page the larger images are 870px wide.

      We encourage you to add a link to your source code
      so that others can learn from your example.
    </small>
{% endblock %}