Google Cloud image - Web Component

The Custom Element <gcp-img> element wraps an image from Google Cloud Storage into the document.

Github Repository

Basic Usage


  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    alt="Three people sitting on a lawn and blowing bubbles."></gcp-img>

Provide a URL from Google Cloud Storage on the src attribute and the width and height (separated by a comma) of the image in the size attribute.

Don't forget to provide a descriptive alt text attribute.

Defining a fixed width

Set a Fixed Width 

  <gcp-img
    fixed
    src="https://lh3.googleusercontent.com/…"
    size="180, 112"></gcp-img>

To make the image width fixed at the specified value in size, add the fixed attribute.

Setting a different Image for Dark Mode


  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    darksrc="https://lh3.googleusercontent.com/…"></gcp-img>

To change the image on browsers that supports prefers-color-scheme: dark provide the image URL on the darksrc attribute.

Using a configuration object


  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    config="[
      {'screen':320,'size':294},
      {'screen':600,'size':574},
      {'screen':1024,'size':684}]"></gcp-img>

For responsive images provide a configuration to the config attribute.

Using a configuration object to set an art directed image


  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    config="[
      {'screen':320,'size':294},
      {'screen':600,'size':574},
      {'screen':1024,'size':684,'source':'https://lh3.googleusercontent.com/…'}]"></gcp-img>

It is possible to pass a source value on the config configuration for the size you need.

Using a configuration object to set a dark mode alternative


  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    config="[
      {'screen':320,'size':320},
      {'screen':600,'size':574},
      {'screen':1024,'size':684,'dark':'https://lh3.googleusercontent.com/…'}]"></gcp-img>

It is possible to pass a source value on the config configuration for the size you need.

Change the Cache TTL


  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    ttl="180"></gcp-img>

In case you need to specify a different cache time to live days, you can use ttl attribute.

Rotate

Change rotation 

  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="318, 512"
    rotate="270"></gcp-img>

To rotate the image clockwise use the rotate attribute. Only valid values are 90, 180 and 270

Flip

Change the Image Flip 

  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    flip="v"></gcp-img>

It is possible to flip the image using flip attribute. Only valid options are h to flip horizontally and v to flip vertically.

Image Filters

Change the Filter
Change the radius (Blur or Vignette Only)
Change the color (Vignette Only) 

  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="512, 318"
    filter="blur"
    radius="40"
    color="FC0FC0"></gcp-img>

Add some blur to the image by adding the blur value on the filter attribute. Pass a value between 0 and 100 to the radius attribute.

Smart and Circle Crop

Switch between Smart and Circular Crop 

  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="200"
    crop="smart"></gcp-img>

Crop the image to a square using the smart value on the crop attribute.

Crop the image to a circle using the circular value on the crop attribute.

Animations

Play or Stop the animation 

  <gcp-img
    src="https://lh3.googleusercontent.com/…"
    size="480, 270"
    play></gcp-img>

If the image is an animated GIF or WEBP you can toggle Play/Stop by adding or removing the play attribute.