LOG IN SIGN UP
Documentation

Overlay Height

Description

The overlay height parameter sets the height of the overlay in pixels or percent.

API Pattern

Parameter

Parameter Description
overlay-height Height of the overlay image.

Parameter Values

Value Units Description
Integer Pixels A whole number between 1 and 8192.
Float Percentage Decimal number between 0.0 and 0.99.

Notes

  1. When the overlay height value is specified as a percentage the height is relative to the output image.
  2. Because we use a positive float between 0.0 and 0.99 to return a percentage-based scaled overlay height, in order to return an overlay image that has a 100% height or more, a p parameter can be appended to the value. For example, overlay-height=250p would return an overlay image that is 250% the height of the output image. We use p as a simple way to represent percent.
  3. If the overlay image height is larger than output image dimensions set using height, the overlay image will be cropped.
  4. Pixel rounding is performed on all calculations in a decimal format (with as much accuracy as possible). The final value is then rounded down.

Examples

Pixel Overlay Resize - Resize the overlay height to 50px.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-height=50";
    }
  return(lookup);
 }

Percentage Overlay Resize - Resize the overlay to be 75% the height of the output image.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-height=0.75";
    }
  return(lookup);
 }