Grid Layout Problem

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.

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!

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.

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!