Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am creating a website for an architect with large images being a main feature of the site. Given the potential size of the images I wanted to have a way to create responsive image sizing (and of course I thought of css and background images. I thought I could use CSS to build the small image as the default and as screen width increases use media queries to add larger background images).

My thought was to use a separate dynamic stylesheet (sliders.php) and write a script that looped through the images to create a slide show.

A few notes: I'm using flexslider as an image slider and Advanced Custom Fields and Custom Post Types to create "architectural projects" with featured images to create the slideshow and using my functions.php file to auto create multiple sizes for the background images.

My wordpress image slider on the front end is created with the following loop:

 <section class="slider slider-major" id="slider-major">

    <?php   
       $the_query = new WP_Query(array(
        'post_type' => 'projects'
       ));
    ?>

    <div class="RMA-slider slider-main slider-<?php echo the_ID(); ?>">

        <ul class="slides">

            <?php
                $slideNumber = 0;     // Set Slide numbering to 0

                while (has_sub_field('project_slider_images')) :

                $slideNumber++;
            ?>

            <li>
                <div class="slider-image slide-<?php echo $slideNumber ?>">
                </div>
            </li>

            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </ul>
    </div>
</section>

Having run some tests, I'm fairly certain the problem is in the sliders.php file which is only used to set-up the sliders. I have two stylesheets:

  1. screen.css (my non-dynamic stylesheet)
  2. style.php - A dynamic stylesheet that pulls images from the wordpress database and puts them into the dynamic stylesheet as background images.

The problem is that the loop doesn't run for every project and I can't figure out why?

I've enqueued the stylesheets with the dynamic stylesheet getting precedent, but no change. The entire dynamic stylesheet is below. I have 3 different sliders running and therefore there are 3 slider loops created:

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$offset = 100;
$ExpStr = "Expires" . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

$parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
$url = $parse_uri[0];

require_once($url . 'wp-load.php' );
require_once($url . 'wp-includes/post.php');
require_once($url . 'wp-content/plugins/advanced-custom-fields/acf.php');
require_once($url . 'wp-content/plugins/custom-post-type-ui/custom-post-type-ui.php');

?>


/* ___________MAIN SLIDER IMAGE SET-UP______________________________________________ */

//THIS WORKS AS IT SHOULD

<?php

  $the_query = new WP_Query(array(
    'post_type' => 'slides',
    'posts_per_page' => -1
    ));

   $sliderTitle = get_the_title();

  $slideNumber = 0;

  while ($the_query->have_posts()) :
    $the_query->the_post();

  $slideNumber++;

  $attachment_id = get_field('slider_image');
  $sizeSm = "slider-image-sm";
  $sizeMd = "slider-image-md";
  $sizeLg = "slider-image-Lg";
  $image_attributes_sm = wp_get_attachment_image_src( $attachment_id, $sizeSm );
  $image_attributes_md = wp_get_attachment_image_src( $attachment_id, $sizeMd );
  $image_attributes_lg = wp_get_attachment_image_src( $attachment_id, $sizeLg );

?>

// Set-up Responsive Image loading and allow for full-page background image slider

.slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?> {
  background-image: url("<?php echo $image_attributes_sm[0]; ?>");
}

@media only screen and (min-height: 45em) {
  .slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?>{
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

@media only screen and (min-width: 45em) {
  .slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

 @media only screen and (min-width: 100em) {
  .slider-major .slider-main.slider-homepage .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_lg[0]; ?>");
  }
}

<?php wp_reset_postdata(); ?>
<?php endwhile; ?>






/* ___________PROJECT SLIDER IMAGE SET-UP________________________________________ */

 //THIS IS THE PROBLEM. ONLY LOOPS THROUGH A FEW PROJECTS. THERE WILL BE UPWARDS OF 15 PROJECTS ON THE SITE AND ONLY 4-5 OF THEM WORK TO SHOW IMAGES

<?php

  $the_query = new WP_Query(array(
    'post_type' => 'projects'
  ));


  while ( $the_query->have_posts() ) :
    $the_query->the_post();


  $slideNumber = 0;

  while (has_sub_field('project_slider_images')) :

  $slideNumber++;

  $attachment_id = get_sub_field('project_slider_image');
  $sizeSm = "slider-image-sm";
  $sizeMd = "slider-image-md";
  $sizeLg = "slider-image-Lg";
  $image_attributes_sm = wp_get_attachment_image_src( $attachment_id, $sizeSm );
  $image_attributes_md = wp_get_attachment_image_src( $attachment_id, $sizeMd );
  $image_attributes_lg = wp_get_attachment_image_src( $attachment_id, $sizeLg );

?>

// Set-up Responsive Image loading and allow for full-page background image slider

.slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?> {
  background-image: url("<?php echo $image_attributes_sm[0]; ?>");
}

@media only screen and (min-height: 45em) {
  .slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?>{
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

@media only screen and (min-width: 45em) {
  .slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

 @media only screen and (min-width: 100em) {
  .slider-major .slider-main.slider-<?php echo the_ID(); ?> .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_lg[0]; ?>");
  }
}

<?php wp_reset_postdata(); ?>
<?php endwhile; ?>
<?php endwhile; ?>





/* ___________PRACTICE SLIDER IMAGE SET-UP____________________________________ */




 //THIS WORKS AS IT SHOULD

<?php

  $the_query = new WP_Query(array(
    'post_type' => 'practice_slides',
    'posts_per_page' => -1
    ));

   $sliderTitle = get_the_title();

  $slideNumber = 0;

  while ($the_query->have_posts()) :
    $the_query->the_post();

  $slideNumber++;

  $attachment_id = get_field('practice_slider_image');
  $sizeSm = "slider-image-sm";
  $sizeMd = "slider-image-md";
  $sizeLg = "slider-image-Lg";
  $image_attributes_sm = wp_get_attachment_image_src( $attachment_id, $sizeSm );
  $image_attributes_md = wp_get_attachment_image_src( $attachment_id, $sizeMd );
  $image_attributes_lg = wp_get_attachment_image_src( $attachment_id, $sizeLg );

?>

// Set-up Responsive Image loading and allow for full-page background image slider

.slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?> {
  background-image: url("<?php echo $image_attributes_sm[0]; ?>");
}
@media only screen and (min-height: 45em) {
  .slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?>{
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

@media only screen and (min-width: 45em) {
  .slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_md[0]; ?>");
  }
}

 @media only screen and (min-width: 100em) {
  .slider-major .slider-main.slider-practice .slide-<?php echo $slideNumber; ?> {
    background-image: url("<?php echo $image_attributes_lg[0]; ?>");
  }
}
<?php wp_reset_postdata(); ?>
<?php endwhile; ?>
share|improve this question
    
Which while Loop hangs? –  s_ha_dum Feb 21 at 23:41

1 Answer 1

up vote 1 down vote accepted

It was just a missed line of code since it's a new WP_Query:

Needed to add 'posts_per_page' => -1 to

$the_query = new WP_Query(array(
    'post_type' => 'projects'
  ));
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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