[deploy] Create optimized_image_tag helper (#9834)

app/helpers/application_helper.rb

@@ -82,6 +82,14 @@ module ApplicationHelper
     Images::Optimizer.call(SimpleIDN.to_ascii(image_url), width: width, quality: quality, fetch_format: format)
   end
 
+  def optimized_image_tag(image_url, optimizer_options: {}, image_options: {})
+    image_options[:width] ||= optimizer_options[:width]
+    image_options[:height] ||= optimizer_options[:height]
+    updated_image_url = Images::Optimizer.call(image_url, optimizer_options)
+
+    image_tag(updated_image_url, image_options)
+  end
+
   def cloud_cover_url(url)
     CloudCoverUrl.new(url).call
   end

app/liquid_tags/podcast_tag.rb

@@ -33,7 +33,7 @@ class PodcastTag < LiquidTagBase
   end
 
   def render(_context)
-    ActionController::Base.new.render_to_string(
+    ApplicationController.render(
       partial: PARTIAL,
       locals: {
         episode: @episode,

app/views/articles/_bottom_content.html.erb

@@ -7,17 +7,9 @@
     <a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>">
       <div class="single-other-article">
         <div class="picture">
-          <%= cl_image_tag(article.cached_user.profile_image_url,
-                           type: "fetch",
-                           crop: "imagga_scale",
-                           width: 100,
-                           height: 100,
-                           quality: "auto",
-                           flags: "progressive",
-                           fetch_format: "auto",
-                           loading: "lazy",
-                           sign_url: true,
-                           alt: "#{article.cached_user.username} profile image") %>
+          <%= optimized_image_tag(article.cached_user.profile_image_url,
+                                  optimizer_options: { crop: "imagga_scale", width: 100, height: 100 },
+                                  image_options: { loading: "lazy", alt: "#{article.cached_user.username} profile image" }) %>
         </div>
         <div class="content">
           <h3 class="fs-2xl fw-bold mb-0"><%= article.title %></h3>

app/views/podcast_episodes/_episodes_feed.html.erb

@@ -2,16 +2,9 @@
   <a href="<%= episode.path %>" class="small-pic-link-wrapper" id="article-link-<%= episode.id %>">
     <div class="single-article single-article-small-pic single-article-single-podcast">
       <div class="small-pic">
-        <%= cl_image_tag(episode.image_url || episode.podcast.image_url,
-                         type: "fetch",
-                         crop: "imagga_scale",
-                         width: 240,
-                         height: 240,
-                         quality: "auto",
-                         flags: "progressive",
-                         fetch_format: "auto",
-                         sign_url: true,
-                         alt: episode.title) %>
+        <%= optimized_image_tag(episode.image_url || episode.podcast.image_url,
+                                optimizer_options: { crop: "imagga_scale", width: 240, height: 240 },
+                                image_options: { alt: episode.title }) %>
       </div>
       <div class="content">
         <h3><span class="tag-identifier">podcast</span><%= episode.title %></h3>

app/views/podcast_episodes/_liquid.html.erb

@@ -15,16 +15,9 @@
   <div id="record-<%= episode.slug %>" data-podcast="<%= podcast.slug %>" data-episode="<%= episode.slug %>" class="podcastliquidtag__record">
     <img class="button play-butt" id="play-butt-<%= episode.slug %>" src="/assets/playbutt.png" alt="play">
     <img class="button pause-butt" id="pause-butt-<%= episode.slug %>" src="/assets/pausebutt.png" alt="pause">
-    <%= cl_image_tag(podcast.image_url,
-                     type: "fetch",
-                     crop: "fill",
-                     quality: "auto",
-                     sign_url: true,
-                     flags: "progressive",
-                     fetch_format: "auto",
-                     class: "podcastliquidtag__podcastimage",
-                     id: "podcastimage-#{episode.slug}",
-                     alt: podcast.title) %>
+    <%= optimized_image_tag(podcast.image_url,
+                            optimizer_options: { crop: "fill" },
+                            image_options: { class: "podcastliquidtag__podcastimage", id: "podcastimage-#{episode.slug}", alt: podcast.title }) %>
   </div>
   <div class="hidden-audio" id="hidden-audio-<%= episode.slug %>" style="display:none" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
     <audio id="audio" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
@@ -33,17 +26,9 @@
     </audio>
     <div id="progressBar" class="audio-player-display">
       <a href="/<%= podcast.slug + "/" + episode.slug %>">
-        <%= cl_image_tag(episode.image_url || podcast.image_url,
-                         type: "fetch",
-                         crop: "fill",
-                         width: 420,
-                         height: 420,
-                         quality: "auto",
-                         sign_url: true,
-                         flags: "progressive",
-                         fetch_format: "auto",
-                         id: "episode-profile-image",
-                         alt: episode.title) %>
+        <%= optimized_image_tag(episode.image_url || podcast.image_url,
+                                optimizer_options: { crop: "fill", width: 420, height: 420 },
+                                image_options: { id: "episode-profile-image", alt: episode.title }) %>
         <img id="animated-bars" src="/assets/animated-bars.gif" alt="animated volume bars">
       </a>
       <span id="barPlayPause">

app/views/podcast_episodes/_podcast_bar.html.erb

@@ -5,17 +5,9 @@
   </audio>
   <div id="progressBar" class="audio-player-display">
     <a href="/<%= @podcast.slug %>/<%= @episode.slug %>">
-      <%= cl_image_tag(@episode.image_url || @podcast.image_url,
-                       type: "fetch",
-                       crop: "fill",
-                       width: 420,
-                       height: 420,
-                       quality: "auto",
-                       sign_url: true,
-                       flags: "progressive",
-                       fetch_format: "auto",
-                       id: "episode-profile-image",
-                       alt: @episode.title) %>
+      <%= optimized_image_tag(@episode.image_url || @podcast.image_url,
+                              optimizer_options: { crop: "fill", width: 420, height: 420 },
+                              image_options: { id: "episode-profile-image", alt: @episode.title }) %>
       <img id="animated-bars" src="<%= asset_path("animated-bars.gif") %>" alt="animated volume bars">
     </a>
     <span id="barPlayPause">

app/views/podcast_episodes/show.html.erb

@@ -51,17 +51,9 @@
     </div>
     <div id="record-<%= @episode.slug %>" class="record-wrapper" data-podcast="<%= @podcast.slug %>" data-episode="<%= @episode.slug %>">
       <div class="record" id="record">
-        <%= cl_image_tag(@podcast.image_url,
-                         type: "fetch",
-                         crop: "fill",
-                         width: 420,
-                         height: 420,
-                         quality: "auto",
-                         sign_url: true,
-                         flags: "progressive",
-                         fetch_format: "auto",
-                         class: "main-image",
-                         alt: @podcast.title) %>
+        <%= optimized_image_tag(@podcast.image_url,
+                                optimizer_options: { width: 420, height: 420, crop: "fill" },
+                                image_options: { class: "main-image", alt: @podcast.title }) %>
         <img alt="Play Button" class="butt play-butt" src="<%= image_path("playbutt.png") %>" />
         <img alt="Pause Button" class="butt pause-butt" src="<%= image_path("pausebutt.png") %>" />
         <div class="status-message" id="status-message-<%= @episode.slug %>">

spec/helpers/application_helper_spec.rb

@@ -1,6 +1,8 @@
 require "rails_helper"
 
 RSpec.describe ApplicationHelper, type: :helper do
+  include CloudinaryHelper
+
   describe "#community_name" do
     it "equals to the community name" do
       allow(ApplicationConfig).to receive(:[]).with("COMMUNITY_NAME").and_return("SLOAN")
@@ -199,4 +201,21 @@ RSpec.describe ApplicationHelper, type: :helper do
       expect(helper.cloudinary("https://www.xn--vnx.dev/image.png")).to include("https://www.xn--vnx.dev")
     end
   end
+
+  describe "#optimized_image_tag" do
+    it "works just like cl_image_tag" do
+      image_url = "https://i.imgur.com/fKYKgo4.png"
+      cloudinary_image_tag = cl_image_tag(image_url,
+                                          type: "fetch", crop: "imagga_scale",
+                                          quality: "auto", flags: "progressive",
+                                          fetch_format: "auto", sign_url: true,
+                                          loading: "lazy", alt: "profile image",
+                                          width: 100, height: 100)
+      optimized_helper = helper.optimized_image_tag(image_url,
+                                                    optimizer_options: { crop: "imagga_scale", width: 100,
+                                                                         height: 100 },
+                                                    image_options: { loading: "lazy", alt: "profile image" })
+      expect(optimized_helper).to eq(cloudinary_image_tag)
+    end
+  end
 end