Overlay height

      Last updated May 18, 2020

    The overlay-height parameter sets the height of the overlay image 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.

    1
    2
    3
    4
    5
    6
    7
    
    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.

    1
    2
    3
    4
    5
    6
    7
    
    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);
     }
    
    Back to Top