module CarrierWave::Cloudflare::ActionView::ResponsiveImagesHelper
Constants
- CDN_TRANSFORM_KEYS
Public Instance Methods
cdn_transformed(url, **options)
click to toggle source
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'
# 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)
click to toggle source
Like hidpi_image_tag
, but returns an scrset attribute value.
# File lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb, line 55 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)
click to toggle source
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])
# 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), **rest ) end
responsive_image_tag(url, width:, sizes: nil, dprs: [1, 2], **options)
click to toggle source
Returns a reponsive image tag with variations.
Examples¶ ↑
responsive_image_tag('/bird.jpg', width: 1200, sizes: { phone: 600, tablet: 800 })
# File lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb, line 72 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, **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, **rest ) end
scrset_variations_from_breakpoints(breakpoints, dprs:, granularity: 180)
click to toggle source
# File lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb, line 115 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)
click to toggle source
returns a pair of transformation options and other options
# File lib/carrierwave/cloudflare/action_view/responsive_images_helper.rb, line 124 def split_cdn_transform_options(options) [ options.slice(*CDN_TRANSFORM_KEYS), options.except(*CDN_TRANSFORM_KEYS) ] end