I am trying to achieve result with below structure in foreach loop where after every two images it will repeat entire structure.
I have some basic knowledge for something I can use eg. counter++; and than %2 but don't know syntax and how to use it for my code.
<?php
function dt_attached($postid=0, $size='thumbnail', $attributes='', $linksize='full', $count=-1) {
if ($postid<1) $postid = get_the_ID();
if ($images = get_children(array(
'post_parent' => $postid,
'post_type' => 'attachment',
'numberposts' => $count,
'post_mime_type' => 'image',)))
foreach($images as $image) {
$attachment=wp_get_attachment_image_src($image->ID, 'thumbnail');
$small_image = wp_get_attachment_image_src($image->ID, 'midium');
$big_image = wp_get_attachment_image_src($image->ID, 'full');
?>
<div class="mainrow">
<div class="block">
<a href='<?php echo $big_image[0]; ?>' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '<?php echo $small_image[0]; ?>' ">
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
</a>
</div>
<!--[I want to get two images in mainrow]-->
<div class="block">
<a href='<?php echo $big_image[0]; ?>' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '<?php echo $small_image[0]; ?>' ">
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
</a>
</div>
</div>
<?php //the_attachment_link($image->ID, false, true, false); ?>
<?php }
}
?>
So what I want is if there is more than two images it will repeat entire html structure. Thanks a lot for your help
What I gathered from your comments is that you want to display two images per row, and if there's one extra image, to display a placeholder next to it in the final row.
All you need is a count of how many images there are, and whether it's an even or odd number. Then once you know you're at the last image (using an incrementing counter), you add the placeholder:
What your code doesn't do is place two images in one row. For that we need to take the modulo (%) of the counter as well.
<?php
$counter = 0;
$imgCount = count($images);
foreach ($images as $image) {
$attachment = wp_get_attachment_image_src($image->ID, 'thumbnail');
$small_image = wp_get_attachment_image_src($image->ID, 'midium');
$big_image = wp_get_attachment_image_src($image->ID, 'full');
if ($counter % 2 == 0): ?>
<div class="mainrow">
<?php endif; ?>
<div class="block">
<a href='<?php echo $big_image[0]; ?>' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '<?php echo $small_image[0]; ?>' ">
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
</a>
</div>
<?php if ($counter++ % 2 == 1): ?>
</div>
<?php endif; ?>
<?php //the_attachment_link($image->ID, false, true, false); ?>
<?php
}
// Since (if there are an odd number of images) the loop may not close the <div>,
// we have to make sure it does.
if ($counter % 2 == 0) {
?>
<!-- placeholder goes here -->
</div>
<?php
}
Related
My current code:
<?php if($_images){?>
<?php $i=0; foreach($_images as $_image){ $i++; ?>
<?php if($i > 2) { ?>
<div class = "largePic">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(600,900); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
</div>
<?php } else { ?>
<div class = "smallPic">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(450,675); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
</div>
<?php } ?>
<?php } ?>
<?php } ?>
So this is obviously wrong since every time an image is echo'ed it's assigned to a different div (same name but different). Is it possible to assign echoes to certain div depending on the count?
For example, first two images will be assigned to the smallPic div, then the rest will be in the largePic div.
Process the images first (storing the HTML for each image in either an array or string) and then create the div elements- see example below. This will reduce the number of opening/closing tags immensely.
Also note that if the keys of the array are numeric then the following syntax can be used instead of creating an extra variable (i.e. $i) just to track the index (so as to avoid extra bookkeeping like incrementing the variable - one of the major benefits of foreach compared to a for statement).
foreach (array_expression as $key => $value)
statement 1
<?php
$largePic = '';
$smallPic = '';
if($_images){
foreach($_images as $i => $_image){
if($i > 2) {
$largePic .= '<img src="'.$this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(600,900).'" alt="'. $this->htmlEscape($_image->getLabel()). '" title="'. $this->htmlEscape($_image->getLabel()).'" />';
} else {
$smallPic .= '<img src="'. $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(450,675). '" alt="'. $this->htmlEscape($_image->getLabel()). '" title="'. $this->htmlEscape($_image->getLabel()). '" />';
}
}
} ?>
<div class = "largePic"><?php echo $largePic; ?></div>
<div class = "smallPic"><?php echo $smallPic; ?></div>
What you want is to first devide your array into two arrays and then foreach through both of them.
<?php
$largeImages = array();
$smallImages = array();
foreach ($_images as $k => $v) {
if ($k > 2) {
$largeImages[] = $v;
} else {
$smallImages[] = $v
}
}
?>
<div class = "largePic">
<?php foreach ($largeImages as $_image) { ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(600,900); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
<?php } ?>
</div>
<div class = "smallPic">
<?php foreach ($smallImages as $_image) { ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(450,675); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
<?php } ?>
</div>
I'm not in PHP but I'm quite sure for start you can loose those extensive open/close tags (<?php ?>) and replace it with only one at the start and the end. This is hardly readable.
Then, like in many server side scripts, what you need is some kind of buffer containing HTML which you will output at the end of loop. Because what you're doing now is outputting from inside the loop, this sending multiple DIVs to client.
Create largePic nad smallPic variables contianing DIVs HTML, and append HTML to it inside loop (instead outputing it to client like you do now). Then, after loop is finished, output those two variables to client.
I currently have a carousel on my page inside a Wordpress loop. So as it loops through it changes the background image according to which post I am currently on in the loop. However, I want to use media queries to load smaller images if for instance I the screen size is smaller.
This is what I currently have:
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<!-- Set the first background image using inline CSS below. -->
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-image:url(<?php echo $carousel_image_1['url']; ?>); background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
You can't use media queries inline, and you won't be able to have the dynamic flexibility of your variables in CSS, because PHP is server-side.
But, you could do this with JavaScript as long as the JS is able to get the PHP variables (my example uses jQuery):
<?php
while( $loop->have_posts() ) : $loop->the_post();
$class = '';
// Custom Posts
$carousel_image_1 = get_field('carousel_image_1');
$carousel_image_2 = get_field('carousel_image_2'); // added this, for different size image
$image_1_title = get_field('image_1_title');
if( $slide_counter == 0 ) { $class .= ' active'; }
?>
<div class="item <?php echo $class ?> <?php echo "slide_" . $slide_counter ?>">
<a href="<?php echo get_post_permalink(); ?>" target="_blank">
<div class="fill" style="background-size:cover;" alt="<?php echo $carousel_image_1['alt']; ?>"> </div>
<div class="carousel-caption">
<h2><?php echo $image_1_title; ?></h2>
<img width="80" class="book" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/book.png" alt="">
</div>
</a>
</div>
<script>
var resizeTimer;
function resizer() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var windowWidth = $(window).width();
if (windowWidth >= 992) { // for width 992 pixels and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
}, 200);
}
resizer();
$(window).on('resize', resizer);
</script>
<?php $slide_counter++; ?>
<?php endwhile; wp_reset_query(); ?>
I haven't tested it but I think it should work. You can also adjust the timeout to your preference (right now it's 200ms).
Or if you wanted to not make it truly responsive, and just set the background on page load, you could just write:
<script>
if (windowWidth >= 992) { // for medium size width and up
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_1["url"]; ?>)';
});
} else { // smaller sizes
$('.fill').css({
'background-image': 'url(<?php echo $carousel_image_2["url"]; ?>)';
});
}
</script>
The following Html CSS will show image in mobile view only
Html:
foreach($data as $item):
echo "
<div class='col-lg-4'>
<div class='panel panel-primary backImg' style='background-image:url({$item['imageLink']}); background-size:100% 100%;'>
Some Text
</div>
</div>";
endforeach;
Css:
#media(min-width: 480px){
.backImg{
background-image:none !important;
}
}
I am trying to create an image carousel, but that requires 2 seperate divs for the scroller, one active one, and then another which is not active but can be scrolled to...
This is what I'm trying to acomplish:
//the first 4 of a foreach
<div class="item active">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
</div>
//the next 4 of a foreach
<div class="item">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
<img src="<?php $images[$i]; ?>">
</div><!-- /item -->
//now after every 4 repeat the <div class="item"> with the images inside, </div>
This is my foreach
<?php $i = 1; foreach(explode(",",$this->product->images) as $images): ?>
On each 4 I don't want the 4 divs to be repeated on the img inside the div.
I'm not sure how I will accomplish this?
Thanks to the posters. but now it's showing 5 instead of 4?
<div class="item active">
<?php $i=1 ; foreach(explode( ",",$this->product->images) as $images): ?>
<div data-target="#carousel" data-slide-to="<?php echo $i; ?>" class="thumb">
<img src="<?php echo Config::get('URL') .'images/products/'.System::escape($this->product->username). '/item' .System::escape($this->product->id) .'/'. System::escape($images); ?>"></div>
<?php if ($i % 4==0 ) {
echo '</div><div class="item">';
echo '<div data-target="#carousel" data-slide-to="'.$i. '" class="thumb"><img src="'.Config::get( 'URL') . 'images/products/'.System::escape($this->product->username). '/item' .System::escape($this->product->id) .'/'. System::escape($images).'"></div>';
} $i+=1; endforeach; ?>
</div>
<!-- /item -->
You can use the modulo operation to check, if your counter variable is the multiple of 4:
if ($i % 4 == 0) {
echo '</div><div>';
}
You just need to make sure that your foreach actually increases the value of $i on every iteration.
Alternatively you could reset $i back to 0 inside of the if body, so it always counts only to 4 and never higher. But I prefer the modulo solution, because that way you have an actual counter variable, not a fake one. :)
You can use Simple approach , add at start and also closing at the end like
<?php
$i=1;
foreach($arrayItems as $single){
if($i%4 == 0){
?>
<div class="Special">
<?php
}
?>
<div class="regular">Regular content</div>
<?php
if($i%4 == 0){
?>
</div>
<?php
}
$i+=1;
}
?>
In Wordpress, I am creating a slider to slide through some content that the user specify. I am using ACF (advanced custom fields) if anyone is familiar with that, however what I am trying to accomplish is to show two content items at a time, while sliding through the jQuery slider.
Here is my loop:
<?php while(has_sub_field('popular_topic')): ?>
<li>
<div class="slide">
<img src="<?php the_sub_field('popular_topic_image'); ?>" alt="" />
<div class="img-wrapper"></div>
<div class="slider-content">
<?php
$len = 60;
$popularTopicTitle = get_sub_field('popular_topic_title');
$newContent = substr($popularTopicTitle, 0, $len);
if(strlen($newContent) < strlen($popularTopicTitle)) {
$newContent = $newContent.'...';
}
echo '<p>'.$newContent.'</p>';
?>
<a class="more-arrow" href="<?php the_sub_field('popular_topic_link'); ?>">Read More</a>
</div>
</div>
</li>
<?php endwhile; ?>
This is currently working, however it only shows one slide. I want it to show two slides and a time. Is there something I can do with a counter? Does this make sense?
my syntax might be a little off but maybe give this a shot?
<?php $i = 0; ?>
<?php while(has_sub_field('popular_topic')): ?>
<?php
$len = 60;
$popularTopicTitle = get_sub_field('popular_topic_title');
$newContent = substr($popularTopicTitle, 0, $len);
if(strlen($newContent) < strlen($popularTopicTitle)) {
$newContent = $newContent.'...';
}
$contentVar[$i] = array (
'img' => the_sub_field('popular_topic_image'),
'title' => $newContent,
'link' => the_sub_field('popular_topic_link')
);
$i++;
?>
<?php endwhile; ?>
<?php $j = 0; ?>
<?php while ($j < $i) : ?>
<li>
<div class="slide">
<img src="<?php echo $contentVar[$j]['img']; ?>" alt="" />
<div class="img-wrapper"></div>
<div class="slider-content">
<p><?php echo $contentVar[$j]['title']; ?></p>
<a class="more-arrow" href="<?php echo $contentVar[$j]['link']; ?>">Read More</a>
</div>
<?php $j++; ?>
<?php if ($j <= $i) : ?>
<img src="<?php echo $contentVar[$j]['img']; ?>" alt="" />
<div class="img-wrapper"></div>
<div class="slider-content">
<p><?php echo $contentVar[$j]['title']; ?></p>
<a class="more-arrow" href="<?php echo $contentVar[$j]['link']; ?>">Read More</a>
</div>
<?php endif; ?>
</div>
</li>
<?php $j++; ?>
<?php endwhile; ?>
This is my first post, so I will be trying to be as thorough as possible. I am also very new to PHP.
This is a wordpress site using PODS CMS plugin so keep in mind the wordpress image uploader allows access to multiple sizes of one singular image upload. The concept is that I have a group of data called "team" and this group has three fields - images, title, bio. I will be generating a list of thumbnails for each team member in one containing unordered list and then in another containing div I will have a larger version of he image, the title, and the bio. I am basically making a tabbed content area where the thumbnails are the tabs
The ultimate HTML output would be:
<ul>
<li> <img src="thumbnailurl.jpg"/></li>
<li> <img src="thumbnailurl2.jpg"/></li>
<li> <img src="thumbnailurl3.jpg"/></li>
</ul>
<div class="panes">
<div><h2>Title 1</h2> <p> BIO CONTENT </p></div>
<div><h2>Title 1</h2> <p> BIO CONTENT </p></div>
<div><h2>Title 1</h2> <p> BIO CONTENT </p></div>
</div>
The current issue I am having is that I can get all of the image urls for the first record, but when it comes to the second record in the second foreach i need to re-run the array for the new record but I can not figure out how.
<?php
$Record = new Pod('the_team');
$Record->findRecords($orderby = 't.id DESC');
$mylist=array();
while ($Record->fetchRecord())
{
$image_array = $Record->get_field('photo');
$title = $Record->get_field('name');
$desc = $Record->get_field('bio');
$id = $Record->get_field('id');
$mylist[] = array('name' => $title, 'desc' => $desc, 'id'=> $id );
?>
<ul>
<?php
foreach($image_array as $i => $image)
{
$image_thumb_url = wp_get_attachment_image_src( $image['ID'], 'thumbnail', false );
$image_thumb_url = $image_thumb_url[0];
$image_med_url = wp_get_attachment_image_src( $image['ID'], 'medium', false );
$image_med_url = $image_med_url[0];
$image_large_url = wp_get_attachment_image_src( $image['ID'], 'large', false );
$image_large_url = $image_large_url[0];
$image_full_url = wp_get_attachment_image_src( $image['ID'], 'full', false );
$image_full_url = $image_full_url[0];
?>
<li>
<a href="<?php echo $image_large_url; ?>">
<img src="<?php echo $image_thumb_url; ?>" />
</a>
</li>
<?php } ?>
<?php } ?>
</ul>
<div class="panes">
<?php
foreach ($mylist as $person)
{ ?>
<div class="team-member" id="member<?php echo $person['id']; ?>">
<h2><?php echo $person['name']; ?></h2>
<?php echo $person['desc']; ?>
<a href="<?php echo $person['photo']; ?>">
<img src="<?php echo $person['photo']; ?>" />
</a>
<?php } ?>
</div>
</div>
Okkkay.. So i have the first problem solved!!! But it brings up a second one. I am thinking I will either need a second image field OR call just the first image in the array in the <li> and just the second image in the array for the <div>:
<?php
$Record = new Pod('the_team');
$Record->findRecords($orderby = 't.id DESC');
$mylist=array();
$cnt = 0;
?>
<ul class="tabs">
<?php
while ($Record->fetchRecord()) :
$mylist[$cnt] = array(
'name' => $Record->get_field('name'),
'desc' => $Record->get_field('bio'),
'id'=> $Record->get_field('id')
);
?>
<?php
$image_array = $Record->get_field('photo');
foreach($image_array as $i => $image) :
$image_thumb_url = wp_get_attachment_image_src( $image['ID'], 'thumbnail', false );
$mylist[$cnt]['img_thumb'] = $image_thumb_url[0];
$image_med_url = wp_get_attachment_image_src( $image['ID'], 'medium', false );
$mylist[$cnt]['img_med'] = $image_med_url[0];
$image_large_url = wp_get_attachment_image_src( $image['ID'], 'large', false );
$mylist[$cnt]['img_large'] = $image_large_url[0];
$image_full_url = wp_get_attachment_image_src( $image['ID'], 'full', false );
$mylist[$cnt]['img_full'] = $image_full_url[0];
?>
<li>
<a href="#">
<img src="<?php echo $image_thumb_url[0]; ?>" />
</a>
</li>
<?php endforeach; ?>
<?php
$cnt++;
endwhile;
?> </ul>
<div class="panes">
<?php foreach ($mylist as $person) : ?>
<div class="team-member" id="member<?php echo $person['id']; ?>"><div id="member-info"><h2>Meet <?php echo $person['name']; ?></h2>
<?php echo $person['desc']; ?></div>
<a href="<?php echo $person['img_large']; ?>" rel="prettyPhoto">
<img src="<?php echo $person['img_med']; ?>" style="float:left" />
</a>
</div>
<?php endforeach; ?>
</div>
I think I can see what your problem is. Your second foreach loop doesn't benefit from the while loop, as such your only option if following this path would be to reloop through the fetched data. I wouldn't recommend doing this as there is nearly always a way you can write the code needed for the second loop into the original loop.
As an example of this I've re-written your code to incorporate the second foreach loop into the while loop (negating its need). This way, every record has a new entry into $html and $html2. Once it's looped through you have two variables that you can concat to produce the full html you are looking for.
<?php
$Record = new Pod('the_team');
$Record->findRecords($orderby = 't.id DESC');
// Custom variables
$html = "<ul>\n";
$html2 = "";
$image_type=array('thumbnail','medium','large','full');
while ($Record->fetchRecord()) {
$image_array = $Record->get_field('photo');
$title = $Record->get_field('name');
$desc = $Record->get_field('bio');
$id = $Record->get_field('id');
foreach($image_array as $i => $image) {
foreach ($image_type as $type) {
$image_temp = wp_get_attachment_image_src( $image['ID'], $type , false );
$image_url[$type] = $image_temp[0];
} # End of Foreach loop
// Create List HTML in primary output variable
$html .= "<li>\n".
"<a href=\"" . $image_url['large'] ."\">\n".
"<img src=\"" . $image_url['thumbnail'] ."\" />\n".
"</a>\n".
"</li>\n";
} #End of foreach loop
// Create User HTML in secondary output variable
$html2 .= "\t<div class=\"team-member\" id=\"member" . $id . ">\n".
"<h2>" . $title . "</h2>\n".
$desc . "\n".
"<a href=\"" . $photo . ">\n". # $photo is not declared in this code (will error)
"<img src=\"" . $photo . " />\n". # as above comment
"</a>\n";
"</div>\n";
} # End of while loop
// Wrap up the list elements, concat the secondary HTML.
$html .= "</ul>\n\n".
"<div class=\"panes\">\n".
$html2 . "\n".
"</div>\n";
echo $html;
?>