How do I horizontally align images in WordPress once turned into a PHP loop? - php

Question

I want to unpack the question so that it is clear and you will see the code below. I turned my HTML Bootstrap page into a WordPress dynamic site. The images are no longer under the img tag. So if you look below, I am not sure if I need to be tweaking the col-xl-2 class or creating a has_post_thumbnail selector in CSS. I need for my images to go from vertically aligned to horizontally aligned. If you look at the The col-centered keeps it centered, but I need it to be horizontally aligned. I have tried following the guidance in the WordPress Codex regarding styling the_post_thumbnail and it has not helped.
This is my index.php file:
<?php
// Advanced Custom Fields
// this is a bunch of variables with our fields to echo out in PHP
$images_feature_title = get_field('images_feature_title');
$images_feature_body = get_field('images_feature_body');
$indianapolis_feature_title = get_field('indianapolis_feature_title');
$indianapolis_feature_body = get_field('indianapolis_feature_body');
$social_media_image = get_field('social_media_image');
$social_media_title = get_field('social_media_title');
$social_media_feature_body = get_field('social_media_feature_body');
?>
<?php get_header(); ?>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$notun = new WP_Query(array(
'post_type' => 'bcarousel'
));
$indicator = -1;
while($notun->have_posts()) : $notun->the_post(); $indicator++ ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $indicator; ?>"<?php if($indicator == 0) : ?> class="active" <?php endif; ?>></li>
<?php endwhile; ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$carousel = new WP_Query(array(
'post_type' => 'bcarousel',
));
$korim = 0;
while($carousel ->have_posts()) : $carousel ->the_post(); $korim ++ ?>
<?php if($korim == 1) : ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>
<div class="carousel-image">
<?php the_post_thumbnail(); ?>
<div class="carousel-caption">
<h1><?php the_title(); ?></h1>
<h2><?php the_content(); ?></h2>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<!-- Left and right Carousel Arrows -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<!-- Images Feature Section
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<!-- <div class="container marketing"> -->
<!-- Three columns of text below the carousel -->
<section class="row content-region-1 pt40 pb40">
<div class="container">
<?php $loop = new WP_Query(array('post_type' => 'images_feature','orderby' => 'post_id', 'order' => 'ASC')); ?>
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<div class="col-xl-2 col-centered">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}
?>
<p><?php the_title(); ?> »</p>
<?php endwhile; ?>
</div><!-- /.col-lg-2 -->
</div>
</section><!-- /.row -->
<!-- Indianapolis Feature Section
================================================== -->
<section class="row" id="indy-glass">
<div class="container">
<div class="col-md-12">
<h2><?php echo $indianapolis_feature_title; ?></h2>
<hr />
<p class="lead"><?php echo $indianapolis_feature_body; ?></p>
</div>
<div class="col-md-12 text-center">
<p><a class="btn btn-danger" href="#" role="button">Learn More »</a></p>
</div>
</div>
</section>
<section class="row content-region-2 pt40 pb40" id="customer-testimonial">
<div class="container">
<div class="col-md-12">
<h1>What Our Customers Are Saying...</h1>
<p class="lead">We love Mirror Concepts! The team is professional and courteous and the new weightroom
mirrors look awesome!</p>
<cite>~ Jeff and Cindy Kivett</cite>
<p>Read More »</p>
</div>
</div>
</section>
<!-- Social Media Section
================================================== -->
<section class="row content-region-3 pt40 pb40" id="indy-glass">
<div class="container">
<div class="col-md-12 facebook-page">
<!-- If user uploaded an image -->
<?php if(!empty($social_media_image)) : ?>
<img src="<?php echo $social_media_image['url']; ?>" alt="<?php echo $social_media_image['alt']; ?>">
<?php endif; ?>
</div>
<h2><?php echo $social_media_title; ?></h2>
<hr />
<?php $loop = new WP_Query(array('post_type' => 'social_media_feature','orderby' => 'post_id', 'order' => 'ASC')); ?>
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<div class="col-lg-2 col-centered">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}
?>
<?php endwhile; ?>
</div><!-- /.col-lg-2 -->
<p>See more on Facebook »</p>
</div>
</section>
<?php get_footer(); ?>
In the style.css file you will see some selectors commented out because after turning this into WordPress dynamic they seem to be ineffectual.
Style.css file:
/*
Theme Name: Mirror and Glass Theme
Author: Daniel Cortes
Author URI: http://dancortes.com
Description: Theme developed for MediaFuel
Version: 1.0
*/
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
background: url('/wp-content/themes/mirror_glass/assets/img/tile.jpg') top left repeat;
}
h1,h2,h3,h4,h5,h6 {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-weight: bold;
font-family: "Comic Sans MS", cursive, sans-serif;
text-align: center;
}
a {
color: #000000;
}
a#gallery {
color: white;
font-size: 24px;
}
/*Non-Bootstrap CSS*/
.content-region-1, .content-region-2, .content-region-3 {
/*text-align: center;*/
/*float: right;*/
}
#customer-testimonial {
background: #3e4249;
color: white;
}
#showroom {
text-align: center;
}
.btn-danger {
padding: 10px 20px;
margin-bottom: 10px;
font-size: 20px;
border-radius: 10px;
}
.btn-default {
border: none;
background-color: transparent;
font-size: 24px;
}
/*.col-centered {
display: inline-block;
float: none;
}*/
.container {
max-width: 1020px;
}
.navbar-default {
background-color: white;
margin-bottom: 0;
}
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.header h3 {
margin-top: 40px;
margin-bottom: 10px;
line-height: 40px;
}
.carousel-image {
margin: 0 auto;
}
p {
margin-top: 4px;
}
a.link {
font-size: 20px;
}
a:hover {
text-decoration: none;
}
a.btn-default:hover {
text-decoration: none;
}
.fa {
font-size: 98px;
margin-top: 10px;
margin-bottom: -10px;
opacity: 0.1;
}
.facebook-page {
position: relative;
line-height: -0.8;
}
/*.col-xl-2 {
margin: auto;
text-align: center;
width: 100%;
display: block;
}*/
#indy-glass {
background: white;
}
.footer {
padding-top: 19px;
text-align: center;
color: #777;
border-top: 1px solid #e5e5e5;
}
.content-region-4 {
background: #000000;
color: #ffffff;
}
.side-widget {
margin-bottom: 40px;
}
.side-widget h3 {
border-left: 5px;
padding-left: 10px;
margin-bottom: 15px;
}
/*==== MEDIA QUERIES ====*/
#media screen and (max-width: 991px) {
.img-rounded {
margin: 12px;
}
}