CSS Alignment issue
I am having a VERY tough time with this. This is a wordpress site. Its a CSS/PHP issue. Each entry from DB has a picture, name, title. I want to line them up left to right. 2 people per row.
Here is the code:
Each entry seems to be its own row, no matter how I configure this from a CSS perspective. Im out of ideas.
Here is the code:
<style>
.ev-speaker-img {
max-width: 250px;
}
.ev-list-row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.ev-list-column {
display: table-cell;
}
</style>
<?php if($rows): ?>
<?php foreach($rows as $row): ?>
<div class="ev-list-row">
<div class="ev-list-column">
<img class="ev-speaker-img" src="<?= $row['speaker_image']; ?>"/><br>
<?= $row['speaker_name']; ?><br>
<?= $row['speaker_title']; ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>Each entry seems to be its own row, no matter how I configure this from a CSS perspective. Im out of ideas.
ASKER
Im not sure I understand the shorthand for HTML. The "echo <<< HTML" part.
ASKER
okay, will give it a go. I do get the following syntax error though:
Parse error: syntax error, unexpected 'foreach' (T_FOREACH) in
Parse error: syntax error, unexpected 'foreach' (T_FOREACH) in
Correction
<?php
foreach($rows as $row) {
echo <<< HTML
<div class="col">
<img class="ev-speaker-img" src="{$row['speaker_image']}"/>
{$row['speaker_name']}<br>
{$row['speaker_title']}
</div>
HTML;
}
?>
</div>ASKER
Getting a new error:
"Parse error: syntax error, unexpected end of file in"
See here: http://urlgone.com/cef3ab/
"Parse error: syntax error, unexpected end of file in"
See here: http://urlgone.com/cef3ab/
Can you post your full code listing - the error on its own does not help and the link does not seem to go anywhere.
ASKER
The link expired, but yes, I can add the code. WIll add new URL too.
Link: http://urlgone.com/c3a67e/
<?php
/**
* Template part for displaying posts.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package OnePress
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( array( 'list-article', 'clearfix') ); ?>>
<div class="list-article-content">
<div class="list-article-meta">
<?php the_category(' / '); ?>
</div>
<header class="entry-header">
<style>
.events {
padding: 0 0 75px 0;
}
.ev-speaker-img {
max-width: 250px;
}
.ev-list-row {
display: table;
width: 100%;
/*Optional*/
table-layout: fixed;
/*Optional*/
border-spacing: 10px;
/*Optional*/
}
.ev-list-column {
display: table-cell;
}
.ev-01,
.ev-05,
.ev-06,
.ev-07 {
text-align: center;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.row:after {
content: " ";
display: table;
clear: both;
}
.col {
float: left;
padding-left: 15px;
padding-right: 15px;
width: 50%;
box-sizing: border-box;
}
img {
width: 100%;
display: block;
}
</style>
</header>
<!-- .entry-header -->
<div class="entry-excerpt">
<!---section 1-->
<div class="events ev-01">
<?php the_field('event_date'); ?>—
<?php the_field('event_location'); ?>
</div>
<!---section 2 -->
<div class="events ev-02">
<?php $rows = get_field('speaker'); ?>
<?php
foreach($rows as $row) {
echo <<< HTML
<div class="col">
<img class="ev-speaker-img" src="{$row['speaker_image']}"/>
{$row['speaker_name']}<br>
{$row['speaker_title']}
</div>
HTML;
}
?>
</div>
<!---section 3 -->
<div class="events ev-03">
<?php the_field('event_description'); ?>
</div>
<!---section 4 -->
<div class="events ev-04">
<?php the_field('event_agenda'); ?>
</div>
<!---section 5 -->
<div class="events ev-05">
coming soon...section 5
</div>
<!---section 6 -->
<div class="events ev-06">
<h2 align="center">
<?php the_field('section_6_title'); ?>
</h2>
coming soon...section 6
</div>
<!---section 7 -->
<div class="events ev-07">
<h2>
<?php the_field('section_7_title'); ?>
</h2>
<?php the_field('event_sponsors'); ?>
</div>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'onepress' ),
'after' => '</div>',
) );
?>
</div>
<!-- .entry-content -->
</div>
</article> <!-- #post-## -->Link: http://urlgone.com/c3a67e/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This was perfect. Thank you.
You are welcome
ASKER
Follow up. I didnt realize this might be an issue, but I am re-using this code in a different section. Its another section that would utilize the same code, but fields would be different. I tried re-using and get the following error:
"Warning: Invalid argument supplied for foreach() in "
Obviously it doesnt like me using that twice. What is the best work around? In fact, I will need to use a 3rd time as well.
Here is the code with the new field names.
"Warning: Invalid argument supplied for foreach() in "
Obviously it doesnt like me using that twice. What is the best work around? In fact, I will need to use a 3rd time as well.
Here is the code with the new field names.
<?php $rows = get_field('secondary_speaker'); ?>
<?php
foreach($rows as $row) {
echo <<< HTML
<div class="col">
<img class="ev-speaker-img" src="{$row['speaker_image2']}"/>
{$row['speaker_name2']}<br>
{$row['speaker_title2']}
</div>
HTML;
}
?>
Nothing wrong with reusing - the foreach resets the array on each use.
The problem is that line 1 is not returning an array. You can verify this by doing a
Hint: for better options and response times on your questions it is better to open another question than post to a closed thread.
The problem is that line 1 is not returning an array. You can verify this by doing a
echo "<pre>" . print_r($rows, true) . "</pre>";Hint: for better options and response times on your questions it is better to open another question than post to a closed thread.
Open in new window
HTML / PHPOpen in new window