0

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.

1

Here's one example how you could write the loop for your jumbotron,

// add helper functions to functions.php
function my_posts_query() {
  $args = array(); // add parameters as needed post_type, posts_per_page, etc.
  return new WP_Query($args);
}

function my_single_post_image( int $post_id ) {
  $url = get_the_post_thumbnail_url( $post_id, 'large' ); // update as needed
  if ( $url ) {
    printf(
      '<img class="img-fluid bg-img" src="%s">',
      esc_url( $post_id );
    );
  }
}

function my_single_post( WP_Post $post, string $extra_class ) {
  ?>
  <div class="col-sm-12 col-md-12 col-lg-12 <?php echo esc_attr( $extra_class ); ?>">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12 img-text">
        <h1 class=""><?php echo esc_html( $post->post_title ); ?></h1>
        <p class="lead"><?php echo esc_html( $post->post_excerpt ); ?></p>
      </div>
    </div>
    <?php my_single_post_image( $post->ID ); ?>
  </div>
  <?php
}

function position_class_name( int $total, int $count ) {
  if ( 0 === $count ) {
    return 'img-top';
  } else if ( $total === $count ) {
    return 'img-bottom';
  } else { // add more logic, if needed
    return 'img-middle';
  }
}

// in template file
$query = my_posts_query();
if ( $query->posts ) {
  ?>
  <div class="jumbotron jumbotron-fluid bg-scroll">
    <div class="container-fluid">
      <div class="row">
        <?php
          foreach ( $query->posts as $i => $my_post ) {
            my_single_post( $my_post, position_class_name( $query->found_posts, $i ) );
          }
        ?>
      </div>
    </div>
  </div>
  <?php
}

Another thing you could also consider is that instead of using some specific css classes, you could use more generic approach with :nth-child(n) selector both in css and jQuery. E.g.

// styles.css
.jumbotron .row > div {
  // css
}
.jumbotron .row > div:first-child {
  // css
}
.jumbotron .row > div:last-child {
  // css
}
.jumbotron .row > div:nth-child(n) {
  // css
}

// scripts.js
var myElement = $( ".jumbotron .row > div:nth-child(1)" );
  • I will try your code suggestion. I was thinking about using the get_post_meta() function to use the custom meta box that is already embedded in wordpress, can be this a good approach? Also for the css selectors, will it work as expected like the codepen example I've linked? – sialfa Nov 16 at 14:02
  • @sialfa I didn't look too thoroughly the secondary featured image plugin. But I would assume it saves the image id as post meta so in that case using get_post_meta() would be the right pick. Just update my_single_post_image() function to match your exact setup and needs. – Antti Koskinen Nov 16 at 18:06
  • @sialfa Yes, I believe using the nth-child selector should give you the same end result. I think you can edit the codepen example and play around with it, so just test and see how it goes. – Antti Koskinen Nov 16 at 18:10
  • ok, I will try on codepen with the suggested css improvements. Thank you for the help, I'll let you know – sialfa Nov 16 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.