CODEWITHSUNDEEP
phphtmlcss
Graham Slick
Graham Slick

Reputation: 6870

Add columns structure (like a grid) in profile tab

On my site, each user has a profile with its submitted posts in a dedicated profile tab.

I use this code to display the posts: 

<?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop->the_post(); $post_id = get_the_ID(); ?>

    <div class="um-item">
        <div  class="um-item-link"><i class="um-icon-ios-paper"></i><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>

        <?php if ( has_post_thumbnail( $post_id ) ) {
                $image_id = get_post_thumbnail_id( $post_id );
                $image_url = wp_get_attachment_image_src( $image_id, 'full', true );
        ?>

        <div class="um-item-img"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a></div>

        <?php } ?>

        <div class="um-item-meta">
            <span><?php echo sprintf(__('%s ago','ultimatemember'), human_time_diff( get_the_time('U'), current_time('timestamp') ) ); ?></span>
            <span>dans: <?php the_category( ', ' ); ?></span>
            <span><?php comments_number( __('no comments','ultimatemember'), __('1 comment','ultimatemember'), __('% comments','ultimatemember') ); ?></span>
        </div>
    </div>


<?php } ?>

However, here, each post is displayed with its featured image below another, in a single column. I'm trying to display my post in two or three adjacent columns instead of just one (like a grid). I started with this to see if the two columns where displayed well: 

<?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop->the_post(); $post_id = get_the_ID(); ?>

        <div id = "left" class="um-item">
            <div  class="um-item-link"><i class="um-icon-ios-paper"></i><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>

            <?php if ( has_post_thumbnail( $post_id ) ) {
                    $image_id = get_post_thumbnail_id( $post_id );
                    $image_url = wp_get_attachment_image_src( $image_id, 'full', true );
            ?>

            <div class="um-item-img"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a></div>

            <?php } ?>

            <div class="um-item-meta">
                <span><?php echo sprintf(__('%s ago','ultimatemember'), human_time_diff( get_the_time('U'), current_time('timestamp') ) ); ?></span>
                <span>dans: <?php the_category( ', ' ); ?></span>
                <span><?php comments_number( __('no comments','ultimatemember'), __('1 comment','ultimatemember'), __('% comments','ultimatemember') ); ?></span>
            </div>
        </div>

        <div id = "right" class="um-item">
            <div style="height: 10px;  class="um-item-link"><i class="um-icon-ios-paper"></i><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>

            <?php if ( has_post_thumbnail( $post_id ) ) {
                    $image_id = get_post_thumbnail_id( $post_id );
                    $image_url = wp_get_attachment_image_src( $image_id, 'full', true );
            ?>

            <div class="um-item-img"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a></div>

            <?php } ?>

            <div class="um-item-meta">
                <span><?php echo sprintf(__('%s ago','ultimatemember'), human_time_diff( get_the_time('U'), current_time('timestamp') ) ); ?></span>
                <span>dans: <?php the_category( ', ' ); ?></span>
                <span><?php comments_number( __('no comments','ultimatemember'), __('1 comment','ultimatemember'), __('% comments','ultimatemember') ); ?></span>
            </div>
        </div>

    <?php } ?>

with this css: 

 #left
        {
          width: 200px;
          float: left;
        }

        #right
        {
          margin-left: 200px;
        }

        .clear
        {
          clear: both;
        }

but the layout is a mess, everything is broken. How could I improve it ? I'd like to have a post grid: 

Post 1     Post 2      Post 3

Post 4     Post 5      Post 6

Post 7     Post 8      Post 9

Post 10    Post 11    Post 11

Thanks for your help and time

Upvotes: 0

Views: 65

Answers (1)

Sam Roberts
Sam Roberts

Reputation: 245

Why not just use a table? If you are using a CSS framework like bootstrap you can also apply the class "col-md-4".

Upvotes: 2

Related Questions