Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 21, 2025 at 7:34 am #1488344
    THP Studio

    Hey guys,

    Need a little help using a custom SVG divider. I’ve followed (I think) the Enfold documentation, and added a folder in the uploads directory called “avia_custom_shapes” and uploaded my SVG there (link in private field).

    Then I’ve added this code from your docs to the functions.php file to register it (only talking about the first one, the second one is the example from your docs which of course won’t work) – which it does, I can select it in the ALB, but no SVG gets displayed either in the preview or on the front end.

    function custom_avf_custom_svg_shapes( array $custom_shapes )
{
	$custom_shapes = array(
				
		'Mountain-Test-v2'	=> array(
						'key'			=> 'Mountain-Test-v2',
						'title'			=> __( 'CMC Mountains v1', 'avia_framework' ),
//						'has_flip'		=> true,
						'has_width'		=> true,
						'filename'		=> 'Mountain-Test-v2'
									),
		'waves-in-motion'	=> array(
						'key'			=> 'waves-in-motion',
						'title'			=> __( 'Waves in motion', 'avia_framework' ),
//						'has_flip'		=> true,
						'has_width'		=> true,
						'filename'		=> 'waves-in-motion'
									)
		
						);
	
	return $custom_shapes;
}

add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

    Not sure what I’m doing wrong, but looking forward to your help.

    Thanks

    Tim

    • This topic was modified 1 month, 2 weeks ago by THP Studio.
    • This topic was modified 1 month, 2 weeks ago by THP Studio.
    • This topic was modified 1 month, 2 weeks ago by THP Studio.
    August 21, 2025 at 10:01 am #1488348
    Guenni007

    why do you think that there is something wrong?
    is on your dropdown list no custom svg ?

    August 23, 2025 at 10:22 am #1488439
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did that answer your question @THP Studio?

    Best regards,
    Rikard

    August 25, 2025 at 1:17 am #1488472
    THP Studio

    Hi Rikard,

    Not that did not help sorry.

    As I mentioned in my opening post, the custom SVG is selectable in the ALB element – but nothing displays on the front end. Please see the private field in the original post for more details.

    Thanks

    August 26, 2025 at 3:03 pm #1488542
    Guenni007

    you know the absolute url of your svgs – what if you do open it in your browser – can you see them?

    e.g.
    https://your-domain.com/wp-content/uploads/avia_custom_shapes/waves-in-motion.svg

    By the way, I now always upload these SVG files through the media library. In list view, I determine the ID of the attachment and add it to the array. As far as I know, neither the key nor the name needs to be specified then in the snippet.
    SVG files in WordPress and Enfold are not converted to other sizes when uploaded to the media library. There are no disadvantages in this regard.

    function custom_avf_custom_svg_shapes( array $custom_shapes ) {
  $custom_shapes = array(
    'waves-in-motion'       => array(
              'title'       => __( 'Waves in motion', 'avia_framework' ),
              'has_flip'    => true,
              'has_width'   => false,
              'attachment'  => 1562,
              ),
    'waves-in-motion-2' => array(
              'title'       => __( 'Waves in motion 2', 'avia_framework' ),
              'has_flip'    => true,
              'has_width'   => false,
              'attachment'  => 1565,
              ),
    );
    return $custom_shapes;
}
add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );
    August 30, 2025 at 1:22 am #1488761
    THP Studio

    Enfold team, please see private, thanks

    August 30, 2025 at 4:29 pm #1488776
    Mike

    Hi,
    In my tests, the name of the array must be in lower case, and the path must be added if you are not using the attachment ID
    for example:

    function custom_avf_custom_svg_shapes( array $custom_shapes )
{
	$custom_shapes = array(
				
		'mountain-test'	=> array(
						'key'			=> 'Mountain-Test',
						'title'			=> __( 'Mountain Test', 'avia_framework' ),
						'has_flip'		=> true,
						'has_width'		=> true,
						'filename'		=> 'Mountain-Test',
						'path'			=> './wp-content/uploads/avia_custom_shapes/'
					//	'attachment'	=> '4650'
									)
						);
	
	return $custom_shapes;
}

add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

    Screen Shot 2025 08 30 at 10.23.30 AM

    I would use the media library as Guenni007 suggests, as it would be easier to manage. The documentation also points to this.

    Best regards,
    Mike

    August 31, 2025 at 2:09 pm #1488783
    Guenni007

    if you use the attachment ID of that image you do not need to set a path ; and as far as I know, neither the key nor the name needs to be specified then in the snippet.

    Upload your image – switch to list view – note the ID – use it in the snippet.

    August 31, 2025 at 5:12 pm #1488785
    Mike

    Hi,
    This is correct.

    Best regards,
    Mike

    September 1, 2025 at 4:15 am #1488788
    THP Studio

    Thanks for the help, have it working now.

    Might need to update the documentation to reflect that the array needs to be lower case and that the path needs to be added?

    Anyway, appreciate the help. This can be closed.

    Thanks

    Tim

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Custom SVG Divider’ is closed to new replies.