Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal 8: How to Get Image Style Tokens for Metatags

Parent Feed: 

It turns out that image style tokens are an easter egg of the regular Token module, ported in from the Imagecache Token module on this ticket.

Image style tokens don't show up in the media browser, and so you sort of have to guess at how to use them. I figured it out by studying the merged commit that added the functionality.

Here's the token string you need, replacing field_my_image_field with your image field's name (which you can get from the field management page of your entity) and my_image_style with your image style machine name (which you can get from the URL of your image style's edit page):

[node:field_my_image_field:entity:field_image:my_image_style:url]

Here's what my metatag looked like:

[node:field_primary_image:entity:field_image:twitter_card:url]

You can also get the following properties instead of url:

Width:

[node:field_my_image_field:entity:field_image:my_image_style:width]

Height:

[node:field_my_image_field:entity:field_image:my_image_style:height]

Filesize:

[node:field_my_image_field:entity:field_image:my_image_style:filesize]

URI (e.g.: public://styles/my_image_style/public/myfile.png):

[node:field_my_image_field:entity:field_image:my_image_style:uri]

About the Author

Hi. My name is Jeremiah John. I'm a sf/f writer and activist.

I just completed a dystopian science fiction novel. I run a website which I created that connects farms with churches, mosques, and synagogues to buy fresh vegetables directly and distribute them on a sliding scale to those in need.

In 2003, I spent six months in prison for civil disobedience while working to close the School of the Americas, converting to Christianity, as one does, while I was in the clink.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web