maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add loading=lazy to image tags (#10888)

Browse source 
* Add loading=lazy to image tags

* Fix test

* Lazy-load some obvious templates

* Lazy-load more verified templates
This commit is contained in:
Dan Wallis 2021-05-27 18:01:21 +01:00 • committed by GitHub
parent 24d46ccb65
commit 521bb09394
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 54 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/utilities/buildArticleHTML.js
View file

@ -7,7 +7,7 @@ function buildArticleHTML(article) {
return `<article class="crayons-story crayons-podcast-episode mb-2">
<div class="crayons-story__body flex flex-start">
<a href="${article.podcast.slug}" class="crayons-podcast-episode__cover">
<img src="${article.podcast.image_url}" alt="${article.podcast.title}" />
<img src="${article.podcast.image_url}" alt="${article.podcast.title}" loading="lazy" />
</a>
<div class="pt-2 flex-1">
<p class="crayons-podcast-episode__author">

1
app/javascript/listings/singleListing/AuthorInfo.jsx
View file

@ -40,6 +40,7 @@ export const AuthorInfo = ({ listing, onCategoryClick }) => {
width="32"
height="32"
className="crayons-avatar__image"
loading="lazy"
/>
</a>

1
app/javascript/onboarding/components/FollowUsers.jsx
View file

@ -190,6 +190,7 @@ export class FollowUsers extends Component {
className="user-avatar"
src={user.profile_image_url}
alt=""
loading="lazy"
/>
</figure>
<div className="user-info">

3
app/views/admin/articles/_individual_article.html.erb
View file

@ -76,7 +76,8 @@
<% end %>
<% if article.main_image.present? %>
<div style="max-height:450px;overflow:hidden;">
<img src="<%= cloud_cover_url(article.main_image) %>" style="width:100%;max-width:380px;border-radius:8px;background:<%= article.main_image_background_hex_color %>;" alt="cover image" /><br />
<img src="<%= cloud_cover_url(article.main_image) %>" style="width:100%;max-width:380px;border-radius:8px;background:<%= article.main_image_background_hex_color %>;" alt="cover image" loading="lazy" />
<br />
</div>
<% end %>
<%= form_with url: admin_article_path(article.id), model: article, local: true do |f| %>

2
app/views/admin/badge_achievements/index.html.erb
View file

@ -34,7 +34,7 @@
<td><%= badge_achievement.badge.title %></td>
<h5>
<td class="justify-content-center">
<img class="mx-auto mt-3" width="40" height="40" src="<%= badge_achievement.badge.badge_image %>" alt="badge image">
<img class="mx-auto mt-3" width="40" height="40" src="<%= badge_achievement.badge.badge_image %>" alt="badge image" loading="lazy" />
</td>
<td><%= link_to "Remove", admin_badge_achievement_path(badge_achievement), class: "crayons-btn crayons-btn--danger", method: :delete, data: { confirm: "Are you sure?" } %></td>
</h5>

2
app/views/admin/badges/index.html.erb
View file

@ -19,7 +19,7 @@
<td><%= link_to badge.title, edit_admin_badge_path(badge.id) %></td>
<td class="justify-content-center"><%= badge.slug %></td>
<td class="justify-content-center">
<img class="mx-auto mt-3" width="40" height="40" src="<%= badge.badge_image %>" alt="badge image">
<img class="mx-auto mt-3" width="40" height="40" src="<%= badge.badge_image %>" alt="badge image" loading="lazy" />
</td>
</tr>
<% end %>

2
app/views/admin/comments/index.html.erb
View file

@ -19,7 +19,7 @@
<h5 class="card-title text-center">
<% if comment.user %>
<a href="<%= comment.user.path %>" target="_blank" rel="noopener">
<img class="rounded" height="30" src="<%= Images::Profile.call(comment.user.profile_image_url, length: 50) %>" alt="<%= comment.user.username %> profile" /> <%= comment.user.username %>
<img class="rounded" height="30" src="<%= Images::Profile.call(comment.user.profile_image_url, length: 50) %>" alt="<%= comment.user.username %> profile" loading="lazy" /> <%= comment.user.username %>
</a>
<% end %>
<% if comment.user && comment.user.twitter_username.present? %>

10
app/views/admin/configs/show.html.erb
View file

@ -692,7 +692,7 @@
value: Settings::General.main_social_image,
placeholder: Constants::Settings::General::DETAILS[:main_social_image][:placeholder] %>
<% if Settings::General.main_social_image.present? %>
<img alt="main social image" class="img-fluid" src="<%= Settings::General.main_social_image %>" width="600px" height="337px" />
<img alt="main social image" class="img-fluid" src="<%= Settings::General.main_social_image %>" width="600" height="337" loading="lazy" />
<% end %>
</div>
@ -703,7 +703,7 @@
class: "form-control",
value: Settings::General.favicon_url,
placeholder: Constants::Settings::General::DETAILS[:favicon_url][:placeholder] %>
<img alt="favicon" class="preview" src="<%= Images::Optimizer.call(Settings::General.favicon_url, width: 32) %>" width="32px" height="32px" />
<img alt="favicon" class="preview" src="<%= Images::Optimizer.call(Settings::General.favicon_url, width: 32) %>" width="32" height="32" loading="lazy" />
</div>
<div class="crayons-field">
@ -714,7 +714,7 @@
value: Settings::General.logo_png,
placeholder: Constants::Settings::General::DETAILS[:logo_png][:placeholder] %>
<% if Settings::General.logo_png.present? %>
<img src="<%= Images::Optimizer.call(Settings::General.logo_png, width: 128) %>" width="128px" height="128px" />
<img src="<%= Images::Optimizer.call(Settings::General.logo_png, width: 128) %>" width="128" height="128" loading="lazy" />
<% end %>
</div>
@ -769,7 +769,7 @@
placeholder: Constants::Settings::General::DETAILS[:mascot_image_url][:placeholder] %>
<div class="col-12">
<img alt="Mascot image" class="img-fluid" src="<%= Settings::General.mascot_image_url %>" />
<img alt="Mascot image" class="img-fluid" src="<%= Settings::General.mascot_image_url %>" loading="lazy" />
</div>
</div>
@ -933,7 +933,7 @@
placeholder: Constants::Settings::General::DETAILS[:onboarding_background_image][:placeholder] %>
<div class="row mt-2">
<div class="col-12">
<img alt="onboarding background image" class="img-fluid" src="<%= Settings::General.onboarding_background_image %>" />
<img alt="onboarding background image" class="img-fluid" src="<%= Settings::General.onboarding_background_image %>" loading="lazy" />
</div>
</div>
</div>

4
app/views/admin/events/index.html.erb
View file

@ -11,7 +11,7 @@
<div class="flex py-2 items-center">
<%= event.title %>
<% if event.cover_image_url.present? %>
<img class="mx-auto mt-3" width="40" height="40" src="<%= event.cover_image_url %>" alt="event cover image">
<img class="mx-auto mt-3" width="40" height="40" src="<%= event.cover_image_url %>" alt="event cover image" loading="lazy" />
<% end %>
<%= link_to "Edit", edit_admin_event_path(event.id), class: "ml-auto crayons-btn crayons-btn--s crayons-btn--secondary" %>
</div>
@ -28,7 +28,7 @@
<div class="flex py-2 items-center">
<%= event.title %>
<% if event.cover_image_url.present? %>
<img class="mx-auto mt-3 justify-content-center" width="40" height="40" src="<%= event.cover_image_url %>" alt="event cover image">
<img class="mx-auto mt-3 justify-content-center" width="40" height="40" src="<%= event.cover_image_url %>" alt="event cover image" loading="lazy" />
<% end %>
<%= link_to "Edit", edit_admin_event_path(event.id), class: "ml-auto crayons-btn crayons-btn--s crayons-btn--secondary" %>
</div>

4
app/views/articles/_single_story.html.erb
View file

@ -25,12 +25,12 @@
<div class="crayons-story__author-pic">
<% if story.cached_organization && !@organization_article_index %>
<a class="crayons-logo crayons-logo--l" href="/<%= story.cached_organization.slug %>">
<img alt="<%= story.cached_organization.name %> logo" src="<%= story.cached_organization.profile_image_90 %>" class="crayons-logo__image">
<img alt="<%= story.cached_organization.name %> logo" src="<%= story.cached_organization.profile_image_90 %>" class="crayons-logo__image" loading="lazy" />
</a>
<% end %>
<a href="/<%= story.cached_user.username %>" class="crayons-avatar <% if story.cached_organization && !@organization_article_index %> crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted <% else %> crayons-avatar--l <% end %> ">
<img src="<%= Images::Profile.call(story.cached_user.profile_image_url, length: 90) %>" alt="<%= story.cached_user.username %> profile" class="crayons-avatar__image" />
<img src="<%= Images::Profile.call(story.cached_user.profile_image_url, length: 90) %>" alt="<%= story.cached_user.username %> profile" class="crayons-avatar__image" loading="lazy" />
</a>
</div>
<div>

2
app/views/articles/_sticky_nav.html.erb
View file

@ -4,7 +4,7 @@
<div class="-mt-4">
<a href="<%= @actor.path %>" class="flex">
<span class="<% if @actor.class.name == "User" %>crayons-avatar crayons-avatar--xl<% elsif @actor.class.name == "Organization" %>crayons-logo crayons-logo--xl<% end %> mr-2 shrink-0">
<img src="<%= Images::Profile.call(@actor.profile_image_url, length: 90) %>" class="<% if @actor.class.name == "User" %>crayons-avatar__image<% elsif @actor.class.name == "Organization" %>crayons-logo__image<% end %>" alt="<%= @actor.name %> profile image">
<img src="<%= Images::Profile.call(@actor.profile_image_url, length: 90) %>" class="<% if @actor.class.name == "User" %>crayons-avatar__image<% elsif @actor.class.name == "Organization" %>crayons-logo__image<% end %>" alt="<%= @actor.name %> profile image" loading="lazy" />
</span>
<span class="crayons-link crayons-subtitle-2 mt-5"><%= @actor.name %></span>
</a>

3
app/views/badges/index.html.erb
View file

@ -11,7 +11,8 @@
class="badge-image <%= "unearned" unless badge.id.in?(@earned_badge_achievements) %>"
src="<%= optimized_image_url(badge.badge_image_url, width: 375) %>"
alt="<%= badge.title %> badge"
title="<%= badge.title %>">
title="<%= badge.title %>"
loading="lazy" />
</a>
<% end %>
</div>

2
app/views/comments/_comment_avatar.html.erb
View file

@ -4,6 +4,6 @@
</span>
<% else %>
<a href="<%= URL.user(comment.user) %>" class="shrink-0 crayons-avatar <% if comment.depth == 0 %>m:crayons-avatar--l mt-4 m:mt-3<% else %>mt-4<% end %>">
<img class="crayons-avatar__image" width="32" height="32" src="<%= Images::Profile.call(comment.user.profile_image_url, length: 50) %>" alt="<%= comment.user.username %> profile image" />
<img class="crayons-avatar__image" width="32" height="32" src="<%= Images::Profile.call(comment.user.profile_image_url, length: 50) %>" alt="<%= comment.user.username %> profile image" loading="lazy" />
</a>
<% end %>

4
app/views/comments/_form.html.erb
View file

@ -29,7 +29,7 @@
<% end %>
<span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0">
<img src="<%= Images::Optimizer.call(Settings::General.logo_png, width: 256) %>" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar">
<img src="<%= Images::Optimizer.call(Settings::General.logo_png, width: 256) %>" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" />
</span>
<div class="comment-form__inner">
<div class="comment-form__field">
@ -72,7 +72,7 @@
<button type="button" class="moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Moderator</button>
</header>
<img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading">
<img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading" loading="lazy" />
<div class="personal-responses-container">
<%# filled by JS %>

4
app/views/dashboards/_dashboard_article_row.html.erb
View file

@ -6,7 +6,9 @@
<% end %>
<a href="<%= article.current_state_path %>" class="inline-flex items-center">
<% if article.organization_id %>
<span class="crayons-logo crayons-logo--s mr-2 shrink-0"><img class="crayons-logo__image align-top" src="<%= article.organization&.profile_image_90 %>" alt="<%= article.organization&.name %>" width="24" height="24"></span>
<span class="crayons-logo crayons-logo--s mr-2 shrink-0">
<img class="crayons-logo__image align-top" src="<%= article.organization&.profile_image_90 %>" alt="<%= article.organization&.name %>" width="24" height="24" loading="lazy" />
</span>
<% end %>
<%= sanitize_and_decode article.title %>
</a>

2
app/views/dashboards/followers.html.erb
View file

@ -22,7 +22,7 @@
<% if user %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" />
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" loading="lazy" />
</a>
<div class="pl-4 s:pl-0 self-center">

2
app/views/dashboards/following_organizations.html.erb
View file

@ -22,7 +22,7 @@
<% organization = follow.followable %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= organization.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
<img alt="<%= organization.name %> logo" class="crayons-logo__image" src="<%= Images::Profile.call(organization.profile_image_url, length: 60) %>" />
<img alt="<%= organization.name %> logo" class="crayons-logo__image" src="<%= Images::Profile.call(organization.profile_image_url, length: 60) %>" loading="lazy" />
</a>
<div class="pl-4 s:pl-0 self-center">

2
app/views/dashboards/following_podcasts.html.erb
View file

@ -22,7 +22,7 @@
<% podcast = follow.followable %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="/<%= podcast.path %>" class="crayons-logo crayons-logo--2xl s:mb-2 s:mx-auto">
<img alt="<%= podcast.name %> logo" class="crayons-logo__image" src="<%= podcast.image_url %>" />
<img alt="<%= podcast.name %> logo" class="crayons-logo__image" src="<%= podcast.image_url %>" loading="lazy" />
</a>
<div class="pl-4 s:pl-0 self-center">

2
app/views/dashboards/following_users.html.erb
View file

@ -23,7 +23,7 @@
<% if user %>
<div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
<a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" />
<img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= Images::Profile.call(user.profile_image_url, length: 60) %>" loading="lazy" />
</a>
<div class="pl-4 s:pl-0 self-center">

2
app/views/events/_event.html.erb
View file

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

2
app/views/layouts/_signup_modal.html.erb
View file

@ -2,7 +2,7 @@
<div class="authentication-modal__container">
<figure class="authentication-modal__image-container">
<img class="authentication-modal__image" src="<%= optimized_image_url(Settings::General.logo_png, width: 190) %>"
alt="<%= community_name %>" />
alt="<%= community_name %>" loading="lazy" />
</figure>
<div class="authentication-modal__content">
<p class="authentication-modal__description">

2
app/views/mailers/notify_mailer/new_badge_email.html.erb
View file

@ -3,7 +3,7 @@
Congratulations, <%= @user.name %>! You received the <b><%= @badge.title %></b> badge!
</p>
<p style="text-align:center;padding:20px 0px">
<img src="<%= @badge.badge_image_url %>" style="height:200px" alt="<%= @badge.title %> badge">
<img src="<%= @badge.badge_image_url %>" style="height:200px" alt="<%= @badge.title %> badge" loading="lazy" />
</p>
<p>
<%= @badge.description %>

2
app/views/notifications/_follow.html.erb
View file

@ -19,7 +19,7 @@
<div class="flex mb-3 max-w-100 overflow-x-hidden">
<% notification.json_data["aggregated_siblings"][0..10].each do |sibling| %>
<a href="<%= sibling["path"] %>" class="crayons-avatar crayons-avatar--l shrink-0 mx-1" <% if sibling["id"] == json_data_array.first["id"] %> tabindex="-1" aria-hidden="true"<% end %>>
<img src="<%= sibling["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= sibling["name"] %>'s profile" width="32" height="32">
<img src="<%= sibling["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= sibling["name"] %>'s profile" width="32" height="32" loading="lazy" />
</a>
<% end %>
</div>

2
app/views/organizations/_sidebar_additional.html.erb
View file

@ -18,7 +18,7 @@
<% @organization.users.find_each do |user| %>
<div class="widget-user-pic">
<a href="/<%= user.username %>">
<img src="<%= Images::Profile.call(user.profile_image_url, length: 90) %>" alt="<%= user.username %> profile image">
<img src="<%= Images::Profile.call(user.profile_image_url, length: 90) %>" alt="<%= user.username %> profile image" loading="lazy" />
</a>
</div>
<% end %>

9
app/views/pages/_editor_guide_text.html.erb
View file

@ -72,11 +72,11 @@
<%= render partial: "editor_guide_h3", locals: { id: "markdown-inline-images", title: "Inline Images" } %>
<p>
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" />
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
</p>
<pre>![Alt text of image](put-link-to-image-here)</pre>
<figure>
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" />
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
<figcaption>You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>
</figure>
@ -376,7 +376,7 @@
<%= render partial: "editor_guide_h3", locals: { id: "next-tech-embed", title: "Next Tech Embed" } %>
<p>All you need is the share URL for your sandbox. You can get the share URL by clicking
the "Share" button in the top right when the sandbox is open.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png" alt="Share Replit sandbox" /></p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png" alt="Share Replit sandbox" loading="lazy" /></p>
<pre>{% nexttech https://nt.dev/s/6ba1fffbd09e %}</pre>
<%= render partial: "editor_guide_h3", locals: { id: "instagram-embed", title: "Instagram Embed" } %>
@ -462,7 +462,8 @@
Here's an example of what to do:
<img
src="https://res.cloudinary.com/practicaldev/image/fetch/s--HjVUshkb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/8l29vxiir8k5d097o9o8.png"
alt="example image of writing lists with images in Markdown">
alt="example image of writing lists with images in Markdown"
loading="lazy" />
</p>
<p>

2
app/views/pages/_editor_liquid_help.html.erb
View file

@ -239,7 +239,7 @@
<h3>Next Tech Embed</h3>
<p>All you need is the share URL for your sandbox. You can get the share URL by clicking
the "Share" button in the top right when the sandbox is open.</p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png" alt="Share Replit sandbox" /></p>
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png" alt="Share Replit sandbox" loading="lazy" /></p>
<code>{% nexttech https://nt.dev/s/6ba1fffbd09e %}</code>
<h3>Instagram Embed</h3>
<p>All you need is the Instagram post <code>id</code> from the URL:</p>

4
app/views/pages/_editor_markdown_help.html.erb
View file

@ -22,7 +22,7 @@
<h3>Inline Images</h3>
<p>
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" />
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
</p>
<pre>![Alt text of image](put-link-to-image-here)</pre>
<figcaption> You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>
@ -48,7 +48,7 @@
otherwise it'll restart the number of the list.
Here's an example of what to do:
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HjVUshkb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/8l29vxiir8k5d097o9o8.png"
alt="example image of writing lists with images in Markdown">
alt="example image of writing lists with images in Markdown" loading="lazy" />
</p>
<p>
Here's the <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">Markdown cheatsheet</a> again for reference.

2
app/views/pages/markdown_basics.html.erb
View file

@ -23,7 +23,7 @@
<h3><strong>Inline Images</strong></h3>
<p>
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" />
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
<code>![Alt text of image](put-link-to-image-here)</code>
</p>

2
app/views/podcast_episodes/_episodes_feed.html.erb
View file

@ -4,7 +4,7 @@
<div class="small-pic">
<%= optimized_image_tag(episode.image_url || episode.podcast.image_url,
optimizer_options: { crop: "imagga_scale", width: 240, height: 240 },
image_options: { alt: episode.title }) %>
image_options: { alt: episode.title, loading: "lazy"}) %>
</div>
<div class="content">
<h3><span class="tag-identifier">podcast</span><%= episode.title %></h3>

2
app/views/stories/_sign_in_invitation.html.erb
View file

@ -2,7 +2,7 @@
<div class="authentication-feed__container">
<figure class="authentication-feed__image-container">
<img class="authentication-feed__image" src="<%= optimized_image_url(Settings::General.logo_png, width: 190) %>"
alt="Secondary <%= community_name %> logo" />
alt="Secondary <%= community_name %> logo" loading="lazy" />
</figure>
<div class="authentication-feed__content">
<h2 class="authentication-feed__title">

2
app/views/tags/index.html.erb
View file

@ -54,7 +54,7 @@
<% end %>
<% if tag.badge_id && tag.badge %>
<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" alt="" />
<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" alt="" loading="lazy" />
<% end %>
</div>
<% end %>

4
app/views/users/_badges_area.html.erb
View file

@ -9,11 +9,11 @@
<a href="<%= badge_path(achievement.badge_slug) %>"
title="<%= achievement.badge_title %>"
class="js-profile-badge <% if i >= limit %>hidden<% end %>">
<img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
alt="<%= achievement.badge_title %>"
class="mx-auto max-w-75 h-auto align-middle"
style="transform: rotate(<%= rand(-10..10) %>deg);" />
style="transform: rotate(<%= rand(-10..10) %>deg);"
loading="lazy" />
</a>
<% end %>
</div>

6
app/views/users/_profile.html.erb
View file

@ -8,7 +8,7 @@
<div class="crayons-card crayons-card--content-rows">
<div class="flex items-center">
<a href="<%= user_url(current_user) || "#" %>" aria-label="Go to your profile page" class="mr-2">
<img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="<%= community_name %> badge" height="32" width="32" class="dev-badge crayons-icon" />
<img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="<%= community_name %> badge" height="32" width="32" class="dev-badge crayons-icon" loading="lazy" />
</a>
<p>Add the <%= community_name %> badge to your personal site. <a href="/p/badges">Click here for the code</a>.</p>
</div>
@ -40,7 +40,9 @@
<div class="flex items-center">
<% if @user.profile_image_url.present? %>
<span class="crayons-avatar crayons-avatar--xl mr-2"><img alt="<%= @user.username %> profile image" src="<%= Images::Profile.call(@user.profile_image_url, length: 50) %>" class="crayons-avatar__image" /></span>
<span class="crayons-avatar crayons-avatar--xl mr-2">
<img alt="<%= @user.username %> profile image" src="<%= Images::Profile.call(@user.profile_image_url, length: 50) %>" class="crayons-avatar__image" loading="lazy" />
</span>
<% end %>
<%= f.file_field "user[profile_image]", accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
</div>

2
app/views/users/_sidebar.html.erb
View file

@ -11,7 +11,7 @@
<% @user.organizations.each do |organization| %>
<a href="/<%= organization.slug %>" class="flex items-center crayons-link crayons-link--contentful">
<span class="crayons-logo crayons-logo--l mr-2 shrink-0">
<img src="<%= Images::Profile.call(organization.profile_image_url, length: 90) %>" alt="<%= organization.name %> profile image" class="crayons-logo__image">
<img src="<%= Images::Profile.call(organization.profile_image_url, length: 90) %>" alt="<%= organization.name %> profile image" class="crayons-logo__image" loading="lazy" />
</span>
<h4 class="fs-base fw-medium"><%= organization.name %></h4>
</a>