Listing Preview Page Layout Breaks

This topic contains 9 replies, has 4 voices, and was last updated by  Paolo 9 years, 3 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • #20656

    JSon
    Free User
    Post count: 22

    Details Info:
    Themes, Plugin, Extension are Current Version
    Theme: GDF Child Theme

    Hi,

    Please help the listing preview page doesn’t look or inherit layout from detail page. Layouts are overlapping one another(attached screenshots).

    Your help resolving this issue is very much appreciates ;-).

    Thanks,
    JSon

    #20662

    JSon
    Free User
    Post count: 22

    Here is my URL:
    http://www.nyamey.com/restaurants/cambodia/phnom-penh/phnom-penh/morimoto/

    Please try to add listing and preview listing looking very bad 🙁

    Doesn’t suppose to inherit from detail page so customer can preview actual listing?

    Your help is much appreciates

    Thanks in advance
    json

    #20671

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    there is a listing-preview.php template, you should look there.

    Stiofan

    #20733

    Paolo
    Site Admin
    Post count: 31206

    yes, it appears that customization made on the detail page didn’t take the preview page into consideration and broke it.

    Let us know,

    Thx

    #20776

    JSon
    Free User
    Post count: 22

    Hi guys, thanks for your quick response.

    @stiofan OConnor thanks for the hint :). I’ve looked into listing-preview.php file and have copied it to GDF child/geodirectory/listing-preview.php as described in this doc -> http://docs.wpgeodirectory.com/customizing-geodirectory-templates/ so I can preserve the original file and if anything goes wrong I have backup file.

    @paolo I’m a PHP newbie 😉 just started to learn PHP only few months ago.

    Would you be kind to give me hints or guidance on how to go about fixing the preview page? Any specific lines of code I should look for or edit in listing-preview.php file? Is there a better options or ways to edit the details page without effecting preview page?

    Kind Regards,
    JSon 🙂

    #20836

    Paolo
    Site Admin
    Post count: 31206

    Hi JSon,

    Preview page and detail page use 2 different templates.

    While the detail page is getting the data from the database, the preview page can’t get them from the database, because they are not saved in the database yet, so they are collected from a session.

    You have to modify listing-preview.php to match the mods made to listing-detail.php.

    Thanks

    #21132

    JSon
    Free User
    Post count: 22

    Hi Paolo,

    Actually I didn’t mod any code in listing-details.php, I just CSS it via GDF Child Theme Custom CSS Option to make it look nicer. And I ended up with layout problem in listing preview page. 🙁

    In listing-preview.php file I’ve found:

    
    
    <div class="clearfix geodir-common">
            <div id="geodir_content">

    I tried to insert new class so I can target that class to fix layout issue for preview page.

    
    
    <div class="clearfix geodir-common">
            <div id="geodir_content" class="my-preview-page">

    After updated file I didn’t see it on element inspector.

    Please advice.

    
    
    <?php 
    header("X-XSS-Protection: 0");
    get_header(); 
    
    do_action('geodir_before_main_content','listing-preview-page'); 
    
    	
    	foreach($_REQUEST as $pkey=>$pval){
    	if($pkey=='geodir_video'){$tags= '<iframe>';}
      elseif($pkey=='post_desc'){$tags= '<p><a><b><i><em><h1><h2><h3><h4><h5><ul><ol><li><img><div><del><ins><span><cite><code><strike><strong><blockquote>';}
      elseif($pkey=='geodir_special_offers'){$tags= '<p><a><b><i><em><h1><h2><h3><h4><h5><ul><ol><li><img><div><del><ins><span><cite><code><strike><strong><blockquote>';}
      elseif(is_array($_REQUEST[$pkey])){$tags='skip_field';}
      else{$tags='';}
    
    		$tags = apply_filters('geodir_save_post_key', $tags,$pkey);
    		if($tags!='skip_field'){
    			$_REQUEST[$pkey] = strip_tags($_REQUEST[$pkey], $tags);
    		}
    		
     }
    	
    
    	$post = (object)$_REQUEST;
    	
    	if(isset($post->video))
    	$post->video = stripslashes($post->video);
    	
    	if(isset($post->Video2))
    		$post->Video2 = stripslashes($post->Video2);
    	
    	$post_type = $post->listing_type;
    	$post_type_info = get_post_type_object( $post_type );
    	
    	
    	$listing_label = $post_type_info->labels->singular_name;
    	
    	$term_icon = '';
    	
    	if(!empty($post->post_category)){
    		foreach($post->post_category as $post_taxonomy => $post_term){
    		
    			if($post_term != '' && !is_array($post_term))
    				$post_term = explode(',', trim($post_term,','));
    			
    			
    			$post_term = array_unique($post_term);
    			
    				if(!empty($post_term)){
    					foreach($post_term as $cat_id){
    						$cat_id = trim($cat_id);
    						
    						if($cat_id != ''){
    							/*if($term_icon_url = get_tax_meta($cat_id,'ct_cat_icon'))
    								$term_icon = $term_icon_url['src'];*/
    							$term_icon = get_option('geodir_default_marker_icon');
    							if(isset($post->post_default_category) && $post->post_default_category == $cat_id)
    							{
    								if($term_icon_url = get_tax_meta($cat_id, 'ct_cat_icon', false, $post_type)){
    									if(isset($term_icon_url['src']) && $term_icon_url['src'] != '')
    									 $term_icon = $term_icon_url['src'];
    										break;
    								}
    							}
    						}
    						
    					}
    				}
    		}							
    	}
    	
    	$post_latitude = isset($post->post_latitude) ? $post->post_latitude : '';
    	$post_longitude = isset($post->post_longitude) ? $post->post_longitude : '';
    	
    	$srcharr = array("'","/","-",'"','\');
    	$replarr = array("&prime;","&frasl;","&ndash;","&ldquo;",'');
    	
    	$json_title = str_replace($srcharr,$replarr,$post->post_title);
    	
    	$json ='{';
    	$json .= '"post_preview": "1",';
    	$json .= '"t": "'.$json_title.'",';
    	$json .= '"lt": "'.$post_latitude.'",';
    	$json .= '"ln": "'.$post_longitude.'",';
    	$json .= '"i":"'.$term_icon.'"';
    	$json .= '}';
    	
    	$post->marker_json = $json;
    	
    	$_SESSION['listing'] = serialize($_REQUEST);
    	
    	
    	?>
        		
    <div id="geodir_wrapper">
        
    	<?php geodir_get_template_part('preview','buttons'); ?>
        
        <?php geodir_breadcrumb();?>
        
        <div class="clearfix geodir-common">
            <div id="geodir_content" class="my-preview-page">                        
                 
                <?php do_action('geodir_before_post_preview', $post); ?>
            
                <h1><?php echo (stripslashes($post->post_title)); ?></h1>   
                
                <!-- Post Images slider start --> 
                <?php 
    			
    						if(isset($post->post_images))
                	$post->post_images = trim($post->post_images,",");
    							
                if(isset($post->post_images) && !empty($post->post_images))
    		    	$post_images = explode(",",$post->post_images);
           
    			 
    			 $main_slides = '';
    			 $nav_slides = '';     
    			
    			if(empty($post_images)){
    				$default_img = '';
    				
    				$default_cat = '';
    				if(isset($post->post_default_category))
    					$default_cat = $post->post_default_category;
    				
    				if($default_catimg = geodir_get_default_catimage($default_cat,$post_type))
    					$default_img = $default_catimg['src'];
    				elseif($no_images = get_option('geodir_listing_no_img')){
    					$default_img = $no_images;
    				}
    				
    				if(!empty($default_img)){
    					$post_images[] = $default_img;
    				}
    			}        
                $slides = 0;
                
                if(!empty($post_images)){
                    foreach($post_images as $image){
                     if(!empty($image)){
    					@list($width, $height) = getimagesize(trim($image));
    		
    					if ( $image && $width && $height )
    							$image = (object)array( 'src' => $image, 'width' => $width, 'height' => $height );    
    					
    					
    					if(isset($image->src)){
    					
    						if($image->height >= 400){
    							$spacer_height = 0;
    						}else{
    							$spacer_height = ((400-$image->height)/2);
    						}
    							
    							$image_title = isset($image->title) ? $image->title : '';
    							
    						$main_slides .=	'<li><img src="'.geodir_plugin_url()."/geodirectory-assets/images/spacer.gif".'"  alt="'.$image_title.'" title="'.$image_title.'" style="max-height:'.$spacer_height.'px;margin:0 auto;" />';
    						$main_slides .=	'<img src="'.$image->src.'"  alt="'.$image_title.'" title="'.$image_title.'" style="max-height:400px;margin:0 auto;" /></li>';
    							
    							
    						$nav_slides .=	'<li><img src="'.$image->src.'"  alt="'.$image_title.'" title="'.$image_title.'" style="max-height:48px;margin:0 auto;" /></li>';
    						
    					
    											
    											$slides++;
    						}
    					}					
                    }// endfore
                } //end if
    			
    			
    			if(!empty($post_images)){
                ?>
                <div class="geodir_flex-container" >	
                    <div class="geodir_flex-loader"></div> 
                    <div id="geodir_slider" class="geodir_flexslider">
                      <ul class="slides">
                            <?php echo $main_slides;?>
                      </ul>
                    </div>
                    <?php if( $slides > 1){ ?>
                        <div id="geodir_carousel" class="geodir_flexslider">
                          <ul class="slides">
                                <?php echo $nav_slides;?>
                          </ul>
                        </div>
                    <?php } ?>
                </div>
                <!-- Post Images slider end --> 
                 <?php } ?>
                
                <!-- Post terms start --> 
                <p class="geodir_post_taxomomies clearfix"> 
                    <?php 
                        $taxonomies = array();
                        
                        if(!empty($post->post_tags)){
                           
                            if(taxonomy_exists($post_type.'_tags')):
                                $links = array();
                                $terms = array();
                            	
    							foreach($post_tags as $post_term){
            						
    								$post_term = trim($post_term);
    							   
    							    if($insert_term = term_exists( $post_term, $post_type.'_tags' )){
                                        $term = get_term_by( 'name', $post_term, $post_type.'_tags'); 
                                    }else{
                                        $insert_term = wp_insert_term($post_term, $post_type.'_tags');
                                         $term = get_term_by( 'name', $post_term, $post_type.'_tags');
                                    }	
                                    
                                    if(! is_wp_error( $term ))
                                    {	
    									//$links[] = "<a href='" . esc_attr( get_tag_link($term->term_id) ) . "'>$term->name</a>";
    									// fix tag link on detail page
    									$links[] = "<a href='" . esc_attr( get_term_link($term->term_id, $term->taxonomy) ) . "'>$term->name</a>";
                                        $terms[] = $term;
                                    }
                                }
                            
                                $taxonomies[$post_type.'_tags'] = wp_sprintf('%s: %l.', ucwords($listing_label.' Tags'), $links, (object)$terms);
                            endif;	
                            
                        }
                        
    					if(!empty($post->post_category)){
    					
    						$links = array();
                            $terms = array();
                            
                            foreach($post->post_category as $post_taxonomy => $post_term){
    														
    														if($post_term != '' && !is_array($post_term))
    															$post_term = explode(',', trim($post_term,','));
    														
                                $post_term = array_unique($post_term);
    							
    							if(!empty($post_term)){
    								foreach($post_term as $post_term){
    									$post_term = trim($post_term);
    									
    									if($post_term != ''):	
    										$term = get_term_by( 'id', $post_term, $post_taxonomy); 
    									  
    										$links[] = "<a href='".esc_attr( get_term_link($term,$post_taxonomy) ) . "'>$term->name</a>";
    										$terms[] = $term;
    									endif;
    								}
    							}
    							break;
    						}
                            $taxonomies[$post_taxonomy] = wp_sprintf('%s: %l.', ucwords($listing_label.' Category'), $links, (object)$terms);
                            
                        }
                        echo '<span class="geodir-category">' . $taxonomies[$post_taxonomy] . '</span>';	
    										
    					if ( isset( $taxonomies[$post_type.'_tags'] ) ) {		
                       		echo '<span class="geodir-tags">' . $taxonomies[$post_type.'_tags'] . '</span>';
    					}
                        ?>   
                </p>
                <!-- Post terms end -->
    			<?php if( (int)get_option( 'geodir_disable_gb_modal' ) != 1 ) { ?>
                <!-- Post info tabs start -->     
                <script type="text/javascript">
                   jQuery(function() {
                        jQuery('#post-gallery a').lightBox({
                            overlayOpacity : 0.5,
                            imageLoading : '<?php echo geodir_plugin_url().'/geodirectory-assets/images/lightbox-ico-loading.gif';?>',
                            imageBtnNext : '<?php echo geodir_plugin_url().'/geodirectory-assets/images/lightbox-btn-next.gif';?>',
                            imageBtnPrev : '<?php echo geodir_plugin_url().'/geodirectory-assets/images/lightbox-btn-prev.gif';?>',
                            imageBtnClose : '<?php echo geodir_plugin_url().'/geodirectory-assets/images/lightbox-btn-close.gif';?>',
                            imageBlank : '<?php echo geodir_plugin_url().'/geodirectory-assets/images/lightbox-blank.gif';?>'
                        });
                    });
                </script>
    			<?php } ?>			   
                <!-- Post info tabs start -->
    			<?php geodir_show_detail_page_tabs(); ?>
                <?php do_action('geodir_after_post_preview', $post);?>
            </div>		
    		<?php     
            
            do_action('geodir_after_main_content');
        
            geodir_get_template_part('detail','sidebar');
    		
            ?>
        </div>
    </div>    
    <?php get_footer();   
    #21182

    Paolo
    Site Admin
    Post count: 31206

    Hi Json,

    You can’t have modified this only with css:

    http://www.nyamey.com/restaurants/cambodia/phnom-penh/phnom-penh/morimoto/

    Elements that are notmally in the sidebar now are in the content area.

    We can’t debug your customizations though, it goes beyond the scope of the support forum.

    If you want I can move this in the Jobs section of the forum where developers may be interested in helping you correctly customizing your website.

    Let us know,

    Thx

    #47623

    tester tester
    Free User
    Post count: 1
    This reply has been marked as private.
    #47695

    Paolo
    Site Admin
    Post count: 31206

    Hi tester,

    please see this forum post: https://wpgeodirectory.com/support/topic/modifying-the-layout/

    It should get you started.

    Thanks

Viewing 10 posts - 1 through 10 (of 10 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount