Merge pull request #176 from philomena-dev/image-view-fix

Fix embedded image views for small images

assets/css/views/_images.scss

@@ -168,7 +168,7 @@ span.spoiler div.image-container {
 
 /* This and the one above needed for older browsers for some reason, appears to be a bug */
 
-#image_target {
+.image-target {
   max-width: 100%;
 }
 

assets/js/image_expansion.js

@@ -1,4 +1,4 @@
-import { clearEl } from './utils/dom';
+import { $$, clearEl } from './utils/dom';
 import store from './utils/store';
 
 const imageVersions = {
@@ -157,20 +157,19 @@ function bindImageForClick(target) {
   });
 }
 
-function bindImageTarget() {
+function bindImageTarget(node = document) {
-  const target = document.getElementById('image_target');
+  $$('.image-target', node).forEach(target => {
-  if (!target) return;
-
-  pickAndResize(target);
-
-  if (target.dataset.mimeType === 'video/webm') {
-    // Don't interfere with media controls on video
-    return;
-  }
-
-  bindImageForClick(target);
-  window.addEventListener('resize', () => {
     pickAndResize(target);
+
+    if (target.dataset.mimeType === 'video/webm') {
+      // Don't interfere with media controls on video
+      return;
+    }
+
+    bindImageForClick(target);
+    window.addEventListener('resize', () => {
+      pickAndResize(target);
+    });
   });
 }
 

assets/js/preview.js

@@ -3,6 +3,7 @@
  */
 
 import { fetchJson } from './utils/requests';
+import { bindImageTarget } from './image_expansion';
 import { filterNode } from './imagesclientside';
 import { hideEl, showEl } from './utils/dom';
 
@@ -49,6 +50,7 @@ function getPreview(body, anonymous, previewLoading, previewIdle, previewContent
     .then(data => {
       previewContent.innerHTML = data;
       filterNode(previewContent);
+      bindImageTarget(previewContent);
       showEl(previewIdle);
       hideEl(previewLoading);
     });

lib/philomena_web/markdown_renderer.ex

@@ -81,7 +81,7 @@ defmodule PhilomenaWeb.MarkdownRenderer do
               [_id, "p"] when not img.hidden_from_users and img.approved ->
                 Phoenix.View.render(@image_view, "_image_target.html",
                   image: img,
-                  size: :medium,
+                  size: @image_view.select_version(img, :medium),
                   conn: conn
                 )
                 |> safe_to_string()
@@ -89,7 +89,7 @@ defmodule PhilomenaWeb.MarkdownRenderer do
               [_id, "t"] when not img.hidden_from_users and img.approved ->
                 Phoenix.View.render(@image_view, "_image_target.html",
                   image: img,
-                  size: :small,
+                  size: @image_view.select_version(img, :small),
                   conn: conn
                 )
                 |> safe_to_string()
@@ -97,7 +97,7 @@ defmodule PhilomenaWeb.MarkdownRenderer do
               [_id, "s"] when not img.hidden_from_users and img.approved ->
                 Phoenix.View.render(@image_view, "_image_target.html",
                   image: img,
-                  size: :thumb_small,
+                  size: @image_view.select_version(img, :thumb_small),
                   conn: conn
                 )
                 |> safe_to_string()

lib/philomena_web/templates/image/_image_target.html.slime

@@ -11,7 +11,7 @@
     ' .
 
   = if size == :full do
-    #image_target.hidden.image-show data-scaled=scaled_value(@conn.assigns.current_user) data-uris=Jason.encode!(thumb_urls(@image, can?(@conn, :hide, @image))) data-width=@image.image_width data-height=@image.image_height data-image-size=@image.image_size data-mime-type=@image.image_mime_type
+    .image-target.hidden.image-show data-scaled=scaled_value(@conn.assigns.current_user) data-uris=Jason.encode!(thumb_urls(@image, can?(@conn, :hide, @image))) data-width=@image.image_width data-height=@image.image_height data-image-size=@image.image_size data-mime-type=@image.image_mime_type
       = if @image.image_mime_type == "video/webm" do
         video controls=true
       - else

lib/philomena_web/templates/layout/_opengraph.html.slime

@@ -6,6 +6,8 @@ meta name="format-detection" content="telephone=no"
   - image = @conn.assigns.image
   - filtered = not image.thumbnails_generated
   - description = "##{image.id} - #{Philomena.Images.tag_list(image)} - Derpibooru"
+  - thumb_large = ImageView.thumb_urls(image, false)[:large]
+  - thumb_rendered = ImageView.thumb_url(image, false, :rendered)
 
   meta name="keywords" content=tag_list(image)
   meta name="description" content=description
@@ -25,16 +27,16 @@ meta name="format-detection" content="telephone=no"
   = cond do
     - image.image_mime_type == "video/webm" and not filtered ->
       meta property="og:type" content="video.other"
-      meta property="og:image" content=ImageView.thumb_url(image, false, :rendered)
+      meta property="og:image" content=thumb_rendered
-      meta property="og:video" content=ImageView.thumb_url(image, false, :large)
+      meta property="og:video" content=thumb_large
 
     - image.image_mime_type == "image/svg+xml" and not filtered ->
       meta property="og:type" content="website"
-      meta property="og:image" content=ImageView.thumb_url(image, false, :rendered)
+      meta property="og:image" content=thumb_rendered
 
     - not filtered ->
       meta property="og:type" content="website"
-      meta property="og:image" content=ImageView.thumb_url(image, false, :large)
+      meta property="og:image" content=thumb_large
 
     - true ->
       meta property="og:type" content="website"

lib/philomena_web/views/image_view.ex

@@ -58,6 +58,18 @@ defmodule PhilomenaWeb.ImageView do
     |> append_gif_urls(image, show_hidden)
   end
 
+  def select_version(image, version_name) do
+    Thumbnailer.thumbnail_versions()
+    |> Map.new(fn {name, {width, height}} ->
+      if image.image_width > width or image.image_height > height do
+        {name, version_name}
+      else
+        {name, :full}
+      end
+    end)
+    |> Map.get(version_name, :full)
+  end
+
   defp append_full_url(urls, %{hidden_from_users: false} = image, _show_hidden),
     do: Map.put(urls, :full, pretty_url(image, true, false))