5.2.0 Mask SVG Sprite

Beta
#1

Clean local WP5.9.1

Playing with Effects > Mask > Custom

Using a SVG sprite in my child theme, so as not to hardcode paths I use Dynamic Content. The Dynamic Content paths are being turned into the inline CSS Custom Properties for example style="–tco-dc1f2-0:http://localhost" which does not play correctly with the mask-image CSS style making it invalid.

With two paths to the Dynamic Content.

  1. {{dc:global:home_url}} for http://localhost
  2. {{dc:acf:option_field field="svg_sprite_path"}} which is an ACF Option Field to the SVG file path, in this case /wp-content/themes/pro-child/dist/icons/sprite.svg#

The full string entered into the Mask Custom box look something like url(http://localhost/wp-content/themes/pro-child/dist/icons/sprite.svg#star) and seems to render the valid CSS mask-image style:

mask-image: url(http://localhost:8008/wp-content/themes/pro-child/dist/icons/sprite.svg#star);

However when using Dynamic Content in the Custom mask, these are replaced by CSS Custom Properties with do not play well with the mask-image CSS style. The values entered as Custom mask are:

url({{dc:global:home_url}}{{dc:acf:option_field field="svg_sprite_path"}}star)

url({{dc:global:home_url}}/wp-content/themes/pro-child/dist/icons/sprite.svg#star)

Any thoughts on this could be rectified?

#2

Hi @strobley,

I’m sorry, this isn’t going to work unfortunately. Anytime Dynamic Content is used in either Element CSS or a field that will become CSS eventually, it will be normalized as some kind of --tco-dc-123 value. There’s two paths we could take here:

  1. We live with not having effective Dynamic Content in for Mask > Custom and responsive styling works
  2. We resolve all the Dynamic Content under Mask > Custom and disable responsive styling on that field.

I’ll chat about it with Kory and see if there are any other possibilities, and we’ll figure out how to resolve it.

1 Like
#3

Ok, so we’ve made some adjustments here. The Custom option accepts a comma separated list of CSS Images which could be anything like url(), linear-gradient etc. We don’t want to lose responsive styling here, so there will be some limitations to how Dynamic Content works.

If you use Dynamic Content, it is going to look like var(--tco-dc-123) in the final output, so your technique above is possible, but only if your Dynamic Content returns url({{dc:global:home_url}}/app/uploads/2022/02/pennant-1.jpg) including the url bit. The

Bear with me, because there’s a workaround involving Parameters.

  1. Add { "customMask": "" } under Edit Parameters on your element.
  2. In the Inspector, set the Parameter to url({{dc:global:home_url}}{{dc:acf:option_field field="svg_sprite_path"}}star)
  3. In Custom Mask recall the combined value by using {{dc:param:customMask}}

This should keep everything wrapped up in a single var(). With this release, Dynamic Content will be even more prevalent so I expect people to encounter this more often. We’ll add some notes to our documentation to cover the limitations of using Dynamic Content within styling.

Down the road when we get to “Improved Dynamic Content” it should be possible to nest statements inside each other which would avoid needing this interstitial layer using Parameters.

1 Like
#4

@alexander, THANKS - I would have understood option #1, of not having Dynamic Content for Mask > Custom so this is way better that I hoped for :smiley:

Really appreciate your and @kory getting creative with options, this is awesome!

TBH I think using this interstitial layer using Parameters is cleaner and easier to manage… I know this is something that has already been asked, as part of docs and videos for Components and Parameters it would be great to understand best practices, do’s/don’ts, recommendations on when to nest Parameters, how nesting works, etc.

QQ only if you happen to know, how to use an SVG sprite for image-mask? An standalone SVG image works, but a symbol definition sprite file with id’s does not and my Googling efforts are not delivering.

#5

You’re welcome! Hopefully the code editor we added will make it more immediately clear. Good to know it doesn’t feel too cumbersome to use Parameters as a way to wire things up.

I’m actually surprised the symbol url doesn’t work. To my understanding, when it comes through CSS url() it should be treated as an image, and as long as you’re passing in images, the image-mask should work. Not sure why it would be treated differently. It could be a browser bug as the image-mask property is fairly new.

If you’ve not played around with it, I’d recommend looking into CSS Clip Path as an alternative to image masking if you’re using SVGs. We don’t have controls for this in Cornerstone so you’d need to do it through Element CSS.

#6

Thanks again, I’ll keep looking into the SVG sprite issue. I use the same sprite markup for all SVG used and they render correctly - it just seems to be the image-mask.

As to CSS Clip Path, Clippy is a saviour in getting my head around this :smiley:

#7

Clippy is awesome! Kory and have talked in the past about wanting to add something like it in Cornerstone when we add clip-path support.

1 Like