small_img() helper added

app/helpers/packages_helper.rb

@@ -32,6 +32,24 @@ module PackagesHelper
     str.join(' ∙ ')
   end
 
+  def small_img(screenshot, cls: 'thumbnail')
+    if screenshot && screenshot.simage(:small)
+      image = screenshot.simage(:small)
+      image_tag(
+        image.url,
+        width: image.width,
+        height: image.height,
+        alt: screenshot.caption, 
+        class: cls
+      )
+    else
+      image_tag(
+        '/images/dummy/no-screenshots-available.svg',
+        width: 220,
+        height: 220 * 3 / 4
+      )
+    end
+  end
 
   # Show filled/empty star icons from FontAwesome
   # depending on the rating (1-5)

app/views/packages/_grid_thumbnail.slim

@@ -1,15 +1,27 @@
 // TODO: Handle packages with multiple screenshots
 a.black href=package_path(name: pkg.name)
-  div.grid-thumbnail
+  / div.grid-thumbnail
-    - if pkg.screenshots_approved.any?
+  /   - if pkg.screenshots_approved.any?
-      // TODO: smarter selection of the most useful screenshot instead of taking the first one
+  /     // TODO: smarter selection of the most useful screenshot instead of taking the first one
-      - screenshot = pkg.screenshots.first
+  /     - screenshot = pkg.screenshots.first
-      /= image_tag(screenshot.image.variant(resize_to_limit: [160,120]), alt: screenshot.caption, class: 'thumbnail')
+  /     = small_img(screenshot)
-      = image_tag(screenshot.simage_url(:small), alt: screenshot.caption, class: 'thumbnail')
+  /   - else
-    - else
+  /     img.screenshot.thumbnail src="/images/dummy/no-screenshots-upload-one.svg"
-      img.screenshot.thumbnail src="/images/dummy/no-screenshots-upload-one.svg"
+  / div
-  div
+  /   .pkgname
-    .pkgname
+  /     = pkg.name
-      = pkg.name
+  /   .pkgdescription
-    .pkgdescription
+  /     = pkg.description
-      = pkg.description
+
+  .image
+    = small_img(pkg.screenshots.first, cls: '')
+  .text.pkgname
+    = pkg.name
+  .text
+    = pkg.description
+
+  / .card.callout
+  /   .card-divider = pkg.name
+  /   = small_img(pkg.screenshots.first, cls: 'float-center')
+  /   .card-section
+  /     = pkg.description

app/views/packages/_medium_image.slim

@@ -1,14 +0,0 @@
-/ Show image in medium size with zoom option and caption below
-a href =url_for(screenshot.simage_url(:large)) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery' data-caption=screenshot_caption(screenshot)
-  .image-with-zoom-icon
-    = image_tag(url_for(screenshot.simage_url(:medium)), alt: screenshot.caption, class: 'thumbnail')
-
-    .magnifying-glass-icon
-      i.fa.fa-search
-
-.imgcaption
-  = screenshot.description
-
-/ Display management buttons for admins only
-- if user_signed_in? and current_user.is_admin?
-  = render(partial: 'admin_dropdown', locals: {screenshot: screenshot})

app/views/welcome/home.slim

@@ -30,7 +30,7 @@
       h2 Newest upload
       .thumb-height
         a href=package_path(@newest_upload.package.name)
-          = image_tag(@newest_upload.image.variant(resize_to_limit: [160,120]), alt: @newest_upload.caption)
+          = small_img(@newest_upload)
       p
         strong
           =@newest_upload.package.name
@@ -41,7 +41,7 @@
       .thumb-height
         - if @most_popular_package
           a href=package_path(@most_popular_package.name)
-            = image_tag(@most_popular_package.screenshots.first.image.variant(resize_to_limit: [160,120]))
+            = small_img(@most_popular_package.screenshots.first)
         - else
           'No uploaded screenshots yet.
       p