Module: CarrierWave::Cloudflare::ActionView::ResponsiveImagesHelper

Defined in:
lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb

Constant Summary collapse

CDN_TRANSFORM_KEYS = 
CarrierWave::Cloudflare::URL::ALLOWED_OPTIONS.map(&:to_sym)

Instance Method Summary collapse

Instance Method Details

#cdn_transformed(url, **options) ⇒ Object

Returns an image URL with CDN transformations applied. Can process already transformed URLs, in that case the options will be merged together.

Examples

cdn_transformed('/img.jpg', width: 400)
# => '/cdn-cgi/image/width=400/img.jpg'

cdn_transformed('/cdn-cgi/image/width=100,fit=pad/img.jpg', width: 333)
# => '/cdn-cgi/image/width=333,fit=pad/img.jpg'



21
22
23
24
25
26
27
28
29
 
# File 'lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb', line 21

def cdn_transformed(url, **options)
  base_options = BaseUploader.default_cdn_options

  CarrierWave::Cloudflare::URL.transform(
    url,
    **base_options,
    **options
  )
end

#hidpi_image_srcset(url, dprs: nil, **options) ⇒ Object

Like #hidpi_image_tag, but returns an scrset attribute value.



57
58
59
60
61
62
63
64
65
 
# File 'lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb', line 57

def hidpi_image_srcset(url, dprs: nil, **options)
  return nil unless url.present?

  url = url.url if url.is_a?(CarrierWave::Uploader)

  (dprs || [1, 2]).map do |dpr|
    [cdn_transformed(url, dpr: dpr, **options), "#{dpr}x"].join(" ")
  end.join(", ")
end

#hidpi_image_tag(url, dprs: nil, **options) ⇒ Object

Returns an image tag with with scaled variations (via ‘srcset`) attribute for devices with different DPR values.

The transformation of the original image should be specified via options.

Examples

hidpi_image_tag('/bird.jpg', width: 400, height: 100, alt: 'A bird')

hidpi_image_tag('/bird.jpg', width: 400, drps: [1, 2])



43
44
45
46
47
48
49
50
51
52
53
54
 
# File 'lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb', line 43

def hidpi_image_tag(url, dprs: nil, **options)
  url = url.url if url.is_a?(CarrierWave::Uploader)
  transform, rest = split_cdn_transform_options(options)

  image_tag(
    cdn_transformed(url, **transform),
    srcset: hidpi_image_srcset(url, dprs: dprs, **transform),
    width: transform[:width],
    height: transform[:height],
    **rest
  )
end

#responsive_image_tag(url, width:, sizes: nil, dprs: [1, 2], **options) ⇒ Object

Returns a reponsive image tag with variations.

Examples

responsive_image_tag('/bird.jpg', width: 1200, sizes:
                     { phone: 600, tablet: 800 })



74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
# File 'lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb', line 74

def responsive_image_tag(url, width:, sizes: nil, dprs: [1, 2], **options)
  url = url.url if url.is_a?(CarrierWave::Uploader)

  if sizes.nil?
    return hidpi_image_tag(url, width: width, **options)
  end

  sizes[:default] = width

  breakpoints = {
    phone: "(max-width: 767px)",
    mobile: "(max-width: 767px)", # an alias for :phone
    tablet: "(max-width: 1023px)",
    laptop: "(max-width: 1279px)",
    desktop: "(min-width: 1280px)",
    default: nil
  }

  sizes_attr = breakpoints.map do |device, media|
    next nil unless sizes[device]

    [media, "#{sizes[device]}px"].compact.join(" ")
  end.compact.join(", ")

  transform, rest = split_cdn_transform_options(options)
  base_version = cdn_transformed(url, width: width, **transform)

  # construct the array of available variation sizes in `srcset`
  variations = scrset_variations_from_breakpoints(sizes, dprs: dprs)

  srcset = variations.map do |size|
    scale = (size.to_f / width).round(2)
    [cdn_transformed(url, width: width, **transform, dpr: scale), "#{size}w"]
  end

  image_tag(
    base_version,
    srcset: srcset,
    sizes: sizes_attr,
    width: width,
    height: transform[:height],
    **rest
  )
end

#scrset_variations_from_breakpoints(breakpoints, dprs:, granularity: 180) ⇒ Object 



119
120
121
122
123
124
125
 
# File 'lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb', line 119

def scrset_variations_from_breakpoints(breakpoints, dprs:, granularity: 180)
  # [300, 900] => [300, 600, 900, 1800]
  doubled = breakpoints.values.product(dprs).map { |s, d| (s * d).round }

  # [100, 101, 150, 250, 320] => [100, 250, 320]
  doubled.uniq { |s| s / granularity }
end

#split_cdn_transform_options(options) ⇒ Object

returns a pair of transformation options and other options



128
129
130
131
132
133
 
# File 'lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb', line 128

def split_cdn_transform_options(options)
  [
    options.slice(*CDN_TRANSFORM_KEYS),
    options.except(*CDN_TRANSFORM_KEYS)
  ]
end