I'm displaying images on my site. The first 18 images should be written like this:
<img class="item lazy" data-src="<?php echo $path; ?>" src="<?php echo $path; ?>" />
And the rest of them (from the 19th) should be written like that:
<img class="item lazy" data-src="<?php echo $path; ?>" />
I used a while loop but it didn't work (it would show each item displayed within the loop 18 times):
while (...) { // while loop to display items from the database
$itemCount = 0;
while($itemCount <= 18) {
// show items ($itemId)
}
}
I can't think of anything... any suggestions?
<?php
$n=0;
$dir="C:/Chose a folder";
$url="http://....";
$files=scandir($dir);
foreach($files as $filenm) {
if( $n++<18 ) echo "<img class='item lazy' data-src='$url/$filenm' src='$url/$filenm' />";
else echo "<img class='item lazy' data-src='$url/$filenm/>";
}
?>
Note, the src should be the URL of the file, not the local filename
Related
I have a foreach loop giving out the results of a landscape gallery images.
Basically starting with
<?php foreach ( $images as $image ) : ?>
and then the regular div + anchor + image tags for the gallery images.
<?php if ( $image->description == "portrait" ) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box portrait" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a class="portrait-image" href="<?php echo $image->imageURL ?>" title=" " id="<?php echo $image->alttext ?>" rel="lightbox" <?php echo $image->thumbcode ?> >
<img title="<?php echo ' ' /* $image->alttext */ ?>" alt="<?php echo ' ' /* $image->alttext */ ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<?php else: ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box landscape" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a class="landscape-image" href="<?php echo $image->imageURL ?>" title=" " id="<?php echo $image->alttext ?>" rel="lightbox" <?php echo $image->thumbcode ?> >
<img title="<?php echo ' ' /* $image->alttext */ ?>" alt="<?php echo ' ' /* $image->alttext */ ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<?php endif; ?>
I want to have special case, where I have two portrait images side-by-side, filling the space of one landscape image.
What I was thinking about is to have a tag in the admin area which would trigger the break out of the foreach loop to have two images in one container div, and then it would continue the regular loop just with the container + image for the landscape images.
Is it possible in the case of foreach loop, to jump out of the loop, make a case with different settings, and then return to the regular looping method?
You can try something like this:
foreach($images as $key => $image) {
if($image has special tag) { // <--- PSEUDOCODE
echo "<div class='SPECIAL_CSS_CLASS'><img src='" . $img->path . "' /></div>";
}
}
Then in your CSS just do your Magic!
I would go ahead and do something like this:
//Function to get all the images based on a specific portrait_group
function getImagesPortraitGroup($group, $images) {
$result = array();
foreach ($images as $image) {
if (isset($image['portrait_group']) && $image['portrait_group'] == $group) {
$result[] = $image;
}
}
return $result;
}
//The images to show
$images = array(
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image1", "portrait_group" => 1],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image2", "portrait_group" => 1],
["url" => "http://lorempixel.com/800/200/", "caption" => "Lorem Image3"],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image4", "portrait_group" => 2],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image5", "portrait_group" => 2],
);
//Everytime we show a group, we track it by adding it to this array in order not to show it again
$addedGroups = array();
//Loop through all the images
for ($i = 0; $i < count($images); $i++) {
echo "<div>";
//If the image has a portrait_group that is not already shown, show it
if (isset($images[$i]['portrait_group']) && !in_array($images[$i]['portrait_group'], $addedGroups)) {
$groupImages = getImagesPortraitGroup($images[$i]['portrait_group'], $images);
foreach ($groupImages as $image) {
echo "<img src='{$image['url']}' title='{$image['caption']}' >";
}
//Save the group to the array in order not to show it again
$addedGroups[] = $images[$i]['portrait_group'];
} else {
echo "<img src='{$images[$i]['url']}' title='{$images[$i]['caption']}' >";
}
echo "</div>";
}
I managed to make the grouping by jQuery, this is the code
jQuery(".ngg-gallery-thumbnail-box.portrait").filter(":odd").each(function(){
$content = jQuery(this).find("a");
jQuery(this).prev().find(".ngg-gallery-thumbnail").append($content);
jQuery(this).remove();
});
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.
So, I have a problem in that I have 67 (and counting) images all named IMAGE01.jpg, IMAGE02.jpg all the way to IMAGE67.jpg.
In my HTML page, I have this code to display the image.
<article class="thumb">
<img src="images/thumbs/image01.jpg" alt="" />
</article>
So, I have this for 67 images. Is there a way of incrementing the image number using PHP? So I can just copy and paste that piece of code for the number of images I have?
That's the first part that would be GREAT to have a solution too. But, would there be a way to not have to repeat that code for every image? Would it be possible to use PHP to define the number of times I want this to be repeated?
So have the snippet of code once and have something to repeat it a defined number of times so as I add to the collection, all I have to do is change the repeat times?
Many thanks in advance for the help. Means allot.
<?php
for($i=1; $i<=67; $i++) {
?>
<article class="thumb">
<a href="images/fulls/image<?php
if($i<9)
echo "0".$i;
else
echo $i;
?>.jpg" class="image"><img src="images/thumbs/image<?php
if($i<9)
echo "0".$i;
else
echo $i;
?>.jpg" alt="" /></a>
</article>
<?php
}
?>
To make what you want you need to use a for loop from 1 to 67 (because your image name are from 1 to 67). And for each iteration you have to echo the html string.
Like this for example :
for($i = 1; $i<=67; $i++){
$name = $i<10?"0".$i:$i;
echo "<article class='thumb'>
<a href='images/fulls/image".$name.".jpg' class='image'>
<img src='images/thumbs/image".$name.".jpg' alt=''/>
</a>
</article>";
}
You need to construct the name if the name need to have 0 before (01, 02 ...). It's what I make here :$name = $i<10?"0".$i:$i;. It's mean that if $i < 10 then we add a "0" before else the name is $i.
You can also use a while loop :
$i = 1;
while($i<=67){
$name = $i<10?"0".$i:$i;
echo "<article class='thumb'>
<a href='images/fulls/image".$name.".jpg' class='image'>
<img src='images/thumbs/image".$name.".jpg' alt=''/>
</a>
</article>";
$i++;
}
It's the same idea.
Hope that helps you.
You can use a PHP variable and inject it into your HTML. The following code will count from 1 - 67.
<?php
$count = 1;
while($count <= 67){
?>
<p>Count: <?php echo $count; ?></p>
<?php
$count +=1;
}
?>
So you could use it as such:
<article class="thumb">
<?php
$count = 1;
while($count <= $numOfImages){
?>
<img src="images/thumbs/image<?php echo $count; ?>.jpg" alt="" />
<?php
$count +=1;
}
?>
</article>
Just set $numOfImages to however many images there are and it should work.
You can try this sample code below if images are one after the other. Using single for loop with printf inside echo...
<body>
<?php
for ($i = 0; $i < 67; $i++) {
?>
<article class="thumb">
<a href="images/full/image<?php printf("%02d\n", $i)?>.jpg" ><img src="images/thumb/image<?php printf("%02d\n", $i)?>.png" alt="" /></a>
</article>
<?php
}
?>
</body>
Here is the sample output I kept only one image for testing. http://i.stack.imgur.com/l1Lo5.png
I am new to Magento.
How can I getMediaGalleryImages within a sort order range in Magento? I am new to magento and would like to get all images for a product within a sort oorder range of say 10-20.
This is what I have so far:
<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())- >getMediaGalleryImages();?>();?><?php if($_images){?><?php $i=0; foreach($_images as $_image) if ($i++ < 8) { $i++;?>
Any help is welcome!
Thanks for the answers but, I'm not quite getting it I'm afraid, I want to display thumbs under my products on the product list page. I'm sure the code you have given is correct but I am not implementing it correctly. Here's the full code for that I have at the moment:
<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())- >getMediaGalleryImages();?>
<?php if($_images){?>
<?php $i=0; foreach($_images as $_image){ $i++; if($i>=10 && $i<=20);?>
<a href="#">
<img src="<?php echo $helpImg->getImg($_product, $bigImageWidth, $bigImageHeight, 'image', $_image->getFile()); ?>" class="cloud-zoom-gallery lightbox-group"
title="<?php echo $this->escapeHtml($_image->getLabel()); ?>" width="25" height="25" alt="<? =$this->htmlEscape($_image->getLabel());?>" title="<?=$this->htmlEscape($_image->getLabel());?>" />
you need to change code
$_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages();
$i=1;
foreach($_images as $_image){
if($i > 10 && $i < 20){
echo $_image['url'];
}
$i++;
}
You can do it by doing following code.
<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
<?php if($_images){?>
<?php $i=0; foreach($_images as $_image){ $i++; if($i>=10 && $i<=20): ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(108,90); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" /><?php endif; } ?>
<?php } ?>
Change the range whatever you want.
This is example for product gallery images order from 10 to 20.
quite new to PHP and I'm trying to get my page to show 3 blog entries, followed by 3 photos, followed by another 3 blog entries and so on and soforth.
I've been recommended using do while loops but having a hard time getting it working or even getting my head round it, have been more used to using foreach loops in the CMS.
This was my original code which would work but only if I explicitly added each loop by hand!
<?php // Show 3 blog entries
$entries = $page->children("sort=-sort, limit=3");
$count = 0;
foreach ($entries as $entry) {
$count++;
$class = "blog_box";
if ($entry == $entries->last()) {$class .= " blog_box_last"; }
if ($entry == $entries->first()) {$class .= " blog_box_first"; }
if (0 == $count % 2) { $class .= " blog_box_even"; }
?>
<div class="<?php echo $class; ?>">
<div class="blog_text">
<h3><?php echo $entry->title; ?></h3>
<h6><?php echo $entry->entry_date; ?></h6>
<p><?php echo $entry->body; ?></p>
</div><!-- /.blog_text -->
<?php if ($entry->image) {
$image = $entry->image->width(350);
?>
<img src="<?php echo $image->url; ?>" width="<?php echo $image->width; ?>" alt="<?php echo $entry->title; ?>" />
<?php } ?>
<div class="clear"></div><!-- /.clear -->
</div><!-- /.blog_box -->
<?php }
?>
// Show 3 blog images
<?php $blog_images = $page->get("image_uploads")->find("limit=3");
foreach ($blog_images as $img) {
$b_img = $img->size(200,140); ?>
<img src="<?php echo $b_img->url; ?>" width="<?php echo $b_img->width; ?>" height="<?php echo $b_img->height; ?>" alt="<?php echo $b_img->description; ?>" class="small_frame" />
<?php } ?>
The CMS developer kindly tried some code for me but I couldn't get it to work for me:
$entries = $page->children("sort=-sort");
$images = $page->get("/image_uploads/");
$cnt = 0;
do {
$cnt++;
$entry = $entries->shift();
if($entry) {
// output 1 entry
}
if($cnt == 3) {
while(++$cnt <= 6) {
$image = $images->shift();
if($image) {
// output 1 image
}
}
$cnt = 0;
}
} while(count($entries) && count($images));
I'm using ProcessWire.
Thanks in advance guys!