[Resolved] Archive Posts in a table

Home Forums Support [Resolved] Archive Posts in a table

Home Forums Support Archive Posts in a table

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1584747
    Jonathan

    Hello,

    I want to put the posts that are generated on the archives pages into a table? Looking at the code each one is generated as an article and div’s inside it. My information is scientific based and is four columns of antibodies with name, properties, code and description (all as acf fields). Is it possible to add each post as a row in a table with markup like this:

    <table> (Outer surrounding table)
    <tr> <– First post contained in here
    <td>My post name </td>
    <td>Acf field</td>
    <td>Acf field</td>
    <td>Acf field</td>
    </tr> <– End of post

    ……..

    </table> (Close of surrounding table)

    Thanks.

    Jon

    #1585813
    David
    Staff
    Customer Support

    Hi there,

    Tom explains here how you can do that using the generate_do_template hooks in GP 3.0:

    https://generatepress.com/forums/topic/question-about-gp-3-0-and-generate_do_template_part/#post-1429909

    #1586335
    Jonathan

    Thanks for the reply. I stumbled across the generate_do_template_part which i used in my archive file to point to a content-antibody.php file.

    It looks like i can add acf fields in the content-antibody.php and wrap it in html but only using

    ‘s .

    Markup is as follows:

    if ( generate_show_excerpt() ) : ?>
    <?php echo '<div class="antibody_cat__inner">'; ?>
    <?php echo '<div class="product_id">'; ?><?php echo the_field('name');?><?php echo '</div>'; ?>
    <?php echo '<div class="antibody_cat-title">'; ?><?php the_title();?><?php echo '</div>'; ?>
    <?php echo '<div class="antibody_cat-desc">'; ?><?php the_excerpt();?><?php echo '</div>'; ?>
    <?php echo '<div class="antibody_cat-application" style="padding:0;">'; ?><?php echo the_field('application');?><?php echo '</div>'; ?>

    This gives me the structure of:

    
    <li class="inside-article">
    <div class="antibody_cat__inner">
    <div class="product_id">Content</div>
    <div class="antibody_cat-title">More Content</div> 
    <div class="antibody_cat-desc"><p>More Content</p></div>
    <div class="antibody_cat-application">More Content</div>           
    </div>
    </li>

    Each post is looped with the above structure, so ideally I’d like to drop the <li class=”inside-article”> for a <tr> and the other div’s with <td>’s. Ideally wrapping all the posts shown in a <table> tag. I tried to do this but the code was stripped out of the template.

    J

    #1586952
    David
    Staff
    Customer Support

    Does the Markup need to be a Table or is it just that you would like the layout to be in table form ? You have to consider what happens on a mobile device as by default tables are not responsive.

    We can style the existing layout to make them look more like a table if you want ?

    #1587161
    Jonathan

    Interested to see your version on a css table. How will the table headlines be made responsively?
    i.e<thead>
    <th>Name</th>
    <th>ID</th>
    <th>Description</th>
    </thead>
    <!– Start of posts loop //–>

    #1587170
    David
    Staff
    Customer Support

    Is there anywhere i can see what is being output currently ?

    #1587415
    Jonathan

    Sent you a link.

    #1587925
    David
    Staff
    Customer Support

    This is a CSS method making a table layout:

    /* Remove List style */
    .archive .site-main ul {
        margin-left: 0;
    }
    li.inside-article {
        list-style-type: none;
        border: 1px solid;
    }
    /* Alternate background color */
    li.inside-article:nth-child(odd) {
        background: #f1f1f1;
    }
    /* Define Desktop Grid */
    .antibody_cat__inner {
        display: grid;
        /* define grid columns */
        grid-template-columns: 120px 120px 1fr 220px;
    }
    .antibody_cat__inner > * {
        display: block;
        padding: 10px !important;
        border: 1px solid #ccc;
    }
    
    /* Tablet / Mobile Layout */
    @media(max-width: 1024px) {
        /* last element on new row */
        .antibody_cat__inner {
            grid-template-columns: 120px 120px 1fr;
        }
        .antibody_cat-application {
            grid-column: 1 / -1;
        }
    }

    For the Table Head we would need to inject that before the first article in your custom loop.

    Its whether or not the you require the Table HTML semantics for the layout.

    #1616711
    Jonathan

    Thanks that worked out nicely.

    Jon

    #1616746
    David
    Staff
    Customer Support

    Thats great – happy to hear that

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.