Merge pull request #5181 from vinothkannans/image-placeholder-styling

UX: Placeholder images color changed & tootip added

app/assets/stylesheets/common/base/topic-post.scss

@@ -423,6 +423,7 @@ a.mention, a.mention-group {
 }
 
 .broken-image, .large-image {
+  color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%));
   border: 1px solid $primary-low;
   font-size: 32px;
   padding: 16px;

app/jobs/regular/pull_hotlinked_images.rb

@@ -110,13 +110,25 @@ module Jobs
           if broken_images.include?(src)
             tag.name = 'span'
             tag.set_attribute('class', 'broken-image fa fa-chain-broken')
+            tag.set_attribute('title', I18n.t('post.image_placeholder.broken'))
             tag.remove_attribute('src')
+            tag.remove_attribute('width')
+            tag.remove_attribute('height')
           elsif large_images.include?(src)
             tag.name = 'a'
             tag.set_attribute('href', src)
             tag.set_attribute('target', '_blank')
+            tag.set_attribute('title', I18n.t('post.image_placeholder.large'))
             tag.remove_attribute('src')
+            tag.remove_attribute('width')
+            tag.remove_attribute('height')
             tag.inner_html = '<span class="large-image fa fa-picture-o"></span>'
+            parent = tag.parent
+            if parent.name == 'a'
+              parent.add_next_sibling(tag)
+              parent.add_next_sibling('<br>')
+              parent.content = parent["href"]
+            end
           end
         end
         if start_html == post.cooked && doc.to_html != post.cooked

config/locales/server.en.yml

@@ -516,6 +516,10 @@ en:
       title: "leader"
     change_failed_explanation: "You attempted to demote %{user_name} to '%{new_trust_level}'. However their trust level is already '%{current_trust_level}'. %{user_name} will remain at '%{current_trust_level}' - if you wish to demote user lock trust level first"
 
+  post:
+    image_placeholder:
+      broken: "This image is broken"
+      large: "Click to view the image"
 
   rate_limiter:
     slow_down: "You have performed this action too many times, try again later."

spec/jobs/pull_hotlinked_images_spec.rb

@@ -99,7 +99,7 @@ describe Jobs::PullHotlinkedImages do
 <img src='#{image_url}'>
 #{url}
 <img src='#{broken_image_url}'>
-<img src='#{large_image_url}'>
+<a href='#{url}'><img src='#{large_image_url}'></a>
         ")
 
         Jobs::ProcessPost.new.execute(post_id: post.id)
@@ -110,8 +110,8 @@ describe Jobs::PullHotlinkedImages do
 
         expect(post.cooked).to match(/<p><img src=.*\/uploads/)
         expect(post.cooked).to match(/<img src=.*\/uploads.*\ class="thumbnail"/)
-        expect(post.cooked).to match(/<span .*\ class="broken-image fa fa-chain-broken/)
+        expect(post.cooked).to match(/<span class="broken-image fa fa-chain-broken/)
-        expect(post.cooked).to match(/<a .*\ href=.*\ target="_blank"><span class="large-image fa fa-picture-o"><\/span><\/a>/)
+        expect(post.cooked).to match(/<\/a><br><a href=.*\ target="_blank" .*\><span class="large-image fa fa-picture-o"><\/span><\/a>/)
       end
     end
   end
@@ -124,7 +124,7 @@ describe Jobs::PullHotlinkedImages do
       Jobs::PullHotlinkedImages.new.execute(post_id: post.id)
       post.reload
 
-      expect(post.cooked).to match(/<span .*\ class="broken-image fa fa-chain-broken/)
+      expect(post.cooked).to match(/<span class="broken-image fa fa-chain-broken/)
     end
 
     it 'large image with placeholder' do
@@ -134,7 +134,7 @@ describe Jobs::PullHotlinkedImages do
       Jobs::PullHotlinkedImages.new.execute(post_id: post.id)
       post.reload
 
-      expect(post.cooked).to match(/<a .*\ href=.*\ target="_blank"><span class="large-image fa fa-picture-o"><\/span><\/a>/)
+      expect(post.cooked).to match(/<a href=.*\ target="_blank" .*\><span class="large-image fa fa-picture-o"><\/span><\/a>/)
     end
   end