I have images in an array and I want them to be display in a table with 3 columns!
So obviously in HTML, it is like:
<table>
<tr>
<td><img src="image1.jpg"></td>
<td><img src="image2.jpg"></td>
<td><img src="image3.jpg"></td>
</tr>
<!-- and so on... -->
</table>
So I want it to print out in PHP but the problem is the code.
My code is like this:
$photos = array( "image1",
"image2",
"image3",
"image4",
"image5",
);
foreach ($photos as $photo) {
$i = 0;
if ($i < 3) {
echo '<td><center><img src="'.$photo.'.jpg"></td>';
$i++;
} elseif ($i == 3) {
echo '</tr><tr>';
$i = 0;
}
}
I don't know what seems to be the problem and every time I echo out the variable $i, it echoes out like 11111111111111111111111111111111111111111111.
change this
foreach ($photos as $photo) {
$i = 0;
to
$i = 0;
foreach ($photos as $photo) {
Why is $i inside the foreach loop? That must be the reason. The $i gets initialized at the start of each loop cycle.
Try display:inline-block; instead in css. This works very well.
Here's an example...
<img src="image1.jpg" style="display:inline-block;>
<img src="image2.jpg" style="display:inline-block;>
<img src="image3.jpg" style="display:inline-block;>
You can even ask if you want to add text or something with the images...
I find using array_chunk for this kind of thing is more elegant.
$chunks = array_chunk($photos, 3);
foreach ($chunks as $chunk)
{
echo '<tr>';
foreach ($chunk as $photo)
{
echo '<td><img src="', $photo, '.jpg" /></td>';
}
echo '</tr>';
}
Also, don't use the 'center' tag, it is deprecated. Use CSS to align content.
Also, strictly speaking, this is not what HTML tables are for. Sure they work well. Actually, they work better than the 'proper' solution but they are not correct. Still, go ahead and use them if you just need a quick fix. It doesn't actually cause any problem to do so.
Related
I have been scratching my head for half hour now trying to figure this out
I have a wrapper div inside a foreach loop and I'm trying to force it to echo one and not duplicate
foreach ($apples as $apple) {
//echo only once bellow
<div class="Wrapper">
//echo only once Above
echo $apple;
//echo only once bellow
</div>
//echo only once Above
}
I do not wish to move my Wrapper div outside the foreach, It is very important for the div to be inside the foreach and to be without duplicates.
You didn't mention but If you need to put Wrapper div only if you have any count in $apples variable then simply check with if(count($apples)) and then put Wrapper
<?php
if(count($apples)){
echo '<div class="Wrapper">';
foreach ($apples as $apple) {
echo $apple;
}
echo '</div>';
}
?>
Note: I know this is not good way to write but as per his condition I am suggesting this code.
I don't know why you don't want to put div outside foreach loop but anyway you can use the following code to achieve that...
<?php
foreach ($apples as $apple) {
static $i = 0;
if ($i == 0) {
echo "<div class='Wrapper'>";
}
echo $apple;
$i++;
if ($i == count($apples)){
echo "</div>";
}
}
?>
Maybe this will help since you want to keep it inside foreach loop
$numItems = count($arr);
$i = 0;
foreach($arr as $ar) {
$i = $i+1;
if ($i == 1) {
echo '<div class="class">';
}
// do your stuff
if($i == $numItems) {
echo "</div>";
}
}
I have a folder with around 400 images. I'd like to put them on a page put only eight at a time. Meaning i will have all the images on the same page, but cut in sections of eight images wrapped in a box like this:
<div class="eightbox">
<img src="image1">
<img src="image2">
<img src="image3">
<img src="image4">
<img src="image5">
<img src="image6">
<img src="image7">
<img src="image8">
</div>
<div class="eightbox">
<img src="image9">
<img src="image9">
<img src="image10">
<img src="image11">
<img src="image12">
<img src="image13">
<img src="image14">
<img src="image15">
</div>
Now my code for this so far makes an output, but does not close the "eightbox" so that every new div is inside the other one.
Here's my Code:
<?php
$files = glob("images/*.*"); //loads all the images from my folder into an array
$y = ceil(count($files)/8); // The amount of images divided by eight and rounded up
$z = 1; //This counter makes the array continue outside the loop
for ($i=1; $i<$y; $i++)
{
echo '<div class=\'eightbox\'>';
for ($q=0; $q<8; $q++)
{
$num = $files[$z];
echo '<img src=\'' . $num . '\' >';
$z++;
}
echo '</div>';
}
?>
I hope this makes any sense to you and thanks in advance for helping!
EDIT: on popular demand heres a screenshot of the code i'm getting with chrome:
Screenshot of my code
An alternative which splits the files into chunks of 8 ( using array_chunk()) and then outputs each chunk at a time...
$split = array_chunk($files, 8);
foreach ( $split as $div ) {
echo '<div class=\'eightbox\'>';
foreach ($div as $file ) {
echo '<img src=\'' . $file . '\' />';
}
echo '</div>';
}
Or using implode() to output the data...
$split = array_chunk($files, 8);
foreach ( $split as $div ) {
echo '<div class=\'eightbox\'><img src=\''.
implode('\' /><img src=\'', $div).
'\' /></div>';
}
which IMHO is a little less readable, but more compact.
Using Modulo you could do this
<?php
$files = glob("images/*.*"); //loads all the images from my folder into an array
foreach ( $files as $idx=>$file) {
if ( $idx % 8 == 0 && $idx != 0){ // every 8 close a div and open a new one
echo '</div>';
echo '<div class="eightbox">';
}
if ( $idx == 0 ){ // output first div
echo '<div class="eightbox">';
}
echo "<img src='$file'>";
}
if ( $idx+1 % 8 != 0 ) { // close the last div
echo '</div>';
}
?>
I am trying to master the art of the foreach loop; I have the following code which I am using with WordPress and the Advanced Custom Fields pluging. I want to turn it into a foreach loop.
<li data-thumb="<?php the_field('image_1'); ?>">
<img src="<?php the_field('image_1'); ?>" />
</li>
<li data-thumb="<?php the_field('image_2'); ?>">
<img src="<?php the_field('image_2'); ?>" />
</li>
<li data-thumb="<?php the_field('image_3'); ?>">
<img src="<?php the_field('image_3'); ?>" />
</li>
<li data-thumb="<?php the_field('image_4'); ?>">
<img src="<?php the_field('image_4'); ?>" />
</li>
<li data-thumb="<?php the_field('image_5'); ?>">
<img src="<?php the_field('image_5'); ?>" />
</li>
I have tried writing the code below but it doesn't work, and I don't know how to limit the loop to 5 (images). Note that get_field returns the image url whilst the_field returns the image.
<?php
$i=1;
foreach (!empty (get_field('property_image.$i.')) ) {
print (' <li data-thumb="<?php the_field('property_image'.$i.'); ?>">
<img src="<?php the_field('property_image'.$i.'); ?> ">
</li> ');
$i++;
}
?>
If you know that there are only 5 items, then you would just use a for or while loop. foreach is a loop designed for looping through an array of elements, which you don't have.
Consider this loop instead:
for($i = 1; $i <= 5; $i++) {
if( !empty(get_field('property_image'.$i)) ) {
echo '<li data-thumb="' . the_field('image_' . $i) . '">';
echo '<img src="' . the_field('image_' . $i) '" />';
echo '</li>';
}
}
foreach is used to iterate over arrays, e.g.
foreach (array_expression as $value) {
// current array element
}
The syntax you're using will not work with foreach (see examples to understand how it works).
For the implementation you posted, you would be better off using a normal for loop.
for ($i = 1; $i <= 5; $i++) {
// print <li>
}
To use a foreach loop, you need to have iterate over an array. get_field("name") does not return an array, however you CAN use foreach with get_fields()
$fields = get_fields();
if( $fields )
{
foreach( $fields as $field_name => $value )
{
// Output values here
}
}
Details here: http://www.advancedcustomfields.com/resources/get_fields/
In your case for loop is better as changed in the loop value is numeric. So solution will be like:
for ($i = 1; $i<=5; $i++) {
$src = the_field('image_'.$i);
printf('<li data-thumb="%s">', $src);
printf('<img src="%s" />', $src);
print('</li>');
}
If you still want to use foreach loop then you can use built-in php function range to get required numbers.
foreach (range(1, 5) as $i) {
$src = the_field('image_'.$i);
printf('<li data-thumb="%s">', $src);
printf('<img src="%s" />', $src);
print('</li>');
}
What you probably wanted to write was a while loop up there. Foreach loops don't test a condition before a cycle. Rather, foreach loops take an array and iterate over all the values within. It can also iterate over associative arrays.
<?php
$users = array(
'user_mango' => 'John Doe',
'user_2' => 'Jacob Doe',
'user_potato' => 'Jane Doe'
);
foreach ($users as $user_id => $name) {
echo $user_id, ' - ', $name, '<br>';
}
should output
user_mango - John Doe
user_2 - Jacob Doe
user_potato - Jane Doe
I'm not a wordpress developper but if you wanted to write this code in the style you started off with, here goes:
<?php
$i = 0;
while (!empty(get_field('property_image.$i.')) && $i < 5) {
echo 'YOUR TEMPLATE CODE';
$i++;
}
while loops, unlike foreach loops, test a condition before each iteration. Here in the above example code, we have our counter variable initialized to zero. Inside the loop we increase the counter variable by one on each iteration, and in the condition, we specify that in order for the full expression to be true the counter must be smaller than 5.
im trying to use a foreach loop with the plugin fotorama.
What im trying to do is load one half sized image for the main gallery image. Which i have working in a foreach, but i want to use a full image for the data-full tag but i cant get it to work.
This is the working code.
<div class="fotorama"
data-allowfullscreen="native"
data-nav="thumbs"
data-fit="scaledown"
data-width="100%"
data-height="100%"
data-arrows="true"
data-click="true"
data-swipe="true">
<?php
$dirname = "admin/image-upload/uploads/";
$images = glob($dirname."*.*");
foreach($images as $image) {
echo '<img src="'.$image.'" /><br />';
}
?>
</div>
this is what im trying to do.
<div class="fotorama"
data-allowfullscreen="native"
data-nav="thumbs"
data-fit="scaledown"
data-width="100%"
data-height="100%"
data-arrows="true"
data-click="true"
data-swipe="true">
<?php
$dirname = "admin/image-upload/uploads/";
$images = glob($dirname."*.*");
$dirname2 = "admin/image-upload/full/";
$images2 = glob($dirname2."*.*");
$fullImgs = "<img data-full=".$image2." src=".$image." /><br />";
foreach($fullImgs as $fullImg) {
echo $fullImg;
}
?>
</div>
thanks in advanced guys
Try this:
$dirname = "admin/image-upload/uploads/";
$images = glob($dirname."*.*");
$dirname2 = "admin/image-upload/full/";
$images2 = glob($dirname2."*.*");
$array = array_merge($images, $images2);
// Supossing both array have same length
$length = count($images);
for($i = 0; $j = $length; $i < $length; $i++, $j++) {
echo '<img data-full=".$images2[$j]." src=".$images[$i]." /><br />';
}
I think what you want is this:
<?php
$dirname = "admin/image-upload/uploads/";
$images = glob($dirname."*.*");
$dirname2 = "admin/image-upload/full/";
$images2 = glob($dirname2."*.*");
//assuming $images and $images2 are the same length...
foreach ($images as $k => $v) {
echo "<img data-full=".$images2[$k]." src=".$v." /><br />";
}
?>
Haven't tested, but should give the idea...
Your code won't work like this. If I understood you correctly you have the same image in big and small format in two different directories. To show them as pair you need to make a connection between those two files - because how should your script know which images belong together? You could use a database, but in your case I think it is easier to make a connection in the filename. For example, name the pictures in the directory for the small images
Image_7263.png
Image_0172.png
And so on. For the big images you simply append _BIG to the end of the name.
Then you use your foreach loop to loop through the directory for the small images. For each image in there, you append _BIG to the end of the filename and include it from the directory for the big ones.
$smallImages = glob ("/path/to/small/images/*.*");
foreach ($smallImages as $img)
{
$name = substr ($img, 0, strlen ($img)-4); //Remove the .png or .jpg
$bigImg = "/path/to/big/images/".name."_BIG.jpg"; // or whatever image type you are using
echo "<img data-full=\"".$bigImg."\" src=\"".$img."\" />
}
Trying to display an html table from and xml from php, getting error when trying to alternate the row base on even and odd mostly for styling the table.
foreach($bookdata as $book) // loop through our books
{
$i = 0;
if($i%2 == 0)
{
$class = 'even';
}
else
{
$class = 'odd';
}
{
echo <<<EOF
<tbody>
<tr class='$class'>
<td>{$book->date} </td>
<td><a href='http://www.website.com{$book->dataNo}.html'>{$book->Name}</td>
<td><a href='http://www.website.com/-{$book->authorcodeNo}.html'>{$book->author}</td>
</tr>
}
$i++;
}
EOF;
}
echo '</tbody>';
echo '</table>';
Any help most welcome
$i = 0;
foreach($bookdata as $book) // loop through our books
{
...
...
//and at end of foreach
$i++;
You are redeclaring $i inside of your for loop so it's never going to actually increase, just get reset to 0 every single time. Also, not sure what's up with some of your curly braces as there's not enough code to see it all as far as I can tell... start by moving your variable declaration outside the for loop though!
You are reseting the $i to 0 on every loop.
Remove
$i = 0;
from your code. And I didn't notice this before but the EOF is misplaced. Here is a full working solution
foreach($bookdata as $book) // loop through our books
{
if($i%2 == 0) { $class = 'even'; }
else { $class = 'odd'; }
echo <<<EOF
<tbody>
<tr class='$class'>
<td>{$book->date} </td>
<td><a href='http://www.website.com{$book->dataNo}.html'>{$book->Name}</td>
<td><a href='http://www.website.com/-{$book->authorcodeNo}.html'>{$book->author}</td>
</tr>
EOF;
$i++;
}
try put the $i=0 out of foreach loop.