cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Specify avatar dimensions in html tags

Browse source 
This prevents reflow when the images are loaded by the browser.

ActiveStorage variants are resized lazily when the image is requested,
so we only know the dimensions if the image was already loaded. This
means that there will be one reflow just after a new avatar is first
viewed.
This commit is contained in:
Andy Allan 2021-09-29 18:47:20 +01:00
parent 3617974630
commit 9f61d6c1cf
2 changed files with 69 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

45
test/helpers/user_helper_test.rb
View file

@ -12,7 +12,6 @@ class UserHelperTest < ActionView::TestCase
image = user_image(user, :class => "foo")
assert_match %r{^<img class="foo" .* src="/images/avatar_large.png" />$}, image
image = user_image(gravatar_user)
assert_match %r{^<img class="user_image" .* src="http://www.gravatar.com/avatar/.*" />$}, image
@ -66,6 +65,50 @@ class UserHelperTest < ActionView::TestCase
assert_match %r{^http://www.gravatar.com/avatar/}, url
end
def test_user_image_sizes_default_image
user = create(:user)
image = user_image(user)
assert_match %r{^<img .* width="100" height="100" .* />$}, image
thumbnail = user_thumbnail(user)
assert_match %r{^<img .* width="50" height="50" .* />$}, thumbnail
end
def test_user_image_sizes_avatar
user = create(:user)
user.avatar.attach(:io => File.open("test/gpx/fixtures/a.gif"), :filename => "a.gif")
# first time access, no width or height is found
image = user_image(user)
assert_no_match %r{^<img .* width="100" height="100" .* />$}, image
thumbnail = user_thumbnail(user)
assert_no_match %r{^<img .* width="50" height="50" .* />$}, thumbnail
# Small hacks to simulate what happens when the images have been fetched at least once before
variant = user.avatar.variant(:resize_to_limit => [100, 100])
variant.processed.send(:record).image.blob.analyze
variant = user.avatar.variant(:resize_to_limit => [50, 50])
variant.processed.send(:record).image.blob.analyze
image = user_image(user)
assert_match %r{^<img .* width="100" height="100" .* />$}, image
thumbnail = user_thumbnail(user)
assert_match %r{^<img .* width="50" height="50" .* />$}, thumbnail
end
def test_user_image_sizes_gravatar
user = create(:user, :image_use_gravatar => true)
image = user_image(user)
assert_match %r{^<img .* width="100" height="100" .* />$}, image
thumbnail = user_thumbnail(user)
assert_match %r{^<img .* width="50" height="50" .* />$}, thumbnail
end
def test_openid_logo
logo = openid_logo
assert_match %r{^<img .* class="openid_logo" src="/images/openid_small.png" />$}, logo