Add details and tags

project.clj

@@ -17,7 +17,7 @@
                  [org.clojure/tools.cli "0.3.5"]
                  [org.clojure/tools.logging "0.3.1"]
                  [org.webjars.bower/tether "1.4.0"]
-                 [org.webjars/bootstrap "4.0.0-alpha.5"]
+                 [org.webjars/bootstrap "4.0.0-alpha.6"]
                  [org.webjars/font-awesome "4.7.0"]
                  [org.webjars/webjars-locator-jboss-vfs "0.1.0"]
                  [org.xerial/sqlite-jdbc "3.16.1"]
@@ -32,7 +32,10 @@
                  [image-resizer "0.1.9"]
                  [me.raynes/fs "1.4.6"]
                  [digest "1.4.5"]
-                 [clj-exif-orientation "0.2.1"]]
+                 [markdown-clj "0.9.98"]
+                 [clj-exif-orientation "0.2.1"]
+                 [markdown-clj "0.9.98"]
+                 [clj-time "0.8.0"]]
 
   :min-lein-version "2.0.0"
 

resources/public/css/screen.css

@@ -1,5 +1,15 @@
+#content {
+  margin-top: 20px; }
+
 .thumbnail-image {
   display: block;
   margin: 10px;
   border: 1px solid #ccc;
   float: left; }
+
+.detail-image img {
+  max-width: 100%; }
+
+.detail-image a {
+  display: block;
+  text-align: center; }

resources/scss/screen.scss

@@ -1,6 +1,20 @@
+#content {
+  margin-top: 20px;
+}
+
 .thumbnail-image {
   display: block;
   margin: 10px;
   border: 1px solid #ccc;
   float: left;
 }
+
+.detail-image {
+  img {
+    max-width: 100%;
+  }
+  a {
+    display: block;
+    text-align: center;
+  }
+}

resources/templates/detail.html

@@ -2,19 +2,49 @@
 
 {% block content %}
 
-{% if next-image %}
-<a class="btn btn-primary" href="/show/{{ next-image.id }}">Weiter</a>
-{% endif %}
+<div class="btn-group pull-right" role="group">
+  {% if next-image %}
+  <a class="btn btn-secondary" href="/show/{{ next-image.id }}">
+    {% else %}
+  <a class="btn btn-secondary disabled" href="#">
+    {% endif %}
+    Nächstes Bild
+  </a>
 
-{% if prev-image %}
-<a class="btn btn-primary" href="/show/{{ prev-image.id }}">Zurück</a>
-{% endif %}
+  {% if prev-image %}
+  <a class="btn btn-secondary" href="/show/{{ prev-image.id }}">
+  {% else %}
+  <a class="btn btn-secondary disabled" href="#">
+  {% endif %}
+    Vorheriges Bild
+  </a>
+</div>
+<div class="clearfix"></div>
 
-<h1>{{ image.title }}</h1>
-<img class="col-md-12" src="/images/normal/{{ image.hash }}.png" alt="{{ image.title }}"/>
+<div class="pull-left">
+  <h1>{{ image.title }}</h1>
+  <br>
+  <p>{{ image.created_at|parse-date|date:"dd-MM-yyyy HH:mm" }}</p>
+  <br>
+  <div id="image-tags">
+    {% for tag in tags %}
+    <span class="tag tag-info">{{ tag.tagname }}</span>
+    {% endfor %}
+  </div>
+</div>
+
+<div class="clearfix"></div>
+
+<div class="detail-image">
+  <a href="/images/raw/{{ image.hash }}.png">
+    <img class="card-img-top" src="/images/raw/{{ image.hash }}.png" alt="{{ image.title }}"/>
+  </a>
+</div>
 
 {% if image.description|length > 0 %}
-<p>{{ image.description }}</p>
+<div>
+  <p>{{ image.description|markdown-to-html|safe }}</p>
+</div>
 {% endif %}
 
 {% endblock %}

src/clj/yenu/layout.clj

@@ -4,13 +4,17 @@
             [ring.util.http-response :refer [content-type ok]]
             [ring.util.anti-forgery :refer [anti-forgery-field]]
             [yenu.helpers.images :as image-helper]
-            [ring.middleware.anti-forgery :refer [*anti-forgery-token*]]))
+            [ring.middleware.anti-forgery :refer [*anti-forgery-token*]]
+            [clj-time.format :as time-format])
+  (:use [markdown.core]))
 
 (declare ^:dynamic *app-context*)
 (parser/set-resource-path!  (clojure.java.io/resource "templates"))
 (parser/add-tag! :csrf-field (fn [_ _] (anti-forgery-field)))
 (filter/add-filter! :inc inc)
 (filter/add-filter! :dec dec)
+(filter/add-filter! :markdown-to-html md-to-html-string)
+(filter/add-filter! :parse-date time-format/parse)
 
 (defn render
   "renders the HTML template located relative to resources/templates"

src/clj/yenu/routes/admin.clj

@@ -25,6 +25,7 @@
 
 (defn add-tag [image-id tag]
   (db/create-tag! {:tagname tag})
+  
   (let [{tag-id :id} (db/get-tag {:tagname tag})]
     (db/add-tag-to-image! {:imageid image-id :tagid tag-id})))
 
@@ -32,7 +33,7 @@
   (let [img (db/create-image! {:hash filehash :title title :description description})
         image-id ((keyword "last_insert_rowid()") img)
         all-tags (str/split tags, #"(\s*,\s*|\s+)")]
-    (map #(add-tag image-id %) all-tags))) 
+    (run! #(add-tag image-id %) all-tags))) 
 
 (defroutes admin-routes
   (GET "/upload" []

src/clj/yenu/routes/core.clj

@@ -11,7 +11,7 @@
         (/ (:count (db/get-image-count)) images-on-page))))
 
 (defn index-page [current-page]
-  (let [image-count 5
+  (let [image-count 15
         offset (* (dec current-page) image-count)
         pages (number-of-pages image-count)
         images (db/get-all-images {:offset offset :count image-count})]
@@ -27,7 +27,9 @@
     (layout/render "detail.html"
                    {:image image
                     :next-image next-img 
-                    :prev-image prev-img})))
+                    :prev-image prev-img
+                    :tags (db/get-tags-for-image {:id (:id image)})
+                    :comments (db/get-comments-for-image {:image_id (:id image)})})))
 
 (defn image-file [type hash ext]
   (let [filename (str hash "." ext)]