Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #754327

    Another Share.

    After reading these posts:

    https://kriesi.at/support/topic/open-form-in-a-lightbox-popup/

    https://kriesi.at/support/topic/inline-content-in-magnific-popup/

    These solutions were difficult.

    The current problem with Enfolds is that only certain AVIA LAYOUT BUILDER – LAYOUT ELEMENTS allow for a custom Developer ID.

    The issue with each of theses layout elements (Colour Section, Grid Row, Tab Section ) is that they are all full width and interfere with the side bar position. Not good if you are adding a linline popup link. And the popup content has to be inside a ‘Colour Section’.

    I should note that you can add a custom ID to a [CODEBLOCK] [/CODEBLOCK], However this didn’t work either as paragraphs <p></p> were stripped from the HTML and replaced with inverted commas “” loosing any paragraph styling.

    AVIA LAYOUT BUILDER would be more flexible if we had the ability to add theme support for custom ID on layout elements, the same way you currently add theme support for ‘Custom Css Class’…

    add_theme_support('avia_template_builder_custom_css');
    

    Any way, I though I would share my quick [SHORTCODE] solution with the community.

    Enfolds out of the box already supports lightbox modal windows for videos and images. This solution allows you to display large amounts of formatted text like; terms and conditions, privacy statements, warranty etc. in a lightbox modal window.

    Lets get started.

    As Magnific Popup is installed natively with Enfolds Theme, we don’t need to load any other assets.

    ——————————————————————————-
    PHP
    In your child-theme functions.php file add the following code:

    
    /*-------------------------------------------------------------------------------
    INLINE POP UP ENABLER
    -------------------------------------------------------------------------------*/
    function inline_popup_enabler(){
    ?>
    <script>
    (function($){
        $(window).load(function() {
        	$('.inline_popup').magnificPopup({
        	  type:'inline',
        	  midClick: true 
        	});
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'inline_popup_enabler');
    
    /*-------------------------------------------------------------------------------
    	SHORTCODE  - INLINE POST CONTENT POP-UP	
    	[mfp_post_popup post_slug_id="" popup_id="" link_text="" custom_class=""]
    -------------------------------------------------------------------------------*/
    
    function mfp_post_popup_shortcode( $atts ){
    
    	//default values
        extract( shortcode_atts([
            'post_slug_id' => '',
            'popup_id' => '',
            'link_text' => 'hello',
            'mfp_hide' => 'mfp-hide',
            'custom_class' => 'mfp_popup_content'
        ], $atts ) );
        
    	//get post content
        $pop_slug = get_post($post_slug_id);
        $content = apply_filters( 'the_content', $pop_slug->post_content );
    
    	//output post content into the footer before the closing body tag - content is hidden 
        add_action('wp_footer', function() use($content, $popup_id, $mfp_hide, $custom_class) {
            echo sprintf(
                '<div id="%s" class="%s %s">%s</div>',
                $popup_id,
                $mfp_hide,
                $custom_class,
                $content
            );        
        });
        //output popup link
        return sprintf(
            '<a class="inline_popup" href="#%s">%s</a>',
            $popup_id,
            $link_text    
        );
    
    }
    add_shortcode( 'mfp_post_popup', 'mfp_post_popup_shortcode' );
    
    

    ——————————————————————————-
    CSS
    In your child-theme/style.css file add the following CSS:

    
    .mfp_popup_content {
    	position: relative;
    	background: #ffffff;
    	padding: 40px;
    	width: auto;
    	max-width: 600px;
    	margin: 100px auto;
    	overflow: auto;
      }
    

    This CSS class is all you need to style the popup window. As this is a custom_class you can change the name of the class in the code or override the default class name by adding custom_class”” to the shortcode. and style to your hearts content. Rounded Corners, Colour Border, Coloured Background etc. etc.

    ——————————————————————————-
    CONTENT
    First create a new PAGE or POST with the content you want to display in your popup and publish.
    Take note of the post ID, which can be found in the URL address bar at the top of the browser http://domainname.com/wp-adminpost.php?post=

    ——————————————————————————-
    SHORTCODE
    On your page where you want to popup the content, add the following inline [SHORTCODE]:

    [mfp_post_popup post_slug_id="" popup_id="" link_text=""]
    

    post_slug_id=””
    Enter the ID of the post that you want as content in your popup window.
    Example: post_slug_id="5"

    popup_id=””
    Enter a custom identifier for the popup. For multiple popup’s on one page, use a different identifier for each popup_id. Don’t use spaces in the ID name. You can use underscore _ and dash – in place of spaces.
    Example: popup_id="popup_1"

    link_text=””
    Enter the text ( spaces are allowed ) that will be the active link for the popup.
    Example: link_text="open me"

    EXAMPLE:
    Some custom content here with in line link to [mfp_post_popup post_slug_id="5" popup_id="popup_1" link_text="open me"] in a popup window.

    ——————————————————————————-
    EXPLINATION

    The code does 3 things:

    1. Adds a jQuery script to the footer that enables Magnific popup for elements with a class .inline_popup

    2. Creates the active link where the [SHORTCODE] is inserted

    <a class=”inline_popup” href=”#popup_id”>link_text</a>
    

    3. Creates a hidden div in the footer that contains the content from the post_slug_id

    <div id=”popup_id” class=”mfp_hide custom_class”>content</div>
    

    ——————————————————————————-
    TWEAKS

    You may find that not all custom theme style colours translate into the magnific popup modal window. However by adding some additional css styles you can target the elements again.

    .main_color blockquote { border-color: #c3512f; }
    

    Change this by add additional CSS to your child-theme’s style.css file

    #top .mfp_popup_content blockquote { border-color: #c3512f; }
    

    That’s about it.

    Please Share

    #756806

    Hi HuxburyQuinn!

    Thank you for using Enfold and for extending available options! Please post this tutorial in the Enfold Library.

    // https://github.com/KriesiMedia/enfold-library

    Thanks!

    Best regards,
    Ismael

    #758789

    Thank you ! Works perfect ! Nice tutorial

    #780440

    UPDATE

    Change this code

    '<div id="%s" class="%s %s">%s</div>',

    to include additional enfold css class “main_color”

    '<div id="%s" class="%s %s main_color">%s</div>',

    Then the CSS TWEAKS won’t be required.

    The modal widow content will adopt all standard Enfold CSS Styling.

    #780978

    Hi @HuxburyQuinn,

    Thanks for sharing that, much appreciated :-)

    Best regards,
    Rikard

    #918779

    UPDATE

    PHP extract() function is being depreciated – so I have updated the code below

    https://externals.io/message/100637

    I have added additional session timer cookie to automatically pop-up after a time period.
    shortcode option: popup_delay="" is optional.

    example: [mfp_post_popup post_slug_id=’1′ popup_id=’join’ link_text=’Subscribe’ popup_delay=’15’]

    /*-------------------------------------------------------------------------------
    ENFOLD INLINE POP-UP ENABLER
    -------------------------------------------------------------------------------*/
    function inline_popup_enabler(){
    	?>
        <script>
            /*!
             * JavaScript Cookie v2.2.0
             * https://github.com/js-cookie/js-cookie
             *
             * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
             * Released under the MIT license
             */
            !function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}return function n(t){function o(n,r,i){if("undefined"!=typeof document){if(arguments.length>1){"number"==typeof(i=e({path:"/"},o.defaults,i)).expires&&(i.expires=new Date(1*new Date+864e5*i.expires)),i.expires=i.expires?i.expires.toUTCString():"";try{var c=JSON.stringify(r);/^[\{\[]/.test(c)&&(r=c)}catch(e){}r=t.write?t.write(r,n):encodeURIComponent(String(r)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var f="";for(var a in i)i[a]&&(f+="; "+a,!0!==i[a]&&(f+="="+i[a].split(";")[0]));return document.cookie=n+"="+r+f}for(var p={},u=function(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)},s=document.cookie?document.cookie.split("; "):[],d=0;d<s.length;d++){var l=s[d].split("="),C=l.slice(1).join("=");this.json||'"'!==C.charAt(0)||(C=C.slice(1,-1));try{var g=u(l[0]);if(C=(t.read||t)(C,g)||u(C),this.json)try{C=JSON.parse(C)}catch(e){}if(p[g]=C,n===g)break}catch(e){}}return n?p[n]:p}}return o.set=o,o.get=function(e){return o.call(o,e)},o.getJSON=function(){return o.apply({json:!0},arguments)},o.remove=function(n,t){o(n,"",e(t,{expires:-1}))},o.defaults={},o.withConverter=n,o}(function(){})});
    
            (function($){
    
                $( document ).ready( function(){
    
                    var popup_link = $('.inline_popup');
    
                    var delay = popup_link.data( 'delay');
    
                    var cookieName = 'MfpHasDisplayedPopup';
    
                    $('.inline_popup').magnificPopup({
                        type:'inline',
                        midClick: true
                    });
    
                    if( typeof Cookies.get( cookieName ) === 'undefined' && typeof delay !== 'undefined' ){
    
                        setTimeout( function(){
    
                            Cookies.set( cookieName , '1' );
                            $('.inline_popup').magnificPopup('open');
    
                        }, parseInt( delay ) * 1000 )
                    }
    
                } );
    
            })(jQuery);
        </script>
    	<?php
    }
    add_action('wp_footer', 'inline_popup_enabler');
    
    /*-------------------------------------------------------------------------------
    	ENFOLD SHORTCODE  - INLINE POST CONTENT POP-UP
    	[mfp_post_popup post_slug_id="" popup_id="" link_text="" custom_class="" popup_delay=""]
    -------------------------------------------------------------------------------*/
    
    function mfp_post_popup_shortcode( $atts ){
    
    	//default values
    	$atts = shortcode_atts( [
    		'post_slug_id' => '',
    		'popup_id'     => '',
    		'link_text'    => 'hello',
    		'mfp_hide'     => 'mfp-hide',
    		'custom_class' => 'mfp_popup_content',
    		'popup_delay'  => false,
    	], $atts );
    
    	//get post content
    	$pop_slug = get_post( $atts['post_slug_id'] );
    	$content = apply_filters( 'the_content', $pop_slug->post_content );
    
    	//output post content into the footer before the closing body tag - content is hidden
    	add_action('wp_footer', function() use( $content, $atts ) {
    		echo sprintf(
    			'<div id="%s" class="%s %s main_color">%s</div>',
    			$atts['popup_id'],
    			$atts['mfp_hide'],
    			$atts['custom_class'],
    			$content
    		);
    	});
    
    	//output popup link
    	return sprintf(
    		'<a class="inline_popup" %s href="#%s">%s</a>',
    		( $atts['popup_delay'] ) ? 'data-delay="' . esc_attr( $atts['popup_delay'] ) . '"' : '' ,
    		$atts['popup_id'],
    		$atts['link_text']
    	);
    
    }
    add_shortcode( 'mfp_post_popup', 'mfp_post_popup_shortcode' );
    #919129

    Hello
    Thanks for this information. I am not an expert webmaster at all. But I am looking for the way to show popus with Enfold theme.
    I followed every step according HuxburyQuinn tutorial and explanation: create the child theme, copy the function, copy the .css… load in my sever.
    But I guess I am missing something, because when I copy in one portfolio or post entry “[mfp_post_popup post_slug_id=”4920″ popup_id=”popup_1″ link_text=”open me”]”, the result is it appears exactly as it is wrote. You can see it here:

    I also tried [SHORTCODE][mfp_post_popup post_slug_id=”4920″ popup_id=”popup_1″ link_text=”open me”][SHORTCODE]. Same problem.
    Any help you can give to me will be more than welcome
    Kind regards

    #919328

    Hi Allia19
    Sorry to hear you are having problems.

    On a child theme, you do not copy the ‘functions.php’ file from the parent ENFOLD theme.

    Please go here to download the child theme http://kriesi.at/documentation/enfold/downloads/

    FTP – Upload the Child theme to your /wp-content/themes/

    WP – Activate the “Enfold Child” Theme in Dashboard>Appearance>Themes

    FTP – Open the ‘functions.php’ file in Enfold Child via text editor – Paste in the latest code above from ( February 28, 2018 at 4:03 am) above.

    FTP Open ‘style.css’ in Enfold Child via text editor – Paste in the CSS code above.

    WP – Add a page and get the ID of the page you wish to pop-up i.e. 4920

    WP – On the page for the pop-up, paste in your shortcode like this.
    ‘[mfp_post_popup post_slug_id=”4920″ popup_id=”popup_1″ link_text=”open me”]’

    I only posted the new code yesterday – so it fully tested and working on my client website. So it should be right.

    Let me know if you have any further problems with your implementation.

    #919380

    Hi,

    Thanks for helping out @HuxburyQuinn :-)

    Best regards,
    Rikard

    #919417
    This reply has been marked as private.
    #919422
    This reply has been marked as private.
    #919594

    It works perfectly. Thank you for your help @huxburyquinn
    Have a lovely day

    #919905

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Basilis

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘CODE SNIPPET – INLINE POST CONTENT POPUP – MAGNIFIC POPUP – SHORTCODE’ is closed to new replies.