I want to display my search results in a grid

OK I have it working but is there a way of making it use the Portfolio grid layout, 4 columns, image width set to automatic? So that it looks like this:- http://www.dominicrutterford.co.uk/the-collection/ rather than http://www.dominicrutterford.co.uk/?s=Dinar??

Thanks in advance

Dominic

Hi

That changes the columns to 5 which is fine but it does not display the results the same as http://www.dominicrutterford.co.uk/the-collection/.

http://www.dominicrutterford.co.uk/the-collection/ displays as a portfolio grid, 5 columns with image size set to automatic.

The search results are displaying with the images much smaller and the spaces between much wider.

How can I do this in search results?

Here is my code:

<?php
                    if(!empty($_GET['s']))
			{
				echo "<h4 class='extra-mini-title widgettitle'>{$results}</h4>";

				global $posts;
				$post_ids = array();
				foreach($posts as $post) $post_ids[] = $post->ID;

						$atts = array(
						'type' => 'grid',
						'items' => get_option('posts_per_page'),
						'columns' => 5,
						'class' => 'avia-builder-el-no-sibling',
						'paginate' => 'yes',
						'use_main_query_pagination' => 'yes',
						'thumbnail' => 'portfolio',
						'custom_query' => array( 'post__in'=>$post_ids, 'post_type'=>get_post_types() )
				);

				$blog = new avia_post_slider($atts);
				$blog->query_entries();
				echo "<div class='entry-content'>".$blog->html()."</div>";
			}

                    ?>

Best

Dominic

BTW that CSS is being recognised when I check in Firebug. And if I use Firebug to force the images to be larger in the HTML it seems to correct the layout (although the images are pixelated because I am enlarging a portfolio-small image). I think we just need to find a way of calling the larger images and making them automatic.

I did also try:
'columns' => 'automatic',

This called the right images but broke the grid layout so that they were all stacked on top of each other in one long column.

Dominic

Yes they show up but they are not working like http://www.dominicrutterford.co.uk/the-collection/.

On http://www.dominicrutterford.co.uk/the-collection/ the margins stay the same fixed width and the images scale depending on screen width.

On the latest http://www.dominicrutterford.co.uk/?s=Dinar the margins scale depending on screen width and the images stay the same.

Please see screenshots:

I think I’ve cracked it!

.slide-image img {
width: 100vw;
}

Do you see any issues with that?

• This reply was modified 8 years ago by domchocolate.

Difference between the two is http://www.dominicrutterford.co.uk/the-collection/ calls

<img class="attachment-medium size-medium wp-post-image"

and search results calls

<img class="attachment-portfolio_small size-portfolio_small wp-post-image"

Brilliant – we’re there. Thanks for all of your help!