Archived topic
Create a layout to show different items of an ACF Relation Field
3 replies · Started by Xavier on July 22, 2021
Hi, I amb creating an element template to show the content of the posts of a CPT.
It is easy when the custom field has just a unique vaule, but I amb struggle when a unique field can return multiple vaules.
I manage to achieve moreless what I want using a table, but I would like the code to generate a grid structure (or column) for each field.
I attach you the code used to make it throug a table:
<?php $investigadores_conferenciantes = get_field( 'investigadores_conferenciantes' ); ?>
<?php if ( $investigadores_conferenciantes ) : ?>
</br></br></br><h2> Investigadores Ponentes </h2>
<table>
<?php foreach ( $investigadores_conferenciantes as $post_ids ) : ?>
<tr>
<?php $featured_img_url = get_the_post_thumbnail_url($post_ids,'medium_large'); ;?></td></tr><tr>
<td class="centrado"><img src="<?php echo $featured_img_url; ?> " alt="<?php echo get_the_title( $post_ids ); ?>" width="180px"></td>
<td><a href="<?php echo get_permalink( $post_ids ); ?>"><h3 class="nomargen"><?php echo get_the_title( $post_ids ); ?></h3></a></br><?php echo get_the_excerpt($post_ids) ; ?>
</td>
</tr>
<?php endforeach; ?>
</table></br></br></br>
<?php endif; ?>I would like to change the table display for a system of grid, rows and columns.
Many thanks.
Hi there,
we can help with changing the HTML and provide some CSS to make it into a grid. But is it possible to see what you have so far ?
Of course, by now I have this:
The image in the left ant the title and excerpt in the right. For each investigador we have a new row.
I would like to achieve moreless this calling a grid structure throug the php code:
In the next image I show you what we want to achieve (we made just composing in Gutenberg).
The idea is to generate a grid of two columns (20%-80% width) with the image in the first column and the text in the second. And have a background color for the second column.
For each element the should generate a new grid.
Many thanks.
I would do something like this:
<?php $investigadores_conferenciantes = get_field( 'investigadores_conferenciantes' ); ?>
<?php if ( $investigadores_conferenciantes ) : ?>
<div class="investi-container">
<h2 class="investi-title"> Investigadores Ponentes </h2>
<?php foreach ( $investigadores_conferenciantes as $post_ids ) : ?>
<div "investi-item">
<div class="investi-item-image"><img src="<?php echo $featured_img_url; ?> " alt="<?php echo get_the_title( $post_ids ); ?>" width="180px"></div>
<div class="investi-item-content">
<a href="<?php echo get_permalink( $post_ids ); ?>"><h3 class="nomargen"><?php echo get_the_title( $post_ids ); ?></h3></a>
<div class="investi-item-summary"><?php echo get_the_excerpt($post_ids) ; ?></div>
</div>
</div>
</div>Then you can use this CSS for the layout:
/* Parent container for items */
.investi-container {
padding: 40px;
}
/* Title Styles */
h2.investi-title {
/* styles for H2 heading if reqquired */
}
/* Create grid wrapper for each item */
.investi-item {
display: flex;
margin-bottom: 2em;
}
/* Set image item width */
.investi-item-image {
flex: 0 0 180px;
}
/* Set content to fill remaining space and add styles */
.investi-item-content {
flex: 1 0;
padding: 5px;
margin-left: 10px;
background-color: #ccc;
}It may take some tweaking.
