- This topic has 9 replies, 2 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
December 17, 2020 at 10:10 am #1584747Jonathan
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
December 18, 2020 at 6:26 am #1585813DavidStaffCustomer SupportHi there,
Tom explains here how you can do that using the generate_do_template hooks in GP 3.0:
December 18, 2020 at 10:56 am #1586335JonathanThanks 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
December 19, 2020 at 6:02 am #1586952DavidStaffCustomer SupportDoes 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 ?
December 19, 2020 at 6:51 am #1587161JonathanInterested 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 //–>December 19, 2020 at 6:57 am #1587170DavidStaffCustomer SupportIs there anywhere i can see what is being output currently ?
December 19, 2020 at 12:10 pm #1587415JonathanSent you a link.
December 20, 2020 at 4:58 am #1587925DavidStaffCustomer SupportThis 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.
January 13, 2021 at 2:52 am #1616711JonathanThanks that worked out nicely.
Jon
January 13, 2021 at 3:24 am #1616746DavidStaffCustomer SupportThats great – happy to hear that
-
AuthorPosts
- You must be logged in to reply to this topic.