- This topic has 3 replies, 2 voices, and was last updated 4 years, 9 months ago by
.
-
Posts
-
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.
Customer Support
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.
- You must be logged in to reply to this topic.
