Wrapping Every Two Divs in Loop - php

My HTML Structure is as follows:
<div class="container">
<div class=row 1>
<img src="#" />
<img src="#" />
</div>
<div class=row 2>
<img src="#" />
<img src="#" />
</div>
<div class=row 3>
<img src="#" />
<img src="#" />
</div>
</div>
I will use for each loop. After each two iterations of for each loop, I want to start new container div and row 1, row 2 and row 3 divs. I mean main div should wrap 3 rows and each row div will wrap two images or div. I am using a single loop. How should I apply the for each loop counter for this?

Assuming you have an array of images or other content you want to put into those divs. This is the concept of what you have to do, then you can adapt it as you need or use your favorite coding styling:
<?php
$contents = array('img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg','img6.jpg');
echo '<div class="container">';
$rowCount = 0;
foreach ($contents as $key => $value) {
if ($key % 2 == 0) {
if ($key > 0) {
echo "</div><!--close .row-->";
}
$rowCount++;
echo '<div class="row row' . $rowCount . '"><!--opening .row-->';
}
echo '<img src="' . $value . '" alt="This is image: ' . $value . '">';
}
echo '</div><!--close .row-->';
echo '</div><!--close .container-->';
It will render:
<div class="container">
<div class="row row1"><!--opening .row-->
<img src="img1.jpg" alt="This is image: img1.jpg">
<img src="img2.jpg" alt="This is image: img2.jpg">
</div><!--close .row-->
<div class="row row2"><!--opening .row-->
<img src="img3.jpg" alt="This is image: img3.jpg">
<img src="img4.jpg" alt="This is image: img4.jpg">
</div><!--close .row-->
<div class="row row3"><!--opening .row-->
<img src="img5.jpg" alt="This is image: img5.jpg">
<img src="img6.jpg" alt="This is image: img6.jpg">
</div><!--close .row-->
</div><!--close .container-->
It will work with whatever amount of images you put in your array.

You can use array chunk to do that, see the following code :
foreach (array_chunk($yourArray, 2, true) as $results)
{
<div class="row">
foreach($results as $result)
{
//display it here
}
</div>
}

Related

Display a single image from folder using php

i am having a issue on my osclass theme. I want to display a particular image from my folder manually. The images are in the folder and i am using this function to display the image, could someone help.
if(!function_exists('aiclassy_draw_ad')) {
function aiclassy_draw_ad(){
echo '<div class="advertise_area">
I want my image to be called here
</div>';
echo ' <br /> <div class="advertise_area">
</div>';
echo ' <br /> <div class="advertise_area">
</div>';
echo ' <br /> <div class="advertise_area">
</div>';
}
}
Is it what you need?
echo '<div class="advertise_area">
<img src="http://morelook.com/content/uploads/2011/07/advertise_here_250x250.png" alt="" />
</div>';
EDIT
Based on OP comment: JSFIDDLE
Turn off your adblocker if you have.
You should place an image tag in your div tag, like this:
if(!function_exists('aiclassy_draw_ad')) {
function aiclassy_draw_ad(){
echo '<div class="advertise_area"><img src="image.jpg" alt="" /></div>';
echo ' <br /> <div class="advertise_area">
</div>';
echo ' <br /> <div class="advertise_area">
</div>';
echo ' <br /> <div class="advertise_area">
</div>';
}
}

Regarding PHP cut string pattern

