[deploy] Replace #cloudinary with #optimized_image_url (#9876)

This commit is contained in:
Mac Siri 2020-08-21 14:46:00 -04:00 committed by GitHub
parent e371446833
commit 76de9a0317
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 56 additions and 56 deletions

View file

@ -406,7 +406,8 @@ class StoriesController < ApplicationController
"logo": {
"@context": "http://schema.org",
"@type": "ImageObject",
"url": ApplicationController.helpers.cloudinary(SiteConfig.logo_png, 192, 80, "png"),
"url": ApplicationController.helpers.optimized_image_url(SiteConfig.logo_png, width: 192,
fetch_format: "png"),
"width": "192",
"height": "192"
}

View file

@ -27,11 +27,10 @@ class PodcastEpisodeDecorator < ApplicationDecorator
end
def mobile_player_metadata
image_url = ApplicationController.helpers.cloudinary(podcast.image_url, 600)
{
podcastName: podcast.title,
episodeName: title,
podcastImageUrl: image_url
podcastImageUrl: Images::Optimizer.call(podcast.image_url, width: 600, quality: 80)
}
end

View file

@ -76,10 +76,10 @@ module ApplicationHelper
"https://res.cloudinary.com/#{ApplicationConfig['CLOUDINARY_CLOUD_NAME']}/image/upload/#{postfix}"
end
def cloudinary(url, width = "500", quality = 80, format = "auto")
def optimized_image_url(url, width: 500, quality: 80, fetch_format: "auto")
image_url = url.presence || asset_path("#{rand(1..40)}.png")
Images::Optimizer.call(SimpleIDN.to_ascii(image_url), width: width, quality: quality, fetch_format: format)
Images::Optimizer.call(SimpleIDN.to_ascii(image_url), width: width, quality: quality, fetch_format: fetch_format)
end
def optimized_image_tag(image_url, optimizer_options: {}, image_options: {})

View file

@ -26,10 +26,6 @@ class PodcastTag < LiquidTagBase
super
@episode = fetch_podcast(link)
@podcast ||= Podcast.new
@podcast_links = [["iTunes", @podcast.itunes_url, cloudinary(IMAGE_LINK["iTunes".downcase.to_sym], 40, 90, "png")],
["Overcast", @podcast.overcast_url, cloudinary(IMAGE_LINK[name.downcase.to_sym], 40, 90, "png")],
["Android", @podcast.android_url, cloudinary(IMAGE_LINK[name.downcase.to_sym], 40, 90, "png")],
["RSS", @podcast.feed_url, cloudinary(IMAGE_LINK[name.downcase.to_sym], 40, 90, "png")]]
end
def render(_context)
@ -37,8 +33,7 @@ class PodcastTag < LiquidTagBase
partial: PARTIAL,
locals: {
episode: @episode,
podcast: @podcast,
podcast_links: @podcast_links
podcast: @podcast
},
)
end
@ -71,4 +66,5 @@ class PodcastTag < LiquidTagBase
raise StandardError, "Invalid podcast link"
end
end
Liquid::Template.register_tag("podcast", PodcastTag)

View file

@ -351,7 +351,7 @@ class Article < ApplicationRecord
def cloudinary_video_url
return if video_thumbnail_url.blank?
ApplicationController.helpers.cloudinary(video_thumbnail_url, 880)
Images::Optimizer.call(video_thumbnail_url, width: 880, quality: 80)
end
def video_duration_in_minutes

View file

@ -56,7 +56,7 @@ class HtmlVariant < ApplicationRecord
end
def prefix_all_images
# wrap with Cloudinary or allow if from giphy or githubusercontent.com
# Optimize image if not from giphy or githubusercontent.com
doc = Nokogiri::HTML.fragment(html)
doc.css("img").each do |img|
src = img.attr("src")

View file

@ -43,7 +43,7 @@
<% @user.badge_achievements.order(id: :desc).includes(:badge).each do |achievement| %>
<a class="badge-achievement" href="/badge/<%= achievement.badge.slug %>">
<img
src="<%= cloudinary achievement.badge.badge_image_url, 180 %>"
src="<%= optimized_image_url(achievement.badge.badge_image_url, width: 180) %>"
alt="<%= achievement.badge.title %>"
title="<%= achievement.badge.title %>"
class="badge-achievement-image mx-auto"

View file

