Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #760791

    Hi,
    Just love your theme, but i was wondering if it is possible to extend the functionality of the content element: Tabs in the Advanced layout builder.
    What i want to do is us an image AND a title in the tab title. I’ve found that this can be done by using HTML in the tab title field, but since i am developing this site for a client, i was wondering if there is a cleaner and more user-friendly way to accomplish this. I guess what needs to be done is implement and extra image field and then change the Tabs template in order to call for that image.

    Hope I made myself clear. Is there anyone who can help me out with this?
    Thanks a million!

    #761362

    Hi,
    Ok got it fixed. Below the code. This is a quick fix and might not be the most straightforward one.

    Create a file in your child template folder/shortcodes/tabs.php

    <?php
    if ( !class_exists( 'avia_sc_tab' ) )
    {
        class avia_sc_tab extends aviaShortcodeTemplate
        {
            static $tab_id = 1;
            static $counter = 1;
            static $initial = 1;
    
            /**
             * Create the config array for the shortcode button
             */
            function shortcode_insert_button()
            {
                $this->config['name']		= __('Tabs', 'avia_framework' );
                $this->config['tab']		= __('Content Elements', 'avia_framework' );
                $this->config['icon']		= AviaBuilder::$path['imagesURL']."sc-tabs.png";
                $this->config['order']		= 75;
                $this->config['target']		= 'avia-target-insert';
                $this->config['shortcode'] 	= 'av_tab_container';
                $this->config['shortcode_nested'] = array('av_tab');
                $this->config['tooltip'] 	= __('Creates a tabbed content area', 'avia_framework' );
            }
    
            function extra_assets()
            {
                if(is_admin())
                {
                    $ver = AviaBuilder::VERSION;
                    wp_enqueue_script('avia_tab_toggle_js' , AviaBuilder::$path['assetsURL'].'js/avia-tab-toggle.js' , array('avia_modal_js'), $ver, TRUE );
                }
            }
    
            /**
             * Popup Elements
             *
             * If this function is defined in a child class the element automatically gets an edit button, that, when pressed
             * opens a modal window that allows to edit the element properties
             *
             * @return void
             */
            function popup_elements()
            {
                $this->elements = array(
    
                    array(
                        "name" 	=> __("Tab Position", 'avia_framework' ),
                        "desc" 	=> __("Where should the tabs be displayed", 'avia_framework' ),
                        "id" 	=> "position",
                        "type" 	=> "select",
                        "std" 	=> "top_tab",
                        'container_class' =>"avia-element-fullwidth",
                        "target"  => array('#aviaTBcontent-form-container', 'class'),
                        "subtype" => array( __('Display tabs at the top', 'avia_framework' ) =>'top_tab',
                            __("Display Tabs on the left", 'avia_framework' ) => 'sidebar_tab sidebar_tab_left',
                            __("Display Tabs on the right", 'avia_framework' ) => 'sidebar_tab sidebar_tab_right')
                    ),
    
                    array(
                        "name" 	=> __("Boxed Tabs", 'avia_framework' ),
                        "desc" 	=> __("Do you want to display a border around your tabs or without border", 'avia_framework' ),
                        "id" 	=> "boxed",
                        "type" 	=> "select",
                        "std" 	=> "no",
                        "required" => array('position','contains','sidebar_tab'),
                        "subtype" => array(
                            __('With border',  'avia_framework' ) =>'border_tabs',
                            __('Without border',  'avia_framework' ) =>'noborder_tabs')),
    
                    array(
                        "name" => __("Add/Edit Tabs", 'avia_framework' ),
                        "desc" => __("Here you can add, remove and edit the Tabs you want to display.", 'avia_framework' ),
                        "type" 			=> "modal_group",
                        "id" 			=> "content",
                        'container_class' =>"avia-element-fullwidth avia-tab-container",
                        "modal_title" 	=> __("Edit Form Element", 'avia_framework' ),
                        "std"			=> array(
    
                            array('title'=>__('Tab 1', 'avia_framework' )),
                            array('title'=>__('Tab 2', 'avia_framework' )),
    
                        ),
    
                        'subelements' 	=> array(
    
                            array(
                                "name" 	=> __("Tab Title", 'avia_framework' ),
                                "desc" 	=> __("Enter the tab title here (Better keep it short)", 'avia_framework' ) ,
                                "id" 	=> "title",
                                "std" 	=> "Tab Title",
                                "type" 	=> "input"),
    
    						array(
                                "name" 	=> __("Tab Symbol", 'avia_framework' ),
                                "desc" 	=> __("Should an icon or image be displayed at the top of the tab title?", 'avia_framework' ),
                                "id" 	=> "icon_select",
                                "type" 	=> "select",
                                "std" 	=> "no",
                                "subtype" => array(
                                    __('No icon or image',  'avia_framework' ) =>'no',
                                    __('Display icon',  'avia_framework' ) =>'icon_top',
                                    __('Display image',  'avia_framework' ) =>'image_top')),
    
                            array(
                                "name" 	=> __("Tab Icon",'avia_framework' ),
                                "desc" 	=> __("Select an icon for your tab title below",'avia_framework' ),
                                "id" 	=> "icon",
                                "type" 	=> "iconfont",
                                "std" 	=> "",
                                "required" => array('icon_select','equals','icon_top')
                            ),
                            
                            array(
    									"name" 	=> __("Tab Image",'avia_framework' ),
    									"desc" 	=> __("Either upload a new, or choose an existing image from your media library",'avia_framework' ),
    									"id" 	=> "tab_image",
    									"type" 	=> "image",
    									"fetch" => "id",
    									"secondary_img" => true,
    									"force_id_fetch"=> true,
    									"title" =>  __("Insert Image",'avia_framework' ),
    									"button" => __("Insert",'avia_framework' ),
    									"required" => array('icon_select','equals','image_top'),
    									"std" 	=> ""),
    					
    						
    						array(
                                "name" 	=> __("Tab Image Style", 'avia_framework' ),
                                "id" 	=> "tab_image_style",
                                "type" 	=> "select",
                                "std" 	=> "",
    							"required" => array('icon_select','equals','image_top'),
                                "subtype" => array(
                                    __('No special style',  'avia_framework' ) =>'',
                                    __('Rounded Borders',  'avia_framework' ) =>'av-tab-image-rounded',
                                    __('Circle',  'avia_framework' ) =>'av-tab-image-circle',
                                   )),
    						
    						
    					array(
    							"type" 	=> "close_div",
    							'nodescription' => true
    						), 
    
                            array(
                                "name" 	=> __("Tab Content", 'avia_framework' ),
                                "desc" 	=> __("Enter some content here", 'avia_framework' ) ,
                                "id" 	=> "content",
                                "type" 	=> "tiny_mce",
                                "std" 	=> __("Tab Content goes here", 'avia_framework' ),
                            ),
    
                        )
                    ),
    
                    array(
                        "name" 	=> __("Initial Open", 'avia_framework' ),
                        "desc" 	=> __("Enter the Number of the Tab that should be open initially.", 'avia_framework' ),
                        "id" 	=> "initial",
                        "std" 	=> "1",
                        "type" 	=> "input"),
    
                );
    
                if(current_theme_supports('avia_template_builder_custom_tab_toogle_id'))
                {
                    $this->elements[2]['subelements'][] = array(
                        "name" 	=> __("For Developers: Custom Tab ID",'avia_framework' ),
                        "desc" 	=> __("Insert a custom ID for the element here. Make sure to only use allowed characters.",'avia_framework' ),
                        "id" 	=> "custom_id",
                        "type" 	=> "input",
                        "std" 	=> "");
                }
    
            }
    
            /**
             * Editor Sub Element - this function defines the visual appearance of an element that is displayed within a modal window and on click opens its own modal window
             * Works in the same way as Editor Element
             * @param array $params this array holds the default values for $content and $args.
             * @return $params the return array usually holds an innerHtml key that holds item specific markup.
             */
            function editor_sub_element($params)
            {
                $template = $this->update_template("title", "{{title}}");
                $content  = $this->update_template("content", "{{content}}");
    
    			extract(av_backend_icon($params)); // creates $font and $display_char if the icon was passed as param "icon" and the font as "font" 
                
    			
                $params['innerHtml']  = "";
                $params['innerHtml'] .= "<div class='avia_title_container'>";
                /*$params['innerHtml'] .= "	<span ".$this->class_by_arguments('icon_select' ,$params['args']).">";
    			$params['innerHtml'] .= "		<span ".$this->class_by_arguments('font' ,$font).">";
                $params['innerHtml'] .= "			<span data-update_with='icon_fakeArg' class='avia_tab_icon' >{$display_char}</span>";
                $params['innerHtml'] .= "		</span>";
                $params['innerHtml'] .= "	</span>";*/
                $params['innerHtml'] .= "	<span class='avia_title_container_inner' {$template} >".$params['args']['title']."</span>";
                $params['innerHtml'] .= "</div>";
    
                $params['innerHtml'] .= "<div class='avia_content_container' {$content}>".stripcslashes( $params['content'] )."</div>";
    
                return $params;
            }
    
            /**
             * Frontend Shortcode Handler
             *
             * @param array $atts array of attributes
             * @param string $content text within enclosing form of shortcode element
             * @param string $shortcodename the shortcode found, when == callback name
             * @return string $output returns the modified html string
             */
            function shortcode_handler($atts, $content = "", $shortcodename = "", $meta = "")
            {
                $atts =  shortcode_atts(array('initial' => '1', 'position' => 'top_tab', 'boxed'=>'border_tabs'), $atts, $this->config['shortcode']);
                extract($atts);
    
                $boxed   = $position != "top_tab" ? $boxed : "";
                $output  = '<div class="tabcontainer  '.$position.' '.$boxed.' '.$meta['el_class'].'">'."\n";
                $counter = 1;
    
                avia_sc_tab::$counter = 1;
                avia_sc_tab::$initial = $initial;
    
                $output .= ShortcodeHelper::avia_remove_autop($content, true);
    
                $output .= '</div>'."\n";
    
                return $output;
            }
    
            function av_tab($atts, $content = "", $shortcodename = "")
            {
                
                $output = $titleClass  = $contentClass = $icon = "";
                $tab_atts = shortcode_atts(array('title' => '', 'icon_select'=>'no', 'icon' =>"", 'custom_id' =>'', 'font' =>'', 'custom_markup' => '','tab_image' =>"",'tab_image_style' =>""), $atts, 'av_tab');
                
    				$display_char 	= av_icon($tab_atts['icon'], $tab_atts['font']);
    				$icon			= "";
    				$image 			= "";
    
                if(is_numeric(avia_sc_tab::$initial) && avia_sc_tab::$counter == avia_sc_tab::$initial)
                {
                    $titleClass   = "active_tab";
                    $contentClass = "active_tab_content";
                }
    
                if(empty($tab_atts['title']))
                {
                    $tab_atts['title'] = avia_sc_toggle::$counter;
                }
    
                /*if($tab_atts['icon_select'] == "yes")
                {
                    $icon = "<span class='tab_icon' {$display_char}></span>";
                }*/
    			if($tab_atts['icon_select'] == "icon_top")
    	            {
    	                //avia_sc_tab_section::$tab_icons[ avia_sc_tab_section::$tab ] = "<span class='av-tab-section-icon' {$display_char}></span>";
    	            $myccicon ="<span class='av-tab-section-icon maxwwicon' {$display_char}></span>";
    				}
    	            
    	            if($tab_atts['icon_select'] == "image_top")
    	            {
    	            	if(!empty($tab_atts['tab_image']))
    	            	{
    	            		$src = wp_get_attachment_image_src($tab_atts['tab_image'], 'square');
    	            		
    	            		if(!empty($src[0])){
    	            	    	$myccimage = "<img class='av-tab-section-image' src='".$src[0]."' alt='' title='' />";
    						}
    					}
    				}
    
                if(empty($tab_atts['custom_id']))
                {
                    $tab_atts['custom_id'] = 'tab-id-'.avia_sc_tab::$tab_id++;
                }
    
                $markup_tab = avia_markup_helper(array('context' => 'entry','echo'=>false, 'custom_markup'=>$tab_atts['custom_markup']));
                $markup_title = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'custom_markup'=>$tab_atts['custom_markup']));
                $markup_text = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'custom_markup'=>$tab_atts['custom_markup']));
    
                $output .= '<section class="av_tab_section" '.$markup_tab.'>';
                $output .= '    <div data-fake-id="#'.$tab_atts['custom_id'].'" class="tab '.$titleClass.'" '.$markup_title.'>'.$myccimage.$myccicon.$tab_atts['title'].'</div>'."\n";
                $output .= '    <div id="'.$tab_atts['custom_id'].'-container" class="tab_content '.$contentClass.'">'."\n";
                $output .= '        <div class="tab_inner_content invers-color" '.$markup_text.'>'."\n";
    			$output .= ShortcodeHelper::avia_apply_autop(ShortcodeHelper::avia_remove_autop($content))."\n";
                $output .= '        </div>'."\n";
                $output .= '    </div>'."\n";
                $output .= '</section>'."\n";
    
                avia_sc_tab::$counter ++;
    
                return $output;
            }
    	}
    }
    ?>

    Then call this file in your child functions.php

    add_filter( 'avia_load_shortcodes', 'mmx_modify_shortcodes', 15, 1 );
    function mmx_modify_shortcodes( $paths ){
    	$template_url = get_stylesheet_directory();
    	array_unshift( $paths, $template_url.'/shortcodes/');
    	return $paths;
    }
    

    Any remarks or tips are welcome.
    Thanks

    #761723

    Hi,

    Thanks for sharing that, much appreciated.

    Best regards,
    Rikard

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.