Token does not return full dynamic path to Media Image URL

Question

I'm having trouble configuring Metatag for Open Graph and Twitter Card images.

I'm using Drupal 8.9 core Media Image reference field as the source.

[node:field_hero_image] (Entity reference field) just returns the bare filename.

[node:field_hero_image:entity] (The referenced entity) also returns the bare filename, not the expected path to the image.

[node:field_hero_image:target_id] Just returns an integer. (In this case, it is 1.)

I'm reduced to trying to build the path by combining Tokens and plain text, like this:

[site:url]sites/default/files/2021-01/[node:field_hero_image]

This works, but the problem is that I used the default File Directory path:

[date:custom:Y]-[date:custom:m]

That means media assets that I upload in February will be at a different path than the ones I uploaded last month, so hard-coding the path to the directory is pointless.

Now, I could change the File Directory path to a string literal like images, delete all my Media Images and recreate them.

I'm guessing there is a better approach: either a Token that returns the correct image URL, or a way to bulk reconfigure Media Image assets after moving their File Directory.

Please help!

Answer 1

Would you believe:

node -> media field -> media entity -> image field -> image style -> url

Makes sense, right? (I mean, it makes sense if you understand core Media and Entity References.)

As a Token, it looks like this:

[node:field_hero_image:entity:field_media_image:large:url]

Not exactly intuitive, but it makes sense in hindsight. The Media field is an entity reference to a Media entity containing an Image field that can be rendered in a variety of Image styles, so the token chain goes all the way down that rabbit hole.

This approach generates a valid image URL in the header meta tags.

Of course, AddToAny is still not picking up the metadata when I share a Twitter card ... but that's a different issue!

Just pointing out to nobody in particular that this Token does not show up in the Node section of the "View available tokens" box. ¯\_(ツ)_/¯