@ -1,8 +1,8 @@
<% organization = sponsorship.organization %>
<div class="sidebar-sponsor">
<a class="partner-link" href="<%= sponsorship.url %>" target="_blank" data-details="<%= organization.slug %>__image" rel="noopener">
<img src="<%= cloudinary(organization.nav_image_url) %>" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-light-mode" />
<img src="<%= cloudinary(organization.dark_nav_image_url || organization.nav_image_url) %>" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-dark-mode" />
<img src="<%= optimized_image_url(organization.nav_image_url) %>" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-light-mode" />
<img src="<%= optimized_image_url(organization.dark_nav_image_url || organization.nav_image_url) %>" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-dark-mode" />
</a>
<p class="fs-s"><%= sponsorship.sponsorable_type == "ActsAsTaggableOn::Tag" ? sanitize(sponsorship.blurb_html) : sponsorship.tagline %></p>
</div>

View file

@ -14,7 +14,7 @@
<div class="tag-or-query-header-container">
<h1>
<% if @tag_model.badge_id && @tag_model.badge %>
<img src="<%= cloudinary @tag_model.badge.badge_image_url, 180 %>" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg" />
<img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 180) %>" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg" />
<% end %>
<% if @tag_model && @tag_model.pretty_name.present? %>
<%= @tag_model.pretty_name %>

View file

@ -9,7 +9,7 @@
<a href="/badge/<%= badge.slug %>">
<img
class="badge-image <%= "unearned" unless badge.id.in?(@earned_badge_achievements) %>"
src="<%= cloudinary(badge.badge_image_url, 375) %>"
src="<%= optimized_image_url(badge.badge_image_url, width: 375) %>"
alt="<%= badge.title %> badge"
title="<%= badge.title %>">
</a>

View file

@ -5,7 +5,7 @@
<h1 style="text-align: center;font-size:calc(1.66vw + <%= 34 - (@badge.title.size / 1.1).to_i %>px);max-width:96%;margin: 30px auto;padding-top:8px;">🏅 <%= @badge.title %> Badge 🏅</h1>
<div class="body" style="text-align: center">
<p>
<img src="<%= cloudinary(@badge.badge_image_url, 375) %>" style="height: 250px" alt="<%= @badge.title %> badge">
<img src="<%= optimized_image_url(@badge.badge_image_url, width: 375) %>" style="height: 250px" alt="<%= @badge.title %> badge">
</p>
<h4 style="max-width:550px;margin: 50px auto">
<%= @badge.description %>

View file

@ -2,7 +2,7 @@
<% if @new_article_not_logged_in %>
<div class="prefill-non-logged-in-message">
<div class="registration__logo-container">
<img class="secondary-logo" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
<img class="secondary-logo" src="<%= optimized_image_url(safe_logo_url(SiteConfig.secondary_logo_url), width: 190) %>"
alt="Secondary <%= community_name %> logo" />
</div>
<p>
@ -14,7 +14,7 @@
</div>
<% else %>
<div class="registration__logo-container">
<img class="secondary-logo" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
<img class="secondary-logo" src="<%= optimized_image_url(safe_logo_url(SiteConfig.secondary_logo_url), width: 190) %>"
alt="Secondary <%= community_name %> logo" />
</div>
<% if any_selfserve_auth? %>

View file

@ -43,7 +43,7 @@
</style>
<header class="page-header" role="banner">
<img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/9bsnlmppunw39rnnshk6.png") %>" />
<img src="<%= optimized_image_url("https://thepracticaldev.s3.amazonaws.com/i/9bsnlmppunw39rnnshk6.png") %>" />
</header>
<main role="main">

View file

@ -56,7 +56,7 @@
<div class="event">
<div class="event-image">
<img src="<%= cloudinary(event.cover_image_url, 500) %>" alt="event image">
<img src="<%= optimized_image_url(event.cover_image_url, width: 500) %>" alt="event image">
</div>
<div class="event-details">
<h3><a href="/events/<%= event.slug %>"><%= event.category %>: <%= event.title %></a></h3>

View file

@ -8,7 +8,7 @@
<div class="crayons-modal__box__body p-0">
<div class="authentication-modal__container">
<figure class="authentication-modal__image-container">
<img class="authentication-modal__image" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
<img class="authentication-modal__image" src="<%= optimized_image_url(safe_logo_url(SiteConfig.secondary_logo_url), width: 190) %>"
alt="Secondary <%= community_name %> logo" />
</figure>
<div class="authentication-modal__content">

View file

@ -28,7 +28,7 @@
<div class="d-flex">
<nav class="sidebar-nav">
<a href="/admin">
<img class="d-block mx-auto mt-3" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>" width="40" height="40" alt="<%= community_name %> Logo">
<img class="d-block mx-auto mt-3" src="<%= optimized_image_url(safe_logo_url(SiteConfig.secondary_logo_url), width: 190) %>" width="40" height="40" alt="<%= community_name %> Logo">
</a>
<%= render "admin/shared/navbar" %>
</nav>

