[Resolved] Loop post type in grid

Home Forums Support Loop post type in grid

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #880506
    Guillem

    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

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #881022
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #881340
    Guillem

    Thanks Tom. With the tutorial I could solve the topic.

    #881517
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.