Archived topic
Archive Posts in a table
9 replies · Started by Jonathan on December 17, 2020
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
Hi there,
Tom explains here how you can do that using the generate_do_template hooks in GP 3.0:
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
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
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 ?
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 //-->
Is there anywhere i can see what is being output currently ?
Sent you a link.
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.
Thanks that worked out nicely.
Jon
Thats great - happy to hear that
