Finally, got it working for images too! Thank you so much for your assistance!! I reeally couldn't have done it without your tips. Here's the summarized version after testing and confirming it's working, in case it may help other struggling: **The working format for the custom shortcode I used:** style|background-image:url([ambiente_thumb_url id="247"]) **To input more than one image and target different elements, I input the following:** **in the attributes dynamic shortcode field:** style|--custom-image:url([ambiente_thumb_url id="247"]);--custom-image2:url([ambiente_thumb_url id="248"]);--custom-image3:url([ambiente_thumb_url id="250"]) **in the custom CSS advanced tab:** selector [data-swiper-slide-index="0"] .elementor-testimonial__content { background-image: var(--custom-image) !important; background-size: cover !important; } selector [data-swiper-slide-index="1"] .elementor-testimonial__content { background-image: var(--custom-image2) !important; background-size: cover !important; } selector [data-swiper-slide-index="2"] .elementor-testimonial__content { background-image: var(--custom-image3) !important; background-size: cover !important; } **And here's the PHP code that worked for generating the working url shortcode:** function ambiente_thumb_url_shortcode($atts) { $atts = shortcode_atts( array( 'id' => null, ), $atts, 'ambiente_thumb_url' ); if ($atts['id']) { $thumb = get_field('ambiente_thumb', 'ambiente_' . $atts['id']); if ($thumb) { return $thumb['url']; } } return ''; } add_shortcode('ambiente_thumb_url', 'ambiente_thumb_url_shortcode');
I think it might have not worked previously because I didn't start the terms list with zero in the shortcode function, like you did with your and like my latest code does..
@@daveden2 Thanks again! I'm glad I'd came across your video. I couldn't've solved it within only a day without your video and additional tips, man. Thank you so much
This is an Advanced ACF and Elementor Tutorial. It cannot be instinctively known by peple who are newbies. I salute you for being such an expert guide who made my life easy with such a powerful Tutorial. Thanks Sir, for such insightful knowledge.
Great, I had been trying to do this for fifteen days already. I started with ACF, using PHP, went to forums, plugins, even resorted to AI (which for the most part doesn't help much - except for basic things for those who know little about programming), watched several videos (with misleading titles), and only found the solution here with you, including a 'simple' and very elegant solution. Thank you."
Could you please explain how do you actually dynamically pull the taxonomy name as a field within the loop grid (display the category for each one: Template, Addons, Tutorials) ? Thank you!
Oh, sorry about that! You can use the Post Info widget to achieve this. Here's how: 1. Delete all other items in the list. 2. Set the type as 'Terms'. 3. Choose your desired taxonomy. I now use a dedicated plugin called Dynamic Shortcodes for more flexibility with dynamic data: daveden.co.uk/links/dynamic-shortcodes/. I just wanted to let you know that you don't need it in this case.
Do you have a similar solution without code? This is brilliant already but I was wondering, since my clients do not like using codes. Thanks by the way!
Hi! men I try to replicate this awesome tutorial for one of my projects, but the shortcode does not working ( I put the shorcode in another container and get me the HEX color ) but in attributes > shortcode > style not printed... can you help me?
@@daveden2 Thanks! I ended up getting jet engine and doing the second term for the second badge. I applied the same concept for an icon to be connected to the category badge as well. Thanks so much
@kevinconnally6714 Oh, cool! You're welcome. Yeah, JetEngine makes it easier to do this without needing to write code. I made this video recently. I don't know if you saw it: ua-cam.com/video/6mczcC9ClmM/v-deo.html
Buddy, just made that workaround work out for containers' slideshow backgrounds also! Just modified the javascript I had there in order to get the urls from the same --custom-images I had provided with the previous custom attributes shortcode!! If you'd like to know how, just let me know and I'll spare some time later to write it here. Thanks again =D
Hello, mate! That's outstanding! I'm trying to get this to work with an image field instead of a color field, with the image shortcode being [thumb-ext] for example, and outside a loop query. I've modified the custom shortcode to retrive a specific image url from a specific term i the custom taxonomy and I have the Testimonial Carousel widget in place with six slides. Is there a way to specify the class in the attribute shortcode field modifying its parameter to something like: style|background-image:[thumb-ext] in order to this specific image to be assigned only to the slide of my choice? Then the attribute shortcode would become something like: style.classofchoice|background-image:[thumb-ext] If there's a way to do that, it would be of so much help. Anyways, thank you very much in advance, only know what you've shared in the video is already awesome!
An alternative would be to use css variables in the Custom CSS for your class. e.g. .your-class .elementor-heading-title { background-image: var(--custom-image); } Then, change the Attributes for each slide: style|--custom-image: [image-url-shortcode]
@@daveden2 That opens up a whole new window of possibilities for me, I gotta learn this along with php asap. Thank you so much! Thinking about this, I could generate a short code getting all the 6 taxonomy terms' images and specify each when inserting the shortcode in the Attributes, right? And the shortcode output needs to be solely an url, not an array nor an ID right? Like so for the Attribute style|--custom-image: [image-url-shortcode id="247"] style|--custom-image2: [image-url-shortcode id="251"] style|--custom-image3: [image-url-shortcode id="249"] and so on, being each line with another taxonomy term id For the CSS: CSS in the Testionial widget .slide1class { background-image: var(--custom-image); } .slide2class { background-image: var(--custom-image2); } .slide3class { background-image: var(--custom-image3); }
@@daveden2 I've tested a bunch of ways, but can't get it to work. It seems my shortcode output is wrong, probably due to syntax but I can't figure it out: $output .= ''; Is the syntax correct? The whole code for context if needed: function thumb_ext_shortcode() { global $post; $post_id = $post->ID; // Get the terms associated with the post $term_list = wp_get_post_terms($post_id, 'ambiente'); $output = ''; // Loop through each term foreach ($term_list as $term) { // Get the ID of the current term $term_id = 247; // Get the image associated with the current term $thumb = get_field('ambiente_thumb', 'term_'.$term_id); if ($thumb) { // Append the image HTML to the output $output .= ''; } } // Return the final output return $output; } add_shortcode('thumb-ext', 'thumb_ext_shortcode');
@@phkoon I can think of two potential issues here. First, aren't you intending to retrieve just the image URL, rather than outputting a full tag? Secondly, I'd suggest adding an attribute to your shortcode to add the ID (currently its fixed at 247). That'll be easier to manage. If you like, you can email me and we can take a look together.
Ok, now it's been 3 hours I'm tryng to get a workaround to do the same to a Container that has its Background Type set to "Slideshow" with 6 images selected (each of which I want to assignt to the same six custom image fields of before), but I'm taking a break for a few hours now. Note that the custom fields aren't Gallery type, but Image type. I coudn't figure out how to insert a gallery into this slider attributes yet in way that doesn't kill the HTML syntax I much need to keep my god damn JS working 🙏 If you have some thought and time to spare on this, you're most welcome. And thanks once more
Yeah, I just checked. I noticed that the background slideshow doesn't allow shortcodes. So, I'm not sure how to go about it without relying on a third-party plugin like Dynamic Shortcodes
@@daveden2 God damn, I missed your answer hahah There went the whole day again, but now there was no success at all for the slideshow background. When set to slideshow, the HTML for the container wrapper contains the data-settings attribute with the "background_slideshow_gallery": ["ids+urls"]; after hours of trying different variations without success, I guess you can't change that attribute's property which is already in place, right? I couldn't modify the data-settings . And with the background not set to anything I coudn't insert the "data-settings" attributes either. Now I'll get into the Dynamic Shortcodes with the last drop of hope, thanks for suggesting again!
I do this via a CSS class. When you inspect the loopgrid items inside a loop grid (or in a posts widget) you will notice that the wrapper element gets a unique classname for each taxonomy. For example, when the category name is "cars" , the classname added to that loop item will be .category-cars. Same works for tags. Also a custom post tpye has it's own unique classname. .type-name-of-the-CTP All i have to do is use that classname to target any child element in the loop item and write a CSS rule to define the colors for each category. But now I know this method I will use this in the future. Thx.
Dude, you are absolutely amazing. This is the second time only your tutorial in the whole world wide web helped me out.
Finally, got it working for images too!
Thank you so much for your assistance!! I reeally couldn't have done it without your tips.
Here's the summarized version after testing and confirming it's working, in case it may help other struggling:
**The working format for the custom shortcode I used:**
style|background-image:url([ambiente_thumb_url id="247"])
**To input more than one image and target different elements, I input the following:**
**in the attributes dynamic shortcode field:**
style|--custom-image:url([ambiente_thumb_url id="247"]);--custom-image2:url([ambiente_thumb_url id="248"]);--custom-image3:url([ambiente_thumb_url id="250"])
**in the custom CSS advanced tab:**
selector [data-swiper-slide-index="0"] .elementor-testimonial__content {
background-image: var(--custom-image) !important;
background-size: cover !important;
}
selector [data-swiper-slide-index="1"] .elementor-testimonial__content {
background-image: var(--custom-image2) !important;
background-size: cover !important;
}
selector [data-swiper-slide-index="2"] .elementor-testimonial__content {
background-image: var(--custom-image3) !important;
background-size: cover !important;
}
**And here's the PHP code that worked for generating the working url shortcode:**
function ambiente_thumb_url_shortcode($atts) {
$atts = shortcode_atts(
array(
'id' => null,
),
$atts,
'ambiente_thumb_url'
);
if ($atts['id']) {
$thumb = get_field('ambiente_thumb', 'ambiente_' . $atts['id']);
if ($thumb) {
return $thumb['url'];
}
}
return '';
}
add_shortcode('ambiente_thumb_url', 'ambiente_thumb_url_shortcode');
I think it might have not worked previously because I didn't start the terms list with zero in the shortcode function, like you did with your and like my latest code does..
Awesome! I'm glad you figured it out.
@@daveden2 Thanks again! I'm glad I'd came across your video. I couldn't've solved it within only a day without your video and additional tips, man. Thank you so much
You're a f*cking genius
Men you're awesome!!! that was for I was looking for, thank you so much!
Woohoo, Dave! I see my name in there Great video, saved for when I need it! 🤙🏼
Thanks! You're an inspiration to us all
This is an Advanced ACF and Elementor Tutorial. It cannot be instinctively known by peple who are newbies.
I salute you for being such an expert guide who made my life easy with such a powerful Tutorial.
Thanks Sir, for such insightful knowledge.
I'm glad to know it helped you out!!
That was amazing! 😊 I love how clearly you explain things-really saved me so much time. Thanks a ton for your help!
Oh, cool! I'm glad I could help.
Great, I had been trying to do this for fifteen days already. I started with ACF, using PHP, went to forums, plugins, even resorted to AI (which for the most part doesn't help much - except for basic things for those who know little about programming), watched several videos (with misleading titles), and only found the solution here with you, including a 'simple' and very elegant solution. Thank you."
Yeah, sometimes AI can provide misleading information. Glad the video helped you out
Thank you bro this is very useful
Really excellent resource !
Thank you very much for this video! I have a question, is it possible to put the colors in the filter as well?
Not directly, but we can creatively use some custom CSS and PHP to achieve it. I will try to come up with a code snippet tomorrow.
@@daveden2 thank you very much. were you able to do it?
@marcialox yes, you can check out this video and let me know if it helps:
ua-cam.com/video/c32VRTryiN0/v-deo.html
Thanks helped me alot i appreciate it
Oh, great! Glad to hear that
Could you please explain how do you actually dynamically pull the taxonomy name as a field within the loop grid (display the category for each one: Template, Addons, Tutorials) ? Thank you!
Oh, sorry about that! You can use the Post Info widget to achieve this. Here's how:
1. Delete all other items in the list.
2. Set the type as 'Terms'.
3. Choose your desired taxonomy.
I now use a dedicated plugin called Dynamic Shortcodes for more flexibility with dynamic data: daveden.co.uk/links/dynamic-shortcodes/. I just wanted to let you know that you don't need it in this case.
@@daveden2 Thank you so much, it's so kind from you to explain it like that! I had spent hours searching for it ;)
Do you have a similar solution without code? This is brilliant already but I was wondering, since my clients do not like using codes. Thanks by the way!
A no-code solution may require a premium third-party plugin like JetEngine or Dynamic Shortcodes.
I do not know how to thank you Sir!
Has anyone used Dynamicooo for this purpose. Please let me know
legend!!!!!!
Hi! men I try to replicate this awesome tutorial for one of my projects, but the shortcode does not working ( I put the shorcode in another container and get me the HEX color ) but in attributes > shortcode > style not printed... can you help me?
I've updated the documentation. Let me know if it works for you: daveden.co.uk/tutorials/dynamic-acf-taxonomy-label-color-in-elementor-loop/
Hi@@daveden2 thanks a lot, the documentation works perfectly, again thanks a lot for share your knowledge with us.
can you do this w/ jet engine and category images so the each badge has it's own image & color?
And how did you get the two separate badges on the cards? was this a different meta field?
Yeah, you can use JetEngine. That should be simpler. Is it going to be only a single category badge per loop item or multiple badges?
Yes, in the video, those were two different custom taxonomies.
@@daveden2 Thanks! I ended up getting jet engine and doing the second term for the second badge. I applied the same concept for an icon to be connected to the category badge as well. Thanks so much
@kevinconnally6714 Oh, cool! You're welcome. Yeah, JetEngine makes it easier to do this without needing to write code.
I made this video recently. I don't know if you saw it:
ua-cam.com/video/6mczcC9ClmM/v-deo.html
Buddy, just made that workaround work out for containers' slideshow backgrounds also!
Just modified the javascript I had there in order to get the urls from the same --custom-images I had provided with the previous custom attributes shortcode!!
If you'd like to know how, just let me know and I'll spare some time later to write it here.
Thanks again =D
Oh great! That's awesome. Pls do share 🙏
Someone in future might need it as well.
@@daveden2 I'll do anytime soon. Maybe a video tutorial
You're the fucking genius! Thank you so much!
Yeah
Hello, mate! That's outstanding!
I'm trying to get this to work with an image field instead of a color field, with the image shortcode being [thumb-ext] for example, and outside a loop query.
I've modified the custom shortcode to retrive a specific image url from a specific term i the custom taxonomy and I have the Testimonial Carousel widget in place with six slides.
Is there a way to specify the class in the attribute shortcode field modifying its parameter to something like:
style|background-image:[thumb-ext]
in order to this specific image to be assigned only to the slide of my choice?
Then the attribute shortcode would become something like:
style.classofchoice|background-image:[thumb-ext]
If there's a way to do that, it would be of so much help.
Anyways, thank you very much in advance, only know what you've shared in the video is already awesome!
An alternative would be to use css variables in the Custom CSS for your class.
e.g.
.your-class .elementor-heading-title {
background-image: var(--custom-image);
}
Then, change the Attributes for each slide:
style|--custom-image: [image-url-shortcode]
@@daveden2 That opens up a whole new window of possibilities for me, I gotta learn this along with php asap. Thank you so much!
Thinking about this, I could generate a short code getting all the 6 taxonomy terms' images and specify each when inserting the shortcode in the Attributes, right?
And the shortcode output needs to be solely an url, not an array nor an ID right?
Like so for the Attribute
style|--custom-image: [image-url-shortcode id="247"]
style|--custom-image2: [image-url-shortcode id="251"]
style|--custom-image3: [image-url-shortcode id="249"]
and so on, being each line with another taxonomy term id
For the CSS:
CSS in the Testionial widget
.slide1class {
background-image: var(--custom-image);
}
.slide2class {
background-image: var(--custom-image2);
}
.slide3class {
background-image: var(--custom-image3);
}
@@phkoon yeah, that should work
@@daveden2 I've tested a bunch of ways, but can't get it to work. It seems my shortcode output is wrong, probably due to syntax but I can't figure it out:
$output .= '';
Is the syntax correct?
The whole code for context if needed:
function thumb_ext_shortcode() {
global $post;
$post_id = $post->ID;
// Get the terms associated with the post
$term_list = wp_get_post_terms($post_id, 'ambiente');
$output = '';
// Loop through each term
foreach ($term_list as $term) {
// Get the ID of the current term
$term_id = 247;
// Get the image associated with the current term
$thumb = get_field('ambiente_thumb', 'term_'.$term_id);
if ($thumb) {
// Append the image HTML to the output
$output .= '';
}
}
// Return the final output
return $output;
}
add_shortcode('thumb-ext', 'thumb_ext_shortcode');
@@phkoon I can think of two potential issues here.
First, aren't you intending to retrieve just the image URL, rather than outputting a full tag?
Secondly, I'd suggest adding an attribute to your shortcode to add the ID (currently its fixed at 247). That'll be easier to manage.
If you like, you can email me and we can take a look together.
Ok, now it's been 3 hours I'm tryng to get a workaround to do the same to a Container that has its Background Type set to "Slideshow" with 6 images selected (each of which I want to assignt to the same six custom image fields of before), but I'm taking a break for a few hours now.
Note that the custom fields aren't Gallery type, but Image type. I coudn't figure out how to insert a gallery into this slider attributes yet in way that doesn't kill the HTML syntax I much need to keep my god damn JS working 🙏
If you have some thought and time to spare on this, you're most welcome.
And thanks once more
Yeah, I just checked. I noticed that the background slideshow doesn't allow shortcodes.
So, I'm not sure how to go about it without relying on a third-party plugin like Dynamic Shortcodes
@@daveden2 God damn, I missed your answer hahah
There went the whole day again, but now there was no success at all for the slideshow background.
When set to slideshow, the HTML for the container wrapper contains the data-settings attribute with the "background_slideshow_gallery": ["ids+urls"]; after hours of trying different variations without success, I guess you can't change that attribute's property which is already in place, right? I couldn't modify the data-settings .
And with the background not set to anything I coudn't insert the "data-settings" attributes either.
Now I'll get into the Dynamic Shortcodes with the last drop of hope, thanks for suggesting again!
@@daveden2 Man, Dynamic Shortcodes is amazing! Unfortunately I can't get it right now, but surelly will be a priority in the future
Do you know a better way to accomplish this? Do let me know
I do this via a CSS class. When you inspect the loopgrid items inside a loop grid (or in a posts widget) you will notice that the wrapper element gets a unique classname for each taxonomy.
For example, when the category name is "cars" , the classname added to that loop item will be .category-cars.
Same works for tags. Also a custom post tpye has it's own unique classname.
.type-name-of-the-CTP
All i have to do is use that classname to target any child element in the loop item and write a CSS rule to define the colors for each category.
But now I know this method I will use this in the future. Thx.
@franktielemans6624, the CSS method is actually a pretty cool idea. Thanks for sharing
@@franktielemans6624 I have a category called "Welcome".
How do I use CSS to target it, and give it a background colour of Green?
Regards.