[geany/www.geany.org] f0d830: Add a carousel to the screenshots page

[Enrico Tröger]

Branch:      refs/heads/master
Author:      Enrico Tröger <enrico.troeger at uvena.de>
Committer:   Enrico Tröger <enrico.troeger at uvena.de>
Date:        Sun, 19 May 2019 21:37:00 UTC
Commit:      f0d83081d29eac8cd617e9d366554fbb58418811
             https://github.com/geany/www.geany.org/commit/f0d83081d29eac8cd617e9d366554fbb58418811

Log Message:
-----------
Add a carousel to the screenshots page


Modified Paths:
--------------
    geany/templates/pages/documentation/screenshots.html

Modified: geany/templates/pages/documentation/screenshots.html
114 lines changed, 114 insertions(+), 0 deletions(-)
===================================================================
@@ -0,0 +1,114 @@
+{% extends "pages/page.html" %}
+
+{% load mezzanine_tags staticfiles %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static "mezzanine/css/magnific-popup.css" %}">
+<style>
+    .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
+        max-height: 400px;
+    }
+    .carousel-caption {
+        position: relative;
+        left: auto;
+        right: auto;
+        color: inherit;
+        text-shadow: none;
+        padding-bottom: 0px;
+    }
+    .carousel-indicators {
+        bottom: -30px;
+        top: inherit;
+        left: 50%;
+        right: inherit;
+        width: 60%;
+    }
+    .carousel-inner {
+        margin-bottom: 50px;
+    }
+    .carousel-control.left, .carousel-control.right {
+        background-image: none;
+        color: inherit;
+    }
+</style>
+{% endblock extra_css %}
+
+{% block main %}
+{{ block.super }}
+
+{{ page.gallery.content|richtext_filters }}
+
+
+{% with page.gallery.images.all as images %}
+<div id="gallery-carousel" class="carousel slide screenshots-gallery" data-ride="carousel">
+  <div class="carousel-inner gallery">
+    {% for image in images %}
+    <div class="item{% if forloop.first %} active{% endif %}">
+        <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
+            <img
+                class="img-responsive"
+                src="{{ MEDIA_URL }}{% thumbnail image.file 600 0 %}"
+                alt="{{ image.description }}">
+        </a>
+        <div class="carousel-caption">
+            <p>{{ image.description }}</p>
+        </div>
+    </div>
+    {% endfor %}
+  </div>
+
+  <!-- Controls -->
+  <div>
+      <a class="left carousel-control" href="#gallery-carousel" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control" href="#gallery-carousel" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+      <ol class="center carousel-indicators">
+        {% for image in images %}
+        <li
+            data-target="#gallery-carousel"
+            data-slide-to="{{ forloop.counter0 }}"
+            {% if forloop.first %} class="active"{% endif %}>
+        </li>
+        {% endfor %}
+      </ol>
+  </div>
+</div>
+{% endwith %}
+
+
+
+
+<div class="gallery row">
+{% with page.gallery.images.all as images %}
+{% for image in images %}
+<div class="col-xs-4 col-sm-3">
+    <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
+        <img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 131 75 %}">
+    </a>
+</div>
+{% endfor %}
+{% endwith %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{{ block.super }}
+<script src="{% static "mezzanine/js/magnific-popup.js" %}"></script>
+<script>
+$(document).ready(function() {
+    $('.gallery').magnificPopup({
+        delegate: 'a',
+        type: 'image',
+        gallery: {
+            enabled: true,
+        }
+    });
+    $('#gallery-carousel').carousel();
+});
+</script>
+{% endblock %}



--------------
This E-Mail was brought to you by github_commit_mail.py (Source: https://github.com/geany/infrastructure).