color_to_rgba filter in shopify liquid?

Solved
tony5280
Shopify Partner
61 6 18

As hinted, I am in dire need of a way to convert a shopify variable to rgba.

I'm exposing my theme colors to the theme editor, so that a biz user can edit them.

I realized that one of the animations I'm doing relies on an rgba color value.  The animation uses opacity, so I can't fudge it, and I don't want to refactor it.

How in the wide wide world of sports can I filter that hex value as rgba, with the requirement that an alpha channel on the color picker *is optional*?

0 Likes
tony5280
Shopify Partner
61 6 18

This is an accepted solution.

I ended up writing a snippet

{%- capture rgb -%}{{ color | color_to_rgb }}{%- endcapture -%}
{%- assign tail = alpha | prepend: ', ' | append: ')' -%}
{{ rgb | replace: 'rgb', 'rgba' | replace: ')', tail }}

Instantiated by calling

<!-- requires: color (str), alpha (str) -->
{% render 'color_to_rgba', color: settings.the_color, alpha: '0.8' %}


The only major issue with this, is that shopify won't let us render within CSS, so we have to inject a style tag after pulling in the stylesheet. 

{{ 'main-stylesheet.css' | asset_url | stylesheet_tag }}
	<style>
		.my-element::before {
		    background-color: {% render 'color_to_rgba', color: settings.body_accent, alpha: '0.8' %};
		}
	</style>

 

0 Likes