I'm using this nice effect to replace a slider that was part of a custom theme I made. I need a way to implement a custom css class to each div
that will be inside the wordpress loop, I want to use a custom post type I already have registered to put the images dynamically in the <img src="">
tags, in the old version of my code I was using alsto this plugin to add a secondary featured image for mobile only it use the get_posts()
instead of the standard loop, see the link for more info. How I can achieve this?
This is the code I'm using without the loop for now:
<div class="jumbotron jumbotron-fluid bg-scroll">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 img-top"> <!-- custom class -->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 img-text">
<h1 class="">Hello</h1>
<p class="lead">World.</p>
</div>
</div>
<img class="img-fluid bg-img" src="image link here">
</div>
<div class="col-sm-12 col-md-12 col-lg-12 img-middle"> <!-- custom class -->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 img-text">
<h1 class="">Lorem ipsum</h1>
<p class="lead">docet.</p>
</div>
</div>
<img class="img-fluid bg-img" src="image link here...">
</div>
</div>
</div>
</div>
As you can see to achieve the effect I need to assign to the bootstrap columns a different class in my case img-top
and img-middle
. Using the loop will make this not possible and I want to avoid that the images are hardcoded inside the php file.