View file

@ -7,7 +7,7 @@
<p class="badge-description">
<%= json_data["badge_achievement"]["badge"]["description"] %>
</p>
<img class="badge-image" src="<%= cloudinary json_data["badge_achievement"]["badge"]["badge_image_url"], 250 %>" alt="<%= json_data["badge_achievement"]["badge"]["title"] %>">
<img class="badge-image" src="<%= optimized_image_url(json_data["badge_achievement"]["badge"]["badge_image_url"], width: 250) %>" alt="<%= json_data["badge_achievement"]["badge"]["title"] %>">
<% end %>
<p class="badge-reward-message">
<em>

View file

@ -15,8 +15,8 @@
<div id="onboarding-container"
data-community-name="<%= community_name %>"
data-community-description="<%= SiteConfig.community_description %>"
data-community-logo="<%= cloudinary safe_logo_url(SiteConfig.onboarding_logo_image) %>"
data-community-background="<%= cloudinary(SiteConfig.onboarding_background_image, "1680", 75) %>">
data-community-logo="<%= optimized_image_url(safe_logo_url(SiteConfig.onboarding_logo_image)) %>"
data-community-background="<%= optimized_image_url(SiteConfig.onboarding_background_image, width: 1680, quality: 75) %>">
<%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>
</div>

View file

@ -0,0 +1,2 @@
<img src="<%= optimized_image_url(sponsorship.organization.nav_image_url, width: 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy" class="partner-image-light-mode">
<img src="<%= optimized_image_url((sponsorship.organization.dark_nav_image_url || sponsorship.organization.nav_image_url), width: 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy" class="partner-image-dark-mode">

View file

@ -19,7 +19,7 @@
<% Sponsorship.gold.live.includes(:organization).order(featured_number: :asc).each do |sponsorship| %>
<div>
<a href="<%= sponsorship.url %>" class="sponsor__logo">
<img src="<%= cloudinary(sponsorship.organization.nav_image_url, 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
<img src="<%= optimized_image_url(sponsorship.organization.nav_image_url, width: 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
</a>
<p>
<%= sponsorship.blurb_html&.html_safe %>
@ -37,7 +37,7 @@
<% Sponsorship.where(status: "live", level: "silver").where("expires_at > ?", Time.current).includes(:organization).order(featured_number: :asc).each do |sponsorship| %>
<div>
<a href="<%= sponsorship.url %>" class="sponsor__logo">
<img src="<%= cloudinary(sponsorship.organization.nav_image_url, 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
<img src="<%= optimized_image_url(sponsorship.organization.nav_image_url, width: 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
</a>
<p>
<%= sponsorship.blurb_html&.html_safe %>
@ -55,7 +55,7 @@
<% Sponsorship.bronze.live.where("expires_at > ?", Time.current).includes(:organization).order(featured_number: :asc).find_each do |sponsorship| %>
<div>
<a href="<%= sponsorship.url %>" class="sponsor__logo">
<img src="<%= cloudinary(sponsorship.organization.nav_image_url, 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
<img src="<%= optimized_image_url(sponsorship.organization.nav_image_url, width: 250) %>" alt="<%= sponsorship.organization.name %> logo" loading="lazy">
</a>
</div>
<% end %>

View file

@ -9,7 +9,7 @@
<meta property="og:type" content="article" />
<meta property="og:url" content="<%= app_url(@podcast.slug) %>" />
<meta property="og:title" content="<%= @podcast.title %>" />
<meta property="og:image" content="https://res.cloudinary.com/practicaldev/image/fetch/c_scale,h_300,w_300,r_max/u_listennow_kjml1x,y_45/<%= cloudinary(@podcast.image_url, 300) %>">
<meta property="og:image" content="https://res.cloudinary.com/practicaldev/image/fetch/c_scale,h_300,w_300,r_max/u_listennow_kjml1x,y_45/<%= optimized_image_url(@podcast.image_url, width: 300) %>">
<meta property="og:description" content="<%= @podcast.description %>" />
<meta property="og:site_name" content="<%= community_qualified_name %>" />
@ -19,7 +19,7 @@
<meta name="twitter:creator" content="@<%= @podcast.twitter_username %>">
<meta name="twitter:title" content="<%= @podcast.title %>">
<meta name="twitter:description" content="<%= @podcast.description %>" />
<meta name="twitter:image:src" content="https://res.cloudinary.com/practicaldev/image/fetch/c_scale,h_300,w_300,r_max/u_listennow_kjml1x,y_45/<%= cloudinary(@podcast.image_url, 300) %>">
<meta name="twitter:image:src" content="https://res.cloudinary.com/practicaldev/image/fetch/c_scale,h_300,w_300,r_max/u_listennow_kjml1x,y_45/<%= optimized_image_url(@podcast.image_url, width: 300) %>">
<% end %>
<% else %>
<% title "Podcasts" %>

