ImgCf (img_cf v0.2.0)

This module provides a Phoenix Component <.img_cf src={Routes...} width=400 > that is a drop-in cdn + image resizing service using Cloudflare (CF) Image Resize (IR). The IR feature (paid) can resizes images for your on the fly.

From the Cloudflare website (https://developers.cloudflare.com/images/image-resizing):

You can resize, adjust quality, and convert images to WebP or AVIF format on demand.
Cloudflare will automatically cache every derived image at the edge, so you only need
to store one original image at your origin

We need to proxy all our traffic through CF, and then rewrite the image URLs we want to resize. This package makes it very easy: go to CF dashboard and

  1. Domain must be on Cloudflare.
  2. In CF Dashboard: proxy all trafic for your domain
  3. In CF Dashboard: enable the Image Resizing service
  4. In our Phoenix project: use <.img_tag src={Routes.static_path(...)} width=400>

Usage of the img_tag is almost similar to just using a regular <img ...> tag, except:

- `src` is always rewritten to the magic IR url.
- If `width`, or `height` is given, they are used for resizing.
- A retina version (`srcset` + `2x`), is always attempted, unless turned off.

Cloudflare specific options can be passed into the component with cf like so:

    <.img_cf src=... cf=[retina: false, use_img_dims: false, sharpen: "3"] >

Link to this section Summary

Functions

Doubles the :width, and/or :height if present. Otherwise returns opts untouched.

HTML image tag that provides image resizing on the fly, with no infrastructure setup.

Rewrite img to on-the-fly CloudFlare Image Resizing via special magic paths: https://developers.cloudflare.com/images/image-resizing

Link to this section Functions

Specs

double(nil | non_neg_integer()) :: {nil | non_neg_integer()} | :pop
Link to this function

get_opts_2x(opts)

Specs

get_opts_2x(opts :: Keyword.t()) :: Keyword.t()

Doubles the :width, and/or :height if present. Otherwise returns opts untouched.

Link to this function

img_cf(assigns)

HTML image tag that provides image resizing on the fly, with no infrastructure setup.

Either width, height, or srcset is required in opts.

Recommended ways of usage:

Examples

<.img_cf
  src={Routes.static_path(@conn, "/images/foobar.png")}
  width: 400
  height: 400
  cf: [retina: true, width: 400, height: 400]
/>
Link to this function

img_render(assigns)

Link to this function

maybe_merge_img_dim(opts, arg2, arg3)

Rewrite img to on-the-fly CloudFlare Image Resizing via special magic paths: https://developers.cloudflare.com/images/image-resizing

Link to this function

serialize_opts(opts)

Specs

serialize_opts(opts :: Keyword.t()) :: String.t()