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

Add loading='lazy' attribute to some images (#2776)

Browse source
This commit is contained in:
Ben Halpern 2019-05-09 16:37:06 -04:00 • committed by GitHub
parent e0d4329089
commit b645942dd2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/utilities/buildArticleHTML.js.erb
View file

@ -49,7 +49,7 @@ function buildArticleHTML(article) {
var profileUsername = article.user.username
var orgHeadline = "";
if (article.organization && !document.getElementById("organization-article-index")) {
orgHeadline = '<div class="article-organization-headline"><a class="org-headline-filler" href="/'+article.organization.slug+'"><span class="article-organization-headline-inner"><img alt="'+article.organization.name+' logo" src="'+article.organization.profile_image_90+'">'+article.organization.name+'</span></a></div>'
orgHeadline = '<div class="article-organization-headline"><a class="org-headline-filler" href="/'+article.organization.slug+'"><span class="article-organization-headline-inner"><img alt="'+article.organization.name+' logo" src="'+article.organization.profile_image_90+'" loading="lazy">'+article.organization.name+'</span></a></div>'
}
var bodyTextSnippet = "";
var commentsBlobSnippet = "";
@ -115,7 +115,7 @@ function buildArticleHTML(article) {
'+orgHeadline+'\
<div class="small-pic">\
<a href="/'+profileUsername+'" class="small-pic-link-wrapper">\
<img src="'+picUrl+'" alt="'+profileUsername+' profile">\
<img src="'+picUrl+'" alt="'+profileUsername+' profile" loading="lazy">\
</a>\
</div>\
<a href="'+article.path+'" class="small-pic-link-wrapper index-article-link" id="article-link-'+article.id+'">\

2
app/labor/markdown_parser.rb
View file

@ -90,7 +90,7 @@ class MarkdownParser
next unless src
# allow image to render as-is
next if allowed_image_host?(src)
img["loading"] = "lazy"
img["src"] = if giphy_img?(src)
src.gsub("https://media.", "https://i.")
else

1
app/views/additional_content_boxes/_article_followable_area.html.erb
View file

@ -22,6 +22,7 @@
<img class="profile-image"
src="<%= ProfileImage.new(followable).get(200) %>"
alt="<%= followable.name %> profile image"
loading="lazy"
data-details="<%= followable&.slug if classification == "boosted" %>__PROFILE"
style="border: 4px solid <%= followable.bg_color_hex %>" /></a>
</div>

1
app/views/articles/_bottom_content.html.erb
View file

@ -11,6 +11,7 @@
quality: "auto",
flags: "progressive",
fetch_format: "auto",
loading: "lazy",
sign_url: true,
alt: "#{article.user.username} profile image") %>
</div>

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

@ -16,8 +16,8 @@
<% @sponsors.each do |organization| %>
<div class="sidebar-sponsor">
<a class="partner-link" href="<%= organization.sponsorship_url %>" target="_blank" data-details="<%= organization.slug %>__image">
<img src="<%= cloudinary(organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" class="partner-image-light-mode" />
<img src="<%= cloudinary(organization.dark_nav_image_url || organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" class="partner-image-dark-mode" />
<img src="<%= cloudinary(organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-light-mode" />
<img src="<%= cloudinary(organization.dark_nav_image_url || organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-dark-mode" />
</a>
<div class="sponsor-tagline" style="display:inline;">
<%= organization.sponsorship_tagline %>

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

@ -99,7 +99,7 @@
</div>
<% end %>
<a class="primary-sticky-nav-element primary-sticky-nav-author-element" href="<%= article.path %>">
<img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" alt="<%= article.user.name %> profile image">
<img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" loading="lazy" alt="<%= article.user.name %> profile image">
<%= article.title %>
<div class="primary-sticky-nav-element-details">
<% article.decorate.cached_tag_list_array.each do |tag| %>
@ -115,11 +115,11 @@
<div class="primary-sticky-nav-element-wrapper">
<% if index == 0 %>
<div class="primary-sticky-nav-title">
<img src="<%= asset_path "emoji/apple-fire.png" %>" alt="Fire emoji"> Trending on <a href="https://dev.to">dev.to</a>
<img src="<%= asset_path "emoji/apple-fire.png" %>" alt="Fire emoji" loading="lazy"> Trending on <a href="https://dev.to">dev.to</a>
</div>
<% end %>
<a class="primary-sticky-nav-element" href="<%= article.path %>">
<img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" alt="<%= article.user.name %> profile image">
<img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" loading="lazy" alt="<%= article.user.name %> profile image">
<%= article.title %>
<div class="primary-sticky-nav-element-details">
<% article.decorate.cached_tag_list_array.each do |tag| %>