IMPLEMENTED: Add dynamic data to SVG element

Feature Requests / Improvements
22

I’ve used the code to pull in a dynamic svg but have run into a situation where it is not working:

In this case I am creating Groups of fields within ACF. This is to keep all dynamic fields within sections separated from one another as each section can be turned on or off.

I’ve created a single post template and when I try to pull the code in referencing an ACF field in a group it does not work. But it I have an ACF field that is by itself, not in a group, it works.

Any thoughts on how to overcome this?

24

Solved pulling the SVG in a group with the following: $icn = get_field(‘acf-group-slug’)[‘acf-field-slug’];

  • So this is for a stand alone ACF field: $icn = get_field(‘acf-field-slug’);

  • This is for a ACF field in a group: $icn = get_field(‘acf-group-slug’)[‘acf-field-slug’];

  • Thanks to Chat GPT I was able to solve for doing this with Flexible Content

**Placed in a code block where you want the icon to appear.

<?php 
// Assuming you are inside the WordPress loop 

// Get the flexible content field value 
$solutions_flexible_content = get_field('solutions_flexible_content'); 

// Check if the flexible content field has rows if ($solutions_flexible_content) { 

     // Loop through each row foreach 
     ($solutions_flexible_content as $row) { 

          // Check the layout type - do not change this value 
          $layout_type = $row['acf_fc_layout']; 

         // Check if the layout is 'your_custom_layout' 
         if ($layout_type === 'solutions_benefits') { 

                // Check if the subfield 'your_custom_layout_field' exists 
                if (isset($row['solutions_benefit_icon_1'])) { 

// Assuming 'your_custom_layout_field' contains the SVG file 
$icn = $row['solutions_benefit_icon_1'];

// Check if the file exists 
     if ($icn) { 
     $icnUrl = isset($icn['url']) ? $icn['url'] : ''; 
     $icnID = isset($icn['ID']) ? $icn['ID'] : ''; 

     echo file_get_contents($icnUrl, $icnID); } } 

     else { 
     // Handle the case when 'your_custom_layout_field' is not defined echo 'your_custom_layout_field is not defined in the array';  
               } 
            } 
         } 
      } 
?>

Here is the CSS

%root% :not([fill=“none”]) { 
fill: #134a95; 
max-height: 50px; 
width: auto; 
}
25

Please, I really hope Dynamic SVG comes soon to Bricks. The solution described by timmse only works with ACF. ¿What happen with MetaBox, JetEngine or other solutions?

26

If you want a dynamic icon…

27

file_get_contents triggers a restricted warning in the newest Bricks version.


Warning: file_get_contents({...}/wp-content/uploads/{...}.svg): 
Failed to open stream: 
HTTP request failed! HTTP/1.1 401 
Restricted in 
/www/wp-content/themes/bricks/includes/elements/code.php(154) : 
eval()'d code on line 9
28

The “file_get_contents” solution is ancient and was certainly not brilliant (performance-wise) :smiley:

Since Bricks 1.9.6, the SVG element supports dynamic data natively :rocket:

29

That was a good solution, however it only works for the ‘SVG’ element. It is not possible to use dynamic SVG icons on ‘buttons’ or ‘text link’ elements, to name a few examples. Do you think this can be implemented soon?

30

That’s right - the SVG control would have to be revised for this. Would you please add this as an idea to the Idea board?

1 Like
31

Thanks, idea already submitted!