Linking to Media Library

Hey folks,

I was looking for something like this and had an idea on how to shorten the process of uploading and copying the URL for a file. By adding a WYSIWYG editor to the button shortcode, you can upload a file using the Add Media button. Uploading the file in WYSIWYG doesn’t copy the URL to the link field, but at least you could copy the link from that spot and paste it into the manual link.

There are 4 steps to my suggestion: Copy buttons.php to child theme, modify the “Set Manually” text to say “Set Manually or Upload File”, add the WYSIWYG array below the Button Link array, and add CSS to functions.php to hide parts of the WYSIWYG editor in the button Modal Window.

First, I copied buttons.php from Enfold>config-templatebuilder>avia-shortcodes to my child them enfold-child>shortcodes

Second, modify buttons.php and the Button Link subtype array to say Set Manually or Upload File. :

array(	
"name" 	=> __("Button Link?", 'avia_framework' ),
"desc" 	=> __("Where should your button link to?", 'avia_framework' ),
"id" 	=> "link",
"type" 	=> "linkpicker",
"fetchTMPL"	=> true,
"subtype" => array(	
			__('Set Manually or Upload File', 'avia_framework' ) =>'manually',
			__('Single Entry', 'avia_framework' ) =>'single',
			__('Taxonomy Overview Page',  'avia_framework' )=>'taxonomy',
			),
"std" 	=> ""),

Third, inside buttons.php add the following code right after the Button Link array:

array(
"name" 	=> __("Content",'avia_framework' ),
"desc" 	=> __("Use the Add Media button to upload a file. Then copy the URL to use as a link in the Button Link field above.",'avia_framework' ),
"id" 	=> "ContentInButtonModal",
"type" 	=> "tiny_mce",
"required"=> array('link','equals','manually'),
"std" 	=> __("", "avia_framework" )
							),

Fourth, add the following code to your child theme’s functions.php

//Remove the WYSIWYG content in the button Modal Window
add_action('admin_print_scripts', 'avia_gravity_forms_admin');
function avia_gravity_forms_admin()
{
    echo "<style type='text/css'>";
    echo "#wp-aviaTBContentInButtonModal-editor-container, #wp-aviaTBContentInButtonModal-editor-tools .wp-editor-tabs { display: none; }";
    echo "</style>";
}

• This reply was modified 7 years, 5 months ago by dustingrof.

Hey @luke86,
I like your solution better, it is less confusing for my clients.

Thanks!