Module: Www::ImagesHelper

Includes:
ActionView::Helpers::TagHelper
Included in:
ApplicationHelper, Liquid::Tags::Image, FullWidthLandingPageHeaderComponent
Defined in:
app/helpers/www/images_helper.rb

Overview

View helper: images.

Instance Method Summary collapse

Instance Method Details

#image_asset_tag(image_or_id, options = {}) ⇒ ActiveSupport::SafeBuffer?

Creates an image tag based on a digital asset image or loads up an image based on the friendly id
Pass options supported by image url, see image.rb#image_url
class, alt, itemprop all supported
lazyload: true/false to set all the lazy class
sizes: override the sizes attribute otherwise default to auto
include_srcset: true/false, default false, generates a srcset

Parameters:

  • image_or_id (Image, Integer, String) —

    image record, id, or friendly slug

  • options (Hash) (defaults to: {}) —

    tag and URL options forwarded to Www::ImagePresenter#image_tag

Options Hash (options):

  • class (String) —

    CSS classes for the <img>

  • alt (String) —

    alt text (defaults to the image title)

  • itemprop (String) —

    schema.org itemprop attribute

  • style (String) —

    inline style attribute

  • title (String) —

    title attribute

  • data (Hash) —

    data-* attributes

  • lazyload (Boolean) —

    native lazy loading (default true)

  • fetchpriority (String) —

    fetchpriority attribute (e.g. "high")

  • sizes (String) —

    sizes attribute override

  • include_srcset (Boolean) —

    generate a srcset (default true)

  • viewport_widths (Array<Integer>) —

    srcset candidate widths

  • crop_aspect_ratio (Float) —

    height/width ratio applied to srcset entries

  • width (Integer) —

    requested width in pixels

  • height (Integer) —

    requested height in pixels

  • encode_format (String) —

    output format (e.g. "webp")

  • link_preload (Boolean) —

    emit a rel=preload hint for the image

Returns:

  • (ActiveSupport::SafeBuffer, nil) —

    the image tag HTML, or nil when blank



53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
# File 'app/helpers/www/images_helper.rb', line 53

def image_asset_tag(image_or_id, options = {})
  return if image_or_id.blank?

  link_preload = options.delete(:link_preload)
  image = get_image(image_or_id, options)
  image_tag_html = Www::ImagePresenter.new(image, self).image_tag(options)

  # get the srcset and sizes
  # Skip preloading in development to avoid warnings
  if link_preload && !Rails.env.development? && (img_tag = Nokogiri::HTML(image_tag_html).css('img').try(:[], 0))
    image_srcset = img_tag['srcset']
    image_href = img_tag['src']
    image_sizes = img_tag['sizes']
    image_sizes = nil if image_sizes == 'auto' # Remove legacy lazysizes 'auto' value
    image_sizes ||= '100vw'
    fetchpriority = img_tag['fetchpriority'].presence

    if respond_to?(:response) && response
      preload_link = "<#{image_href}>; rel=preload; as=image; imagesrcset=\"#{image_srcset}\"; imagesizes=\"#{image_sizes}\""
      response.headers['Link'] = [response.headers['Link'].presence, preload_link].compact.join(', ')
    else
      content_for(:preloads) do
        tag.link(rel: 'preload', as: 'image', href: image_href, imagesrcset: image_srcset,
                 imagesizes: image_sizes, fetchpriority: fetchpriority)
      end
    end
  end
  image_tag_html
end

#image_asset_url(image_id, options = {}) ⇒ String?

Returns the (ImageKit) URL for a digital asset image.

Parameters:

  • image_id (Image, Integer, String) —

    image record, id, or friendly slug

  • options (Hash) (defaults to: {}) —

    URL options forwarded to Image#image_url

Options Hash (options):

  • size (String) —

    dimensions like "100x100"

  • width (Integer) —

    requested width in pixels

  • height (Integer) —

    requested height in pixels

  • encode_format (String) —

    output format (e.g. "webp")

  • focus (String) —

    smart-crop focus (e.g. "face")

  • relative (Boolean) —

    return a host-relative URL

Returns:

  • (String, nil) —

    the image URL, or nil when no image resolves



19
20
21
22
23
24
25
 
# File 'app/helpers/www/images_helper.rb', line 19

def image_asset_url(image_id, options = {})
  return if image_id.blank?

  image = image_id if image_id.is_a?(Image)
  image ||= get_image(image_id, options)
  image.image_url(options)
end

#picture_asset_tag(image_or_id, sources:, **base) ⇒ ActiveSupport::SafeBuffer?

Renders a <picture> with art-directed <source>s plus one media-scoped
rel=preload <link> per source. Use for a hero/LCP image that needs a
DIFFERENT ImageKit crop per breakpoint (e.g. a wide desktop band vs a tall
mobile smart-crop): a single <img> either object-fit-slices the subject
on the off-ratio viewport, or preloads a candidate the other viewport
won't render.

Each sources entry is a hash of #image_asset_tag options for one crop
(crop_aspect_ratio, focus, sizes, viewport_widths, …) plus a
media: query. The LAST entry becomes the <picture>'s <img> fallback —
its media: is used only to scope its preload. Shared, crop-independent
options (alt, class, style, fetchpriority, lazyload,
encode_format, link_preload) go in **base. Preloads emit into
content_for(:preloads) (see _cms_header.html.erb) WITH media, because
the HTTP Link-header preload #image_asset_tag uses can't be media-scoped.

Parameters:

  • image_or_id (Image, Integer, String)
  • sources (Array<Hash>) —

    one options hash per crop, each with :media

  • base (Hash) —

    shared, crop-independent options forwarded to each crop

Options Hash (**base):

  • alt (String) —

    alt text

  • class (String) —

    CSS classes for the <img>

  • style (String) —

    inline style attribute

  • fetchpriority (String) —

    fetchpriority attribute (e.g. "high")

  • lazyload (Boolean) —

    native lazy loading

  • encode_format (String) —

    output format (e.g. "webp")

  • link_preload (Boolean) —

    emit a media-scoped rel=preload per source

Returns:

  • (ActiveSupport::SafeBuffer, nil) 


110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
# File 'app/helpers/www/images_helper.rb', line 110

def picture_asset_tag(image_or_id, sources:, **base)
  return if image_or_id.blank? || sources.blank?

  image = get_image(image_or_id, base)
  return if image.blank?

  preload = base.delete(:link_preload) && !Rails.env.development?
  parts = []
  preloads = []

  sources.each_with_index do |source, index|
    presenter = Www::ImagePresenter.new(image, self)
    img_html = presenter.image_tag(base.merge(source.except(:media)))

    parts << if index == sources.length - 1
               img_html # last crop is the <img> fallback
             else
               tag.source(srcset: presenter.imagesrcset, sizes: presenter.imagesizes, media: source[:media])
             end

    if preload && presenter.imagesrcset.present?
      preloads << tag.link(rel: 'preload', as: 'image', media: source[:media], fetchpriority: base[:fetchpriority],
                           imagesrcset: presenter.imagesrcset, imagesizes: presenter.imagesizes)
    end
  end

  content_for(:preloads) { safe_join(preloads) } if preloads.any?
  tag.picture(safe_join(parts))
end