Support » Plugin: AMP » How to Exclude div code from AMP pages

  • Resolved luckyankit

    (@luckyankit)


    Since using paired mode, the plugin strips off the javascript, hence some elements on the page who requires js to work are rendered useless. Hence I would like to exclude them from the AMP pages. Hence, is there any way that I could exclude some HTML code identified by DIV in AMP pages?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    The best way to do this is to prevent adding the div in the first place. How is it being added to the page?

    It’s not possible. There is an image upload option in the comment box which doesn’t work in the AMP pages but shows up in there in the same way as in the full version. I tried to find a way if it can be shown only for non-AMP pages but it’s not possible as there was no shortcode support available by the plugin.

    Plugin Author Weston Ruter

    (@westonruter)

    Where is the div coming from? How is the plugin adding it?

    Lemme share the URL over slack.

    Plugin Author Weston Ruter

    (@westonruter)

    Please share the actual PHP code that is responsible for the div. Seeing the page HTML output won’t help.

    I believe this is the code, although I just shared the whole file at slack as well for your reference:

    add_action('comment_form', 'wpcommentiv_comment_form', 99);
    function wpcommentiv_comment_form()
    {
        
        if (!is_singular()) {
            return;
        }
    
        $options = get_option('wpcommentiv');
    	
    	
        //if ($options['field'] == 0)
        //{
    		
    		$images = 1;
    	if(isset($options['images'])){
    		$images = $options['images'];
    	}
           
            if (!isset($images) || !is_numeric($images)) $images = 1;
            for ($i=0; $i<$images; $i++)
            {
                echo '<div class="UploadPicture" data-toggle="tooltip" data-placement="top" title="" data-original-title="Attach a Photo">
                                                        <i class="icon-camera-retro" aria-hidden="true"></i> 
                                                        <input type="file" name="image" id="comment_img" title="' . htmlspecialchars($options['label']) . '">
                                                    </div> <div class="comtext" style="padding-top:8px; padding-left:50px;">Click the camera icon to upload an image to your answer/comment. One Image - Supported Extensions are JPG, GIF & PNG - Size Maximum - 2 MB. To embed multiple images, add image URLs to the answer/comment.</div>
    												<div class="WPImageComment">
    												
    												<div class="closePopUp">
    												<a data-close-popup="true" href="#" id="applyFilterOptionss">
    												<i class="icon-remove" aria-hidden="true"></i></a></div>
    												<div class="blahimage"><img id="blah" src="" alt="" valign="bottom"/></div>
    												</div>
    												
    												<style>
    												.WPImageComment { clear: both; padding-top:1px; display: block; }
    												.UploadPicture .form-group { margin-bottom:0px;}
    												.UploadPicture>input {position: absolute; top: 0; height:30px; width:400px; left:-30px; opacity:0; cursor:pointer;margin:0px; z-index:10;}
    												.UploadPicture { display: inline-block; color: #c7c7c7; font-size:25px; position:absolute; padding: 5px 10px; line-height: 39px; width: 46px; overflow: hidden; height: 38px;  cursor:pointer;}
    												.UploadPicture:hover { color:#999;}
    												 .closePopUp{
    													 position:absolute;
    													float:right;
    													vertical-align:top;
    													margin-top:5px; 
    													margin-left:15px; 
    													display:none;
    												}
    												.closePopUp a{
    												 color:#ff0000;
    												 cursor:pointer;
    												 font-size: 18px;
    												}
    												.filter-popup-is-shown .closePopUp{
    												display:inline-block;
    												}
    												</style>';
            //}
        } 
    }
    Plugin Author Weston Ruter

    (@westonruter)

    You just need to unhook wpcommentiv_comment_form from running in AMP responses. For example:

    add_action(
    	'template_redirect',
    	function() {
    		if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
    			remove_action( 'comment_form', 'wpcommentiv_comment_form', 99 );
    		}
    	}
    );

    Thanks, that worked. Is there any way I could exclude the following code from AMP as well?

    <aside class="mobile-aside mobile-menu-wrap<?php echo ($mobile_menu == "light"?" light-mobile-menu":($mobile_menu == "dark"?" dark-mobile-menu":" gray-mobile-menu"))?>">
    		<div class="mobile-aside-inner">
    			<div class="mobile-aside-inner-inner">
    				<a href="#" class="mobile-aside-close">close</a>
    				
    				<?php $top_menu_mobile = vpanel_options("top_menu_mobile");
    				if ($top_menu_mobile == 1) {?>
    					<div class="mobile-menu-top mobile-aside-menu">
    						<?php if (is_user_logged_in()) {
    							wp_nav_menu(array('container_class' => 'header-top','menu_class' => '','theme_location' => 'top_bar_login','fallback_cb' => 'vpanel_nav_fallback'));
    						}else {
    							wp_nav_menu(array('container_class' => 'header-top','menu_class' => '','theme_location' => 'top_bar','fallback_cb' => 'vpanel_nav_fallback'));
    						}?>
    					</div>
    					<!--<?php wp_nav_menu( array( 'theme_location' => 'max_mega_menu_1' ) ); ?>-->
    				<?php }
    				
    				$ask_question_mobile = vpanel_options("ask_question_mobile");
    				if ($ask_question_mobile == 1) {?>
    					<div class="ask-question-menu">
    						<a href="<?php echo esc_url(get_page_link(vpanel_options('add_question')))?>" class="color button small margin_0"><?php _e("Ask a Question","vbegy")?></a>
    					</div><!-- End ask-question-menu -->
    				<?php }
    				
    				$mobile_cart = vpanel_options("mobile_cart");
    				if (class_exists('woocommerce') && $mobile_cart == 1) {
    					echo "<div class='cart-wrapper'>";
    						global $woocommerce;
    						$num = $woocommerce->cart->cart_contents_count;
    						echo '<a href="'.$woocommerce->cart->get_cart_url().'" class="cart_control nav-button nav-cart"><i class="enotype-icon-cart"></i>
    							<span class="numofitems" data-num="'.$num.'">'.$num.'</span>
    						</a>
    						<div class="cart_wrapper'.(sizeof($woocommerce->cart->get_cart()) < 1?" cart_wrapper_empty":"").'"><div class="widget_shopping_cart_content"></div></div>
    					</div>';
    				}
    				
    				if (is_user_logged_in()) {
    					$user_id = get_current_user_id();
    					$mobile_notifications = vpanel_options("mobile_notifications");
    					if ($mobile_notifications == 1 && $active_notifications == 1) {
    						include("includes/notification.php");
    					}
    				}
    				
    				$main_menu_mobile = vpanel_options("main_menu_mobile");
    				if ($main_menu_mobile == 1) {?>
    					<div class="mobile-menu-left mobile-aside-menu">
    						<?php wp_nav_menu(array('container_class' => 'header-menu','menu_class' => '','theme_location' => 'header_menu','fallback_cb' => 'vpanel_nav_fallback'));?>
    						<!-- <?php wp_nav_menu( array( 'theme_location' => 'max_mega_menu_2' ) ); ?> -->
    					</div><!-- End mobile-menu-left -->
    				<?php }
    				
    				$social_mobile = vpanel_options("social_mobile");
    				if ($social_mobile == 1) {?>
    					<div class="social_icons f_right">
    						<ul>
    							<?php if ($twitter_icon_f) {?>
    							<li class="twitter"><a target="_blank" class="tooltip-s" href="<?php echo $twitter_icon_f?>"><i class="icon-twitter"></i></a></li>
    							<?php }
    							if ($facebook_icon_f) {?>
    								<li class="facebook"><a target="_blank" original-title="<?php _e("Facebook","vbegy")?>" class="tooltip-s" href="<?php echo $facebook_icon_f?>"><i class="icon-facebook-f"></i></a></li>
    							<?php }
    							if ($gplus_icon_f) {?>
    								<li class="gplus"><a target="_blank" original-title="<?php _e("Google plus","vbegy")?>" class="tooltip-s" href="<?php echo $gplus_icon_f?>"><i class="social_icon-gplus font17"></i></a></li>
    							<?php }
    							if ($youtube_icon_f) {?>
    								<li class="youtube"><a target="_blank" original-title="<?php _e("Youtube","vbegy")?>" class="tooltip-s" href="<?php echo $youtube_icon_f?>"><i class="icon-youtube"></i></a></li>
    							<?php }
    							if ($skype_icon_f) {?>
    								<li class="skype"><a target="_blank" original-title="<?php _e("Skype","vbegy")?>" class="tooltip-s" href="skype:<?php echo $skype_icon_f?>?call"><i class="icon-skype"></i></a></li>
    							<?php }
    							if ($flickr_icon_f) {?>
    								<li class="flickr"><a target="_blank" original-title="<?php _e("Flickr","vbegy")?>" class="tooltip-s" href="<?php echo $flickr_icon_f?>"><i class="social_icon-flickr font17"></i></a></li>
    							<?php }
    							if ($linkedin_icon_f) {?>
    								<li class="linkedin"><a target="_blank" original-title="<?php _e("Linkedin","vbegy")?>" class="tooltip-s" href="<?php echo $linkedin_icon_f?>"><i class="icon-linkedin"></i></a></li>
    							<?php }
    							if ($rss_icon_f == 1) {?>
    								<li class="rss"><a original-title="<?php _e("Rss","vbegy")?>" class="tooltip-s" href="<?php echo (vpanel_options("rss_icon_f_other") != ""?vpanel_options("rss_icon_f_other"):bloginfo('rss2_url'));?>"><i class="icon-rss"></i></a></li>
    							<?php }?>
    						</ul>
    					</div><!-- End social_icons -->
    				<?php }
    				$search_mobile = vpanel_options("search_mobile");
    				if ($search_mobile == 1) {?>
    				<!--	<div class="post-search">
    						<form role="search" method="get" class="searchform" action="<?php esc_url(home_url('/'))?>">
    							<div class="row">
    								<div class="col-md-8">
    									<input type="search" name="search" value="<?php if (get_search_query() != "") {echo esc_html(get_search_query());}else {esc_html_e("Hit enter to search","vbegy");}?>" onfocus="if(this.value=='<?php esc_html_e("Hit enter to search","vbegy")?>')this.value='';" onblur="if(this.value=='')this.value='<?php esc_html_e("Hit enter to search","vbegy")?>';">
    								</div><!-- End col-md-8 -->
    							<!--	<div class="col-md-4">
    									<input type="submit" class="button-default" value="<?php esc_html_e('Search','vbegy')?>">
    								</div><!-- End col-md-4 -->
    							</div><!-- End row -->
    						</form>
    					</div>
    				<?php }?>
    			</div><!-- End mobile-aside-inner-inner -->
    		</div><!-- End mobile-aside-inner -->
    	</aside><!-- End mobile-aside -->
    Plugin Author albertomedina

    (@albertomedina)

    The process you need to follow is the same as with the div. You need to determine where the code you want to exclude is coming from and apply the logic to exclude it as was done with the div.

    Above is the code from header.php file of the theme. It’s not the rendered code.

    • This reply was modified 5 months, 1 week ago by  luckyankit.
    • This reply was modified 5 months, 1 week ago by  luckyankit.
    Plugin Author albertomedina

    (@albertomedina)

    Same process. You can enclose the code you want to exclude on AMP responses inside the AMP endpoint check:

    
    if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
    	/* Code to be removed */
    }
    

    I am not sure how and what to add from above code inside the AMP endpoint code? It’s not like add_action, remove_action thing here.

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