role="figure"
class="dialogblock <%= role %>"
data-avatar="<%= attr 'avatar' %>">
<%=
# We're making it from the sources with the least widespread usage in
# order to make it with a nice fallback. In other words, the last one
# should be widespread.
sizes = [ 128 ]
formats = [ "avif", "webp" ]
sticker = attr('avatar').to_kebab
# Linking the sources with the sizes.
sources = formats.product(sizes).map! do |metadata|
format = metadata[0]
size = metadata[1]
src = "#{sticker}/#{size}x#{size}/#{attr 'state'}.#{format}"
image_uri = parent.image_uri src, 'avatarsdir'
<<~HTML
HTML
end
# Linking the fallback image.
fallback_format = formats.last
fallback_src = "#{sticker}/#{attr 'state'}.#{fallback_format}"
fallback_image_uri = parent.image_uri fallback_src, 'avatarsdir'
sources.append <<~HTML
HTML
sources.join ' '
%>