View file

@ -34,7 +34,7 @@
<div class="title" style="background:#<%= @podcast.main_color_hex %> url(<%= image_url %>)">
<h2>
<a href="/<%= @podcast.slug %>">
<img alt="<%= @podcast.title %>" src="<%= cloudinary(@podcast.image_url, 60, 80) %>" /><%= @podcast.title %>
<img alt="<%= @podcast.title %>" src="<%= optimized_image_url(@podcast.image_url, width: 60, quality: 80) %>" /><%= @podcast.title %>
</a>
<button id="user-follow-butt" class="cta follow-action-button" data-info='{"id":<%= @podcast.id %>,"className":"<%= @podcast.class.name %>"}'>&nbsp;</button>
</h2>

View file

@ -8,17 +8,17 @@
"theme_color": "#000000",
"homepage_url": "<%= app_url %>",
"icons": [{
"src": "<%= ApplicationController.helpers.cloudinary(SiteConfig.logo_png, 192, 80, "png") %>",
"src": "<%= optimized_image_url(SiteConfig.logo_png, width: 192, fetch_format: "png") %>",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}, {
"src": "<%= ApplicationController.helpers.cloudinary(SiteConfig.logo_png, 128, 80, "png") %>",
"src": "<%= optimized_image_url(SiteConfig.logo_png, width: 128, fetch_format: "png") %>",
"sizes": "128x128",
"type": "image/png",
"purpose": "any maskable"
}, {
"src": "<%= ApplicationController.helpers.cloudinary(SiteConfig.logo_png, 512, 80, "png") %>",
"src": "<%= optimized_image_url(SiteConfig.logo_png, width: 512, fetch_format: "png") %>",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"

View file

@ -34,12 +34,12 @@
<%= yield(:page_meta) %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<%= favicon_link_tag SiteConfig.favicon_url %>
<link rel="apple-touch-icon" href="<%= cloudinary(SiteConfig.logo_png, 180, "png") %>">
<link rel="apple-touch-icon" sizes="152x152" href="<%= cloudinary(SiteConfig.logo_png, 152, "png") %>">
<link rel="apple-touch-icon" sizes="180x180" href="<%= cloudinary(SiteConfig.logo_png, 180, "png") %>">
<link rel="apple-touch-icon" sizes="167x167" href="<%= cloudinary(SiteConfig.logo_png, 167, "png") %>">
<link href="<%= cloudinary(SiteConfig.logo_png, 192, "png") %>" rel="icon" sizes="192x192" />
<link href="<%= cloudinary(SiteConfig.logo_png, 128, "png") %>" rel="icon" sizes="128x128" />
<link rel="apple-touch-icon" href="<%= optimized_image_url(SiteConfig.logo_png, width: 180, fetch_format: "png") %>">
<link rel="apple-touch-icon" sizes="152x152" href="<%= optimized_image_url(SiteConfig.logo_png, width: 152, fetch_format: "png") %>">
<link rel="apple-touch-icon" sizes="180x180" href="<%= optimized_image_url(SiteConfig.logo_png, width: 180, fetch_format: "png") %>">
<link rel="apple-touch-icon" sizes="167x167" href="<%= optimized_image_url(SiteConfig.logo_png, width: 167, fetch_format: "png") %>">
<link href="<%= optimized_image_url(SiteConfig.logo_png, width: 192, fetch_format: "png") %>" rel="icon" sizes="192x192" />
<link href="<%= optimized_image_url(SiteConfig.logo_png, width: 128, fetch_format: "png") %>" rel="icon" sizes="128x128" />
<meta name="apple-mobile-web-app-title" content="<%= ApplicationConfig["APP_DOMAIN"] %>">
<meta name="application-name" content="<%= ApplicationConfig["APP_DOMAIN"] %>">
<meta property="fb:pages" content="568966383279687" />

View file

@ -1,7 +1,7 @@
<div class="authentication-feed__card" id="in-feed-cta">
<div class="authentication-feed__container">
<figure class="authentication-feed__image-container">
<img class="authentication-feed__image" src="<%= cloudinary(safe_logo_url(SiteConfig.secondary_logo_url), 190) %>"
<img class="authentication-feed__image" src="<%= optimized_image_url(safe_logo_url(SiteConfig.secondary_logo_url), width: 190) %>"
alt="Secondary <%= community_name %> logo" />
</figure>
<div class="authentication-feed__content">

View file

@ -54,7 +54,7 @@
<% end %>
<% if tag.badge_id && tag.badge %>
<img src="<%= cloudinary tag.badge.badge_image_url, 180 %>" style="width: 64px; height: 64px; transform: rotate(<%= -25 + (tag.id.digits.first * 5) %>deg" class="right-1 bottom-1 absolute" />
<img src="<%= optimized_image_url(tag.badge.badge_image_url, width: 180) %>" style="width: 64px; height: 64px; transform: rotate(<%= -25 + (tag.id.digits.first * 5) %>deg" class="right-1 bottom-1 absolute" />
<% end %>
</div>
<% end %>

View file

@ -96,7 +96,7 @@
<div class="flex items-center">
<span class="crayons-logo crayons-logo--xl mr-2">
<% if @organization.profile_image_url.present? %>
<img alt="<%= @organization.name %> profile image" src="<%= cloudinary(@organization.profile_image_url, 50) %>" class="crayons-logo__image" />
<img alt="<%= @organization.name %> profile image" src="<%= optimized_image_url(@organization.profile_image_url, width: 50) %>" class="crayons-logo__image" />
<% end %>
</span>
<%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
@ -107,7 +107,7 @@
<%= f.label :nav_image, "Logo for light themes", class: "crayons-field__label" %>
<div class="flex items-center">
<% if @organization.nav_image_url.present? %>
<img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= cloudinary(@organization.nav_image_url, 50) %>" />
<img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= optimized_image_url(@organization.nav_image_url, width: 50) %>" />
<% end %>
<%= f.file_field :nav_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
</div>
@ -117,7 +117,7 @@
<%= f.label :dark_nav_image, "Logo for dark themes", class: "crayons-field__label" %>
<div class="flex items-center">
<% if @organization.dark_nav_image_url.present? %>
<img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= cloudinary(@organization.dark_nav_image_url, 50) %>" />
<img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= optimized_image_url(@organization.dark_nav_image_url, width: 50) %>" />
<% end %>
<%= f.file_field :dark_nav_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
</div>

View file

@ -82,10 +82,11 @@ RSpec.describe PodcastEpisodeDecorator, type: :decorator do
it "responds with a hash with metadata used in native mobile players" do
pe = build(:podcast_episode)
metadata = pe.decorate.mobile_player_metadata
expect(metadata).to be_instance_of(Hash)
expect(metadata[:podcastName]).to eq(pe.podcast.title)
expect(metadata[:episodeName]).to eq(pe.title)
expect(metadata[:podcastImageUrl]).to include(pe.podcast.image_url)
expect(metadata).to eq({
podcastName: pe.podcast.title,
episodeName: pe.title,
podcastImageUrl: pe.podcast.image_url
})
end
end
end

View file

@ -188,17 +188,17 @@ RSpec.describe ApplicationHelper, type: :helper do
describe "#cloudinary" do
it "returns cloudinary-manipulated link" do
image = helper.cloudinary(Faker::Placeholdit.image)
image = helper.optimized_image_url(Faker::Placeholdit.image)
expect(image).to start_with("https://res.cloudinary.com")
.and include("image/fetch/", "/c_limit,f_auto,fl_progressive,q_80,w_500/")
end
it "returns an ASCII domain for Unicode input" do
expect(helper.cloudinary("https://www.火.dev/image.png")).to include("https://www.xn--vnx.dev")
expect(helper.optimized_image_url("https://www.火.dev/image.png")).to include("https://www.xn--vnx.dev")
end
it "keeps an ASCII domain as ASCII" do
expect(helper.cloudinary("https://www.xn--vnx.dev/image.png")).to include("https://www.xn--vnx.dev")
expect(helper.optimized_image_url("https://www.xn--vnx.dev/image.png")).to include("https://www.xn--vnx.dev")
end
end

View file

@ -40,7 +40,8 @@ RSpec.describe "ArticlesShow", type: :request do
"logo" => {
"@context" => "http://schema.org",
"@type" => "ImageObject",
"url" => ApplicationController.helpers.cloudinary(SiteConfig.logo_png, 192, 80, "png"),
"url" => ApplicationController.helpers.optimized_image_url(SiteConfig.logo_png, width: 192,
fetch_format: "png"),
"width" => "192",
"height" => "192"
}