Hello,
I have a request related to the color picker. It’s a nice feature, but its usefulness is limited by the ability to only retrieve a hexidecimal value. It would be very handy if we could select output between hex# and rgb/rgba, and set an alpha channel value when rgb/rgba is selected.
Is this something that could be considered for future release?
This is a feature I’d also like to request.
+100 for this as well. Was just googling to see if anyone had found a solution for this and found this thread. Desperately need this for a current project.
Would be nice to simply have an option when creating the color picker field to choose HEX or RGBA format similar to how you can select options for how data is returned for images etc.
Would think this should be a pretty quick fix for Elliot.
Edit: For now I am just going to use a PHP function to do it: http://weblizar.com/convert-hex-code-rgb-code-php/
here is a plugin for this:
https://github.com/reyhoun/acf-rgba-color
but i’ll use the PHP function like 61pixels mentioned rather than using a plugin.
Hello everyone,
I’ve come across the need for RGBA myself too at times so I’m with you there.
@herrfischer s link to a third party plugin should do well until this is implemented. As far as implementation goes it’s not as easy as you would think.
ACF is using WordPress Core Color picker called Iris. Iris supports many different color types (?) but unfortunately not RGBA (it does support RGB tho).
There’s a lot of requests for this feature on Iris github repo (https://github.com/Automattic/Iris) but so far the author has yet to implement it and doesn’t seem to like the forks people have done. So to support this in ACF Elliot would either have to switch to a different color picker (meaning another script to load in admin) or wait for it to be implemented in core.
I would suggest using the third party plugin until then 🙂
+1
As a workaround, it would be great to have an option to choose the output as HEX or RGB. That way, you can at least use it in CSS to add the opacity.
+1 here. I would use this a lot of theme options when it is related to transparent overlays. The plugin @herrfischer pointed out does do the trick but it is a bit clunky from a UX perspective. Personally, I would rather just be able to enter a hexidecimal the same as the color picker already does and then tick a radio button for rgb and alpha input.
Here’s a custom PHP solution that we’ve used for one of our projects, so that we don’t require another additional plugin. You should only need to replace ‘final_section_text_background’ with your own custom field name. Opacity value can be adjusted using $rgba = hex2rgba($color, 0.8); – replacing 0.8 with your own preferred opacity level.
<?php if( get_field('final_section_text_background') ): ?>
<?php /* Convert hexdec color string to rgb(a) string */
function hex2rgba($color, $opacity = false) {
$default = 'rgb(0,0,0)';
//Return default if no color provided
if(empty($color))
return $default;
//Sanitize $color if "#" is provided
if ($color[0] == '#' ) {
$color = substr( $color, 1 );
}
//Check if color has 6 or 3 characters and get values
if (strlen($color) == 6) {
$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
} elseif ( strlen( $color ) == 3 ) {
$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
} else {
return $default;
}
//Convert hexadec to rgb
$rgb = array_map('hexdec', $hex);
//Check if opacity is set(rgba or rgb)
if($opacity){
if(abs($opacity) > 1)
$opacity = 1.0;
$output = 'rgba('.implode(",",$rgb).','.$opacity.')';
} else {
$output = 'rgb('.implode(",",$rgb).')';
}
//Return rgb(a) color string
return $output;
}
/* Here's a usage example how to use this function for dynamicaly created CSS */
$setColor = get_field('final_section_text_background');
$color = $setColor;
$rgb = hex2rgba($color);
$rgba = hex2rgba($color, 0.8);
?>
.final-section .valign-middle {background:<?php echo $rgba ?>;}
<?php endif; ?>
Hi there,
i would also like this feature to be in the main acf product, i use rgba loads.
i am using the rgba plug-in but it has stopped working i keep getting RGBA(,,,R)in all the fields that are using it.
If anyone has a fix for it please let me know asap, happy to pay.
Here’s a quick workaround plugin:
https://gist.github.com/squarecandy/036290389ba97434b17ab959a0ce9aef
Throw that in your plugins folder, activate, and then use sqcdy_acf_rgb('my_color_field') in place of the_field('my_color_field') or sqcdy_get_acf_rgb('my_color_field') in place of get_field('my_color_field').
It just outputs RRR,GGG,BBB so you can use the output in your css like this:
color: rgb(<?php sqcdy_acf_rgb('my_color_field'); ?>);
or with rgba like this:
color: rgba(<?php sqcdy_acf_rgb('my_color_field'); ?>,0.5);
+1 to being able to choose rgb or hex for output
You can paste in a rgba value into the existing color picker as well. Works just fine.
I’ve used the following workaround (in this specific example I was forming it for use echoed as inline CSS):
– 2 fields, one the colour picker and the other for a number for opacity (0 to 1 in 0.1 increments)
– In PHP convert the hex colour value to an RGB and then tack the opacity value on the end, like so:
list($r, $g, $b) = sscanf($colour_field_value, "#%02x%02x%02x");
$rgba_colour = 'rgba(' . $r . ',' . $g . ',' . $b . ',' . $opacity_field_value .')';
Wow, I’m really surprised that ACF doesn’t have an option to choose a transparency in a color. Of course we can implement this through PHP, but we want to give our customers freedom and we can best achieve this if the color picker has an extra slider for choosing the transparency.
I came over from Unyson Framework to Advanced Custom Fields and was used to add RGBA color pickers, but this simply isn’t an option with ACF, apparently?
Sure it would be cool to see this in the ACF core – but it’s also nice to keep the core plugin from getting too bloated – plus it would have to be implemented in an optional/backwards compatible way – I would not want clients who have access to HEX color pickers to suddenly be able to add transparency on the next update.
Have you tried https://wordpress.org/plugins/acf-rgba-color-picker/ to fill this need?
