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:
- screen.css (my non-dynamic stylesheet)
- 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; ?>
It was just a missed line of code since it’s a new WP_Query:
Needed to add
'posts_per_page' => -1to