Below is my string
</div>
<div class="centered">Thanks for visiting</div>
<div id="related-videos">
<div class="generic-video-item">
<div class="thumb"><img src="http://watsite.yt/thumbnail.php?id=648p14jpgkgj" alt="" class="bg-image" /><span class="border"></span><span class="now-playing"></span><span class="video-subbed">subbed</span> <img src="http://static.cdn.animeultima.tv/images/star-trusted.png" alt="Trusted uploader" title="Trusted uploader" class="trusted" /></div>
watsite video by Argro<br /><span class="time">1 hour ago</span>
</div>
<div class="generic-video-item">
<div class="thumb"><a rel="nofollow" href="/Seitokai-Yakuindomo-2-episode-7-english-subbed-video-mirror-725129-watsite/"><img src="http://watsite.yt/thumbnail.php?id=4055g2gpbt2i" alt="" class="bg-image" /><span class="border"></span><span class="play"></span><span class="video-subbed">subbed</span> <img src="http://static.cdn.animeultima.tv/images/star-trusted.png" alt="Trusted uploader" title="Trusted uploader" class="trusted" /></a></div>
watsite video by Argro<br /><span class="time">1 hour ago</span>
</div>
<div class="generic-video-item">
<div class="thumb"><a rel="nofollow" href="/Seitokai-Yakuindomo-2-episode-7-english-subbed-video-mirror-725130-FLVUpload/"><img src="http://www.ragnaultima.com/mp4up.php?id=c56vy8likuy8" alt="" class="bg-image" /><span class="border"></span><span class="play"></span><span class="video-subbed">subbed</span> <img src="http://static.cdn.animeultima.tv/images/star-trusted.png" alt="Trusted uploader" title="Trusted uploader" class="trusted" /></a></div>
FLVUpload video by Argro<br /><span class="time">1 hour ago</span>
</div>
<div class="clear"></div>
</div>
<div class="centered">
<script language="JavaScript" type="text/javascript">
I am trying to cut out this url
/Seitokai-Yakuindomo-2-episode-7-english-subbed-video-mirror-725130-FLVUpload/
Currently I am using the following
$url = inbtwn($newData,'rel="nofollow" href="','-FLVUpload/">');
function inbtwn($input, $startcut, $finishcut){
$a1 = split($startcut, $input);
$a2 = split($finishcut, $a1[1]);
$output = $a2[0];
return $output;
}
But it return me the result with watsite, how do I obtain this /Seitokai-Yakuindomo-2-episode-7-english-subbed-video-mirror-725130-FLVUpload/ from the chunk of string above .
Thanks for helping
parse_url() is useful for you.
$url ='http://google.com/wrwetfrtgertger/';
$tmp = parse_url($url);
echo $tmp['path'];
or if up code not working.
$url ='http://google.com/wrwetfrtgertger/';
$tmp = parse_url($url);
echo $url = str_replace('http://'.$tmp['host'] ,'',$url);
Try using regex for a quick and dirty way
$regex = '/href\\s*=\\s*"([^"]*-FLVUpload\/)/s';
if (preg_match_all($regex, $newData, $matches_out)) {
$url = $matches_out[1][0];
print($url);
} else {
print('URL not found');
}

How to wrap multiples of images in divs?

I am trying to wrap some divs round images using PHP to show a max of 8 images per div.
I am using custom fields WordPress plugin to pull out the images of the team but the need to wrap them in divs. I have it part working but it doesn't show a div for the remainder. I'm not sure if this is the best way but this is my code below.
function team($i,$t){
$values = get_field('team_member'.$i);
if($values["url"]){
$answer = $i / 8;
if(is_int($answer)){
echo '<div class="team'.$i / 8.'">'. "\r\n";
echo $t;
$t = '';
echo '</div>'. "\r\n";
}
$t .='<a href="'.$values["url"].'" alt="'.$values["alt"].' Thumbnail" >'. "\r\n";
$t .='<img src="'.$values["sizes"]["thumbnail"].'" alt="'.$values["alt"].'" />'. "\r\n";
$t .='</a>'. "\r\n";
$i = $i+1;
team($i,$t);
}
}
team(1,'');
I am trying to get a result like below.
<div id="team">
<div id="team1">
<img 1>
<img 2>
..
<img 7>
<img 8>
</div>
<div id="team2">
<img 1>
<img 2>
..
<img 7>
<img 8>
</div>
<div id="team3">
<img 1>
<img 2>
..
<img 7>
<img 8>
</div>
<div id="team4">
<img 1>
<img 2>
<img 3>
</div>
</div>
Your method is confusing and hard to read. Take a look at this example and go from there.
$images = array('bear.jpg','cat.jpg','owl.jpg','dog.jpg','bird.jpg');
$itemsPerDiv = 3;
$count = 0;
echo '<div class="animal-row">';
foreach($images as $img)
{
if ($count % $itemsPerDiv == 0 && $count != 0)
{
echo '</div><div class="animal-row">';
}
echo '<img src="'.$img.'">';
$count++;
}
echo '</div>';
This will output
<div class="animal-row">
<img src="bear.jpg">
<img src="cat.jpg">
<img src="owl.jpg">
</div>
<div class="animal-row">
<img src="dog.jpg">
<img src="bird.jpg">
</div>
If you need an explanation on how this works let me know. I think your problem is your using the division operator and not MOD which is a lot more suitable in this case as it determines the remainder which you are missing out.

how to change image URL for each image of 4 products on each row?

I have a dynamic product table with 4 product on each row. I'm using CSS and not an html table.
I'm looking for a way to change all 4 images on each row to different urls and to do the same on all the other rows.
The reason for this is to use 4 sub domains as CDN to allow faster downloads.
Is this possible? i'm still very junior so need some assistance.
Below is my code and the image section is <img class="lazy" src="/images/loading.gif" data-original="<?=resize($i['image'],$settings)?>" width="170" height="250" alt="" />
You will notice that i'm using data-original as i'm using lazyload, the $settings is used for creating a cached version of the image.
Here's my code...
if($viewing=='retailer'){
if($i['category']!=$categoryCheck){?>
<div id="sub-sub"><?=$i['category_name']?></div>
<?
$categoryCheck = $i['category']; $y=1;
}?><? } ?>
<div class="package"<?=$y==4?' style="margin-right:0;"':''?><?=$y==1?' style="clear:left;"':''?>>
<div class="package-img"><a rel="nofollow" target="_blank" href="<?=$buyLink?>">
<?php $settings = array('w'=>170,'h'=>250,'canvas-color'=>'#ffffff'); ?>
<img class="lazy" src="/images/loading.gif" data-original="<?=resize($i['image'],$settings)?>" width="170" height="250" alt="" />
<noscript><img src="<?=resize($i['image'],$settings)?>" width="640" heigh="480"></noscript>
<? /* <img src="<?=$i['image']?>" width="640" heigh="480"> */ ?>
</a></div>
<div class="name"><a rel="nofollow" target="_blank" href="<?=$buyLink?>"><?=$i['item_name']?></a></div>
<div class="price"><p>£<?=$i['price']?></div>
<div class="mrtl rtl<?=$i['retailer']?>"></div>
<div class="retailer-image"><img src="/images/retailers/<?=$i['retailer_logo']?>" width="140" heigh="46" /></div>
</div>
<?
$y = $y==4 ? 1 : $y+1;
}
You need to change your function which returns the path to the image.
<?php
function resize(..., ...) {
static $i = 0;
$i++;
if ($i == 5) {
$i = 1;
}
return "http://cdn{$i}.domain/images/blah.gif";
}
?>

PHP - Adding a div tag after a certain amount of results in a foreach loop

I have a bit of a weird issue.
I want to add a div tag around remaining results after a certain amount is reached in my foreach loop.
So, after the loop returns 6 results, it wraps the rest in
The code i have to return results at the moment is:
foreach ($fpbanners as $banners):
<img src="image.jpg" alt="image description" width="773" height="432" />
endforeach;
At the end i need to source code to look something like the following so all results after the 6th is wrapped in the div tag
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<div class="test">
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
<img src="image.jpg" alt="image description" width="773" height="432" />
</div>
Any help would be greatly appreciated.
Cheers,
You are going to want to use the modulus operator: wiki link
$i=0;
<div class="test">
foreach ($fpbanners as $banners):
if ($i % 6 == 0) :
</div><div class="test">
endif;
<img src="image.jpg" alt="image description" width="773" height="432" />
$i++;
endforeach;
</div>
Untested, but some tinkering should get you what you want.
If you do not want it to repeat on every 6th result, then you just want the == and not the modulus operator (%).
UPDATE
While loop example:
$i=0;
$max = count($fpbanners);
echo '<div class="test">';
while ($i < $max) {
if ($i % 6 == 0) {
echo '</div><div class="test">';
}
echo '<img src="' . $fpbanners[$i] . '" alt="image description" width="773" height="432" />';
$i++;
}
Not knowing how your array is structured etc, that is the best I can do for you, a rough example.
Use either a counter
$i = 0;
foreach ($fpbanners as $banners) {
$i++
if ($i > 6) {
print('<div class="test">');
}
print('<img src="image.jpg" alt="image description" width="773" height="432" />');
}
if ($i > 6) {
print('</div>');
}
Or if the array contains nice numeric keys (read 0, 1, 2, 3, etc)
foreach ($fpbanners as $index=>$banners) {
if ($index > 5) {
print('<div class="test">');
}
print('<img src="image.jpg" alt="image description" width="773" height="432" />');
}
if ($index > 5) {
print('</div>');
}

Categories