UI Improvements; display description too

Author: GuLinux

classes/FlickrAPI.php

@@ -44,17 +44,17 @@ public function photoset($id, $params)
         $info = $this->request( ['method' => 'flickr.photosets.getInfo', 'photoset_id' => $id ])['photoset'];
         $get_photos_params = array_merge(
             [ "method" => "flickr.photosets.getPhotos", "photoset_id" => $id, 'user_id' => $info['owner'], 'extras' => 
-                'license,date_upload,date_taken,owner_name,icon_server,original_format,last_update,geo,tags,machine_tags,views,media' ],
+                'license,date_upload,date_taken,owner_name,icon_server,original_format,last_update,geo,tags,machine_tags,views,media,description' ],
             $this->get_params($params, ['page', 'per_page', 'privacy_filter', 'media']));
 
         $photos = $this->request( $get_photos_params )['photoset'];
-        return new Photoset($info, $photos);
+        return new Photoset($info, $photos, $this);
     }
 
     public function photo($id)
     {
         $info = $this->request( ['method' => 'flickr.photos.getInfo', 'photo_id' => $id ])['photo'];        
-        return new Photo($info);
+        return new Photo($info, $this);
     }
 
     public function collection($id)

classes/Photo.php

@@ -35,6 +35,14 @@ public function url($format) {
         return 'https://farm' . $this->info['farm'] . '.staticflickr.com/' . $this->info['server'] . '/' . $this->info['id'] . '_' . $this->info['secret'] . '.jpg';
     }
 
+    public function flickrPage() {
+        return 'https://www.flickr.com/photos/' . $this->info['ownername'] . '/' . $this->info['id'];
+    }
+    
+    public function description() {
+        return $this->content($this->info['description']);
+    }
+    
     private function content($val) {
         return is_array($val) ? $val['_content'] : $val;
     }

classes/Photoset.php

@@ -10,11 +10,13 @@ class Photoset
 {
     private $photos;
     private $info;
+    private $api;
 
-    public function __construct($info, $photos)
+    public function __construct($info, $photos, $api)
     {
         $this->info = $info;
         $this->photos = $photos;
+        $this->api = $api;
     }
 
 

css/flickr.css

@@ -18,3 +18,11 @@
 }
 .flickr-photoset-description {
 }
+
+.flickr-lightbox-links a{
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.flickr-lightbox-title {
+/*     display: inline; */
+}

templates/partials/flickr-photo-lightbox.html.twig

@@ -1,4 +1,13 @@
  <figure id="lightbox-{{ photo.id() }}" class="flickr-lightbox">
-    <figcaption><h4>{{ photo.title() }}</h4> <span><a href="{{ photo.url('o') }}" target='_blank'>Original version</a></span></figcaption>
+    <figcaption>
+        <h4 class="flickr-lightbox-title">{{ photo.title() }}</h4>
+        <div class="flickr-lightbox-links">
+            <a href="{{ photo.url('o') }}" target='_blank'>Original version</a>
+            <a href="{{ photo.flickrPage() }}" target='_blank'>Open in Flickr</a>
+        </div>
+    </figcaption>
     <img src="{{ photo.url(params['display-format-photo-lightbox']) }}">
+    <div class="flickr-lightbox-description">
+        {{ photo.description()|replace({"\n": "<br>"}) }}
+    </div>
 </figure>