I know very little php and virtually no bootstrap but I’m trying to update a wordpress template to adjust where an image appears on a page. The website uses the Advanced Custom Fields plugin to be able to use the same framework throughout the website. The php is using those fields and adding loops and if statements to change the which side of the page the image is on. This is the webpage of the template I’m adjusting.
I’m trying to make it so the image in the blue "Services" section appears on the left instead of the right. This is the php for that portion:
<?php get_template_part('waves/blue', 'top-one'); ?>
<div id="about-wrapper" class="wrapper">
<div class="wrapper">
<div class="<?php echo esc_attr( $container ); ?> back-forth-text-image">
<?php $sections = get_field('lirtb_sections'); ?>
<?php $numOfRows = count($sections) - 1; ?>
<?php foreach($sections as $skey=>$section){ ?>
<div class="row <?php echo($skey < $numOfRows ? 'margin-bottom-double sm-margin-bottom-half' : '') ?>">
<div class="col-12 col-md-6 <?php echo ($skey % 2 != 0 ? 'pl-5' : '')?> bft-text padding-right-half">
<div class="bft-text-container">
<h6 class="sans-serif font-weight-bold emphasis no-margin"><?php echo $section['lirtb_title'] ?></h6>
<h3 class="h2"><?php echo $section['lirtb_header']?></h3>
<div class="first-p margin-bottom-half">
<?php echo $section['lirtb_text']?>
</div>
<?php if(
isset($section['lirtb_button_text']) &&
!empty($section['lirtb_button_text']) &&
isset($section['lirtb_link']) &&
!empty($section['lirtb_link'])){?>
<a href="<?php echo $section['lirtb_link'] ?>" type="button" class="btn transparent"><?php echo $section['lirtb_button_text'] ?></a>
<?php } ?>
</div>
</div>
<div class="col-12 col-md-6 bft-image sm-margin-bottom-quarter">
<div class="row">
<img src="<?php echo $section['lirtb_image']['url']?>" />
</div>
<div class="row">
<img src="<?php echo $section['lirtb2_image']['url']?>" />
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<?php get_template_part('waves/blue', 'bottom-one'); ?>
I dont’ need the loop since it’s only one section in the with the blue background so I tried to take the loop out and things just went side ways from there…. Thanks in advance!
2
Answers
It’s better to use CSS to do this sort of change, but simply by changing the place of div that hold images, you can show them at first, like the code below. Also, don’t remove "foreach", it’s handle data from database.
Just by adding
.order-firstclass to the second column div that contains your image, will display column first in the parent row.Not sure if you can implement this safely via your ACF builder.
See working example below…