[Support request] Create a layout to show different items of an ACF Relation Field

[Xavier]

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.

[David]

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 ?

[Xavier]

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.

[David]

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.

[Author]

Posts