Archived topic
Loop post type in grid
3 replies · Started by Guillem on April 26, 2019
Hello,
I have a problem with the alignment of a loop of a custom post type created. I think it's a topic that I could solve with css but I do not give with the solution. On the web you can see the problem quickly: https://democelta1.demoswp.com/testimonials/
The code that I have put is the following:
<?php
/**
* The template for displaying testimonials Category pages.
*
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package GeneratePress
*/
// No direct access, please
if ( ! defined( 'ABSPATH' ) ) exit;
get_header(); ?>
<?php
global $post;
$args = array(
'posts_per_page' => '',
'offset' => 0,
'category' => '',
'category_name' => '',
'orderby' => 'date',
'order' => 'desc',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'testimonis',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'author_name' => '',
'post_status' => 'publish',
'suppress_filters' => true );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<div class="testimonis-bloc">
<div class="testimonis-contingut">
<div class="pimage">
<a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?></a>
</div>
<p class="testmonial-p"><?php the_content(); ?></p>
<p class="testimonials-h2"><?php echo get_the_title(); ?></p>
<p class="testimonial-country"><?php the_field('country'); ?></p>
<div class="testimonials-socials">
<?php $link = get_field('facebook'); if( $link ): ?><a href="<?php echo $link; ?>"><i class="fab fa-facebook-f"></i></span></a>
<?php endif; ?><?php $link = get_field('Twitter'); if( $link ): ?><a href="<?php echo $link; ?>"><i class="fab fa-twitter"></i></span></span></a>
<?php endif; ?><?php $link = get_field('Instagram');if( $link ): ?><a href="<?php echo $link; ?>"><i class="fab fa-instagram"></i></span></a><?php endif; ?>
</div>
</div>
</div>
<?php endforeach; wp_reset_postdata();
get_footer();
And the basic CSS is:
/*------archive testimonials---------*/
.testimonis-bloc{
width: 50%;
float: left;
}
.testimonis-contingut{
padding: 40px;
margin: 30px;
float: left;
background-color: #ffffff;
filter: drop-shadow(5px 5px 10px #ddd);
}
.pimage{
pointer-events: none;
cursor: default;
}
.testimonials-h2 {
float: left;
font-size: 16px;
font-style: italic;
margin-right: 10px;
}
.testimonial-country {
float: left;
font-size: 16px;
font-style: italic;
font-weight: 600;
}
.testimonials-socials{
float: right;
font-size: 16px;
}
In the WordPress forum I am told that it may be a problem of the subject and the masonry option. How can I solve that.
Thank you
Guillem
Excuse my English, I'm Catalan
Hi there,
It does look like you'll need to use a masonry-like solution.
This article looks like it explains implementing masonry quite well: https://www.wpdevsolutions.com/implement-masonry-in-wordpress/
Hope it helps :)
Thanks Tom. With the tutorial I could solve the topic.
You're welcome :)