Grid Layout Problem

Viewing 11 posts - 1 through 11 (of 11 total)
  • #17165
    Aidorm
    Participant

    This theme is great and really flexible!

    However I’ve encountered a problem while I’m trying to customize the layout of one of my pages.

    I’ve managed to get the right code to correctly display only posts with images. However they always display the photo in the whole page and it does not follow the grid layout that I’ve chosen in the options.

    Can anyone please point to me on what function/code that I should tweak?

    Thanks in advance!

    #17173
    Daniel Tara
    Keymaster

    Can you please post a link to your website and maybe the excerpt of code that you modified?

    #17187
    Aidorm
    Participant

    Here’s the code that I’m using to a modified page.

    <?php
    /* 
    Template Name: Custom Visual Page Template
    */
    get_header(); ?>
    <?php $pinboard_page_template = 'template-portfolio-right-sidebar.php'; ?>
    	<?php get_sidebar( 'wide' ); ?>
    	<?php get_sidebar( 'boxes' ); ?>
    <div id="container">
    	<section id="content" class="column twothirdcol"> 
    		<h2>Quotes with Visuals</h2>
    			<?php echo '<hr/>'; ?>
    			<?php
    			$args = array(
    				'post_type' => 'attachment',
    				'post_status' => 'inherit',
    				'post_mime_type' => 'image/jpeg',
    				'fields' => 'id=>parent',
    				'cat' => pinboard_get_option( 'portfolio_cat' ),
    				'posts_per_page' => get_option ('posts_per_page'),
    				'paged' => max( 1, get_query_var( 'paged' ) )
    			);
    			// get all attachment IDs and their parent post IDs.
    			$images = new WP_Query( $args );
    			if ( $images->have_posts() ) :
    			// get attachments parent post IDs
    			$parents = wp_list_pluck( $images->posts, 'post_parent' );
    			// remove duplicates and non attached images (parent == 0)
    			$parents = array_filter( array_unique( $parents ) );
    			// query for posts with images
    			$args = array(
    				'cat' => pinboard_get_option( 'portfolio_cat' ),
    				'posts_per_page' => get_option ('posts_per_page'),
    				'paged' => max( 1, get_query_var( 'paged' ) ),
    				'post__in' => $parents
    			);
    			$posts_with_images = new WP_Query( $args );
    			?>			
    			<?php if ( $posts_with_images->have_posts() ) : ?>
    				<div class="entries">
    					<?php while ( $posts_with_images->have_posts() ) : $posts_with_images->the_post(); ?>
    						<?php get_template_part( 'content', 'customimage' ); ?>
    					<?php endwhile ?>
    				</div>
    				<?php pinboard_posts_nav(); ?>
    			<?php endif; ?>
    			<?php endif; ?>
    			<?php wp_reset_postdata(); ?>
    	<!-- if ( $images->have_posts() )   -->
    	</section><!-- #content -->
    	<?php if( ( 'no-sidebars' != pinboard_get_option( 'layout' ) ) && ( 'full-width' != pinboard_get_option( 'layout' ) ) ) : ?>
    	<?php get_sidebar(); ?>
    	<?php endif; ?>
    	<div class="clear"></div>
    </div>
    <!-- #container -->
    <?php get_footer(); ?>

    It displays all post with pictures/attachments but it does not follow the usual grid setup that I made. It shows all the post in 1 column that occupies the whole of the page except for my sidebar.

    What I want to achieve is to have the same setup for the gird while still showing all the post with pictures.

    Thanks again, I’m still a noob in this kind of stuff.

    #17196
    Daniel Tara
    Keymaster

    I believe the issue has more to do with the content-customimage.php file than with the one you presented.

    #17199
    Aidorm
    Participant

    I see.. I modified the content-image.php into this code so that it will only show the images of each post. Can you have a look at my code and see what’s wrong?

    <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    	<div class="entry">
    		<?php if( ( 'full-width' != pinboard_get_option( 'layout' ) && ! is_category( pinboard_get_option( 'portfolio_cat' ) ) && ! ( is_category() && cat_is_ancestor_of( pinboard_get_option( 'portfolio_cat' ), get_queried_object() ) ) ) || pinboard_is_teaser() ) : ?>
    			<?php pinboard_post_image(); ?>
    		<?php endif; ?>
    		<div class="entry-container">
    			<?php if( ( 'full-width' == pinboard_get_option( 'layout' ) || is_category( pinboard_get_option( 'portfolio_cat' ) ) || ( is_category() && cat_is_ancestor_of( pinboard_get_option( 'portfolio_cat' ), get_queried_object() ) ) ) && ! pinboard_is_teaser() ) : ?>
    				<?php pinboard_post_image(); ?><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    			<?php endif; ?>
    			<div class="clear"></div>
    			<div align="right">
    				<a href="<?php get_category_link( $category_id );?>"><?php single_cat_title(); ?></a>
    			</div>
    			<?php echo '<hr/>'; ?>
    			<!-- .entry-container -->
    		<?php if( 'full-width' != pinboard_get_option( 'layout' ) && ! is_category( pinboard_get_option( 'portfolio_cat' ) ) && ! ( is_category() && cat_is_ancestor_of( pinboard_get_option( 'portfolio_cat' ), get_queried_object() ) ) ) : ?>
    			<?php pinboard_entry_meta(); ?>
    		<?php endif; ?>
    	</div><!-- .entry -->
    </article><!-- .post -->

    I also tried changing it to the code below but still it won’t work.

    <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    	<div class="entry">
    		<?php if( ! pinboard_post_is_full_width() ) : ?>
    			<?php pinboard_post_thumbnail(); ?>
    		<?php endif; ?>
    		<div class="entry-container">
    			<?php if( pinboard_post_is_full_width() ) : ?>
    				<?php pinboard_post_image(); ?><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    			<?php endif; ?>
    			<div class="clear"></div>
    			<div align="right">
    				<a href="<?php get_category_link( $category_id );?>"><?php single_cat_title(); ?></a>
    			</div>
    			<?php echo '<hr/>'; ?>
    			<!-- .entry-container -->
    		<?php if( ! pinboard_post_is_full_width() ) : ?>
    			<?php pinboard_entry_meta(); ?>
    		<?php endif; ?>
    	</div><!-- .entry -->
    </article><!-- .post -->

    Thanks again!

    #17205
    Daniel Tara
    Keymaster

    There doesn’t seen to be an issue with that code so my guess is is’s probably a CSS issue. Can you please post a link to the website or at least a screenshot?

    #17210
    Aidorm
    Participant

    I’m still testing the page setup in my offline server and I haven’t updated the website yet. What particular part of the page would you like me to see? So that I can make a good screenshot for it.

    #17211
    Aidorm
    Participant

    Here’s a screenshot of the Page that I’m setting up:

    Header: Link (https://drive.google.com/file/d/0B_zJVfUrkXimZVBEeUlDcU9iME0/edit?usp=sharing)

    Header

    Post/Body: Link (https://drive.google.com/file/d/0B_zJVfUrkXimdnl5TDFzQm5IS0E/edit?usp=sharing)

    Post/Body

    Footer: Link (https://drive.google.com/file/d/0B_zJVfUrkXimcmtlUmVNVTF1M0k/edit?usp=sharing)

    Footer

    • This reply was modified 10 years, 4 months ago by Aidorm.
    #17217
    Daniel Tara
    Keymaster

    It appears to me you are using a single page. The grid is meant to work only on archive pages.

    #17316
    Aidorm
    Participant

    It’s been a while, haven’t got free time doing this project. πŸ™

    I really appreciate all your help Daniel, however I’m still stuck with this one and I hope you don’t mind me buzzing around.

    Ok so my problem now is to find a way how to make the above single page as an archive page to get the grid layout thing to work.

    I don’t have a clue on how to work that out. I’ve been studying the hierarchy lately but I’m still lost on what is the correct code to include in my page. I hope you don’t mind leading me to the right direction..

    Thanks!

    #17318
    Aidorm
    Participant

    By the way, I was just checking the live preview of the Pinboard Theme and I get to this page.

    http://demo.onedesigns.com/pinboard/?page_id=28

    I wanted to achieve a similar effect however I’d like to remove and filter out those contents without any attached image.

    Is that possible to configure? I tried customizing the available portfolio templates but I can’t seem to get the effect that I want.

    I also tried looknig at function.php for the portfolio template to configure but I am lost.

    It must be that I’m such a noob at this. πŸ™

    Can anyone help me out? Thanks in advance!

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

You must be logged in to reply to this topic.