Display array items an (x) number at a time in PHP

Question

0.00/5 (No votes)

See more:

Hello.
I have a website project with two files.
In the first file i have a form to upload images in my database in a table called images.
In the second file i retrieve those images and display them with a while loop.
Now what i want is to display those images in a certain style and layout

<div>
<img />
<img />
<img />
</div>

<div>
<img />
<img />
<img />
</div>

<div>
<img />
<img />
<img />
</div>

So every few images i want to display them inside a div.
For example the first 3 images display them in a div.
Then the next 3 and so on.
How can i achieve that?
My display code is below.

What I have tried:

<?php
                if (mysqli_num_rows($result) > 0)
                {

                      while ($row = mysqli_fetch_array($result)) {
                        echo "<div>";
                        echo "<a href='admin/images/".$row['image']."'>";
                          echo "<img src='admin/images/".$row['image']."' >";
                          echo "<h3>".$row['image_text']."</h3>";
                          echo "</a>";
                          echo "</div>";
                      }

                }
                else {
                    echo "0 results";
                }
                  ?>

Posted 14-Jun-19 7:02am

simple world

Updated 15-Jun-19 6:43am

v2

Add a Solution

3 solutions

Solution 3

Quote:
It all works great but what i want is that every (x) number to create a new div with the specified tags in it.

As I understand, you have:

<div>
	<img />
</div>
<div>
	<img />
</div>
<div>
	<img />
</div>
<div>
	<img />
</div>
<div>
	<img />
</div>
<div>
	<img />
</div>
<div>
	<img />
</div>
<div>
	<img />
</div>

and you want:

<div>
	<img />
	<img />
	<img />
</div>
<div>
	<img />
	<img />
	<img />
</div>
<div>
	<img />
</div>

or:

<div>
	<img />
	<img />
	<img />
</div>

your code will have this structure:

PHP

printed_images=0
echo <div> // once
loop on images
    {
    if (printed_images == 3)
        { // once every 3 images
        echo <div>
        echo </div>
        printed_images=0
        }
    echo <img /> // once per image
    printed_images++
    }
echo </div> // once

Posted 14-Jun-19 10:49am

Patrice T

Updated 14-Jun-19 11:41am

v3

Comments

simple world 15-Jun-19 11:40am

Hello Thank you for your replies but no its not working as i need to.
What i need is this.
I have a database table with 9 images.
i want to display all this 9 images in 3 different tags.
something like this:
div
img
img
img
div

div
img
img
img
div

div
img
img
img
div

but everytime the published_images is setted back to 0 in the if conditions then it starts again from image 1.
What i want is to loop in the array that is returned and go 0,1,2 display them 3,4,5 display them 6,7,8 display them.
and imagine that the number of images in the database is NOT known so i cant just go echo array[index0] and so on.
I hope you understand me

Patrice T 15-Jun-19 12:16pm

Use Improve question to update your question.
and show the new code.

simple world 15-Jun-19 12:33pm

i did it.

Patrice T 15-Jun-19 12:38pm

and you updated the code ?

simple world 15-Jun-19 12:44pm

Patrice T thank you for the help.
But the first post was what i was looking for.
I appreciate your help very much

Solution 4

This is my new code updated.

<?php
                  $i=0;
                  if (mysqli_num_rows($result) > 0)
                  {

                        while ($row = mysqli_fetch_array($result)) {

                          if ($i == 0) {
                            echo "<div>";

                          }
                          echo "<a href='admin/images/".$row['image']."'>";
                            echo "<img src='admin/images/".$row['image']."' >";
                            echo "<h3>".$row['image_text']."</h3>";
                            echo "</a>";
                            $i++;


                            if ($i == 3) {
                              echo "</div>";
                                $i = 0;
                            }



                        }

                  }
                  else {
                      echo "0 results";
                  }
                    ?>

Posted 15-Jun-19 6:43am

simple world

Comments

Patrice T 15-Jun-19 12:50pm

And it works with 4 or 5 images ?

simple world 15-Jun-19 12:52pm

Yes it works great.
I have 4 different div tags and each holds 5 images in it now.
And if i want i put more.
Again thank both of you.

Patrice T 15-Jun-19 13:08pm

No, I mean for 3+1 images

<div>
	<img />
	<img />
	<img />
</div>
<div>
	<img />
</div>

simple world 15-Jun-19 13:11pm

if i have 10 images in my database i get 2 divs with 5 images in them.
But if i have 11 images i get 3 divs, the first 2 have 5 images in them and the 3rd has 1.

Patrice T 15-Jun-19 13:23pm

with this code ?

simple world 15-Jun-19 13:25pm

Yes.
I works great.

Patrice T 15-Jun-19 13:28pm

I mean:

<div>
	<img />
	<img />
	<img />
</div>
<div>
	<img />
</div> // this end div is missing with your code

simple world 15-Jun-19 13:34pm

No it doesnt.
Everything is in place.
I inspected the code and it is very good.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Accepted Answer · 2019-06-14T08:05:00

Solution 2

A simple solution is create use an internal counter in your loop.

Initialize it to zero
Check: if couner == 0 start the div.
display image
increments the counter.
When counter = 3 the reset to 0 close div.

New div starts if loop continues after reset to zero.

Finally, when loop ends, close div if counter != 0.

Posted 14-Jun-19 8:05am

W∴ Balboos, GHB

Comments

simple world 15-Jun-19 12:42pm

Yeah This worked really well.
Thank you very much