I am attempting to style a list of results from a foreach into two columns, however I'm not too sure how to go about it without throwing off the PHP.
Currently, everything looks like below:
and I would like it to look so:
Currently, my foreach and CSS looks thus:
<p class="title">Reviews</p>
<section id="reviews">
<ul class="section_body">
<?php
foreach($reviews['reviews'] as $rv){
if ($rtmp++ < 10);
if ($rv['freshness'] == 'fresh') {
$image = "fresh";
}
else {
$image = "rotten";
}
echo '<img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" />';
echo '<li>' . $rv['quote'] . '</li>';
}
?>
</ul>
</section>
Thank you in advance to anyone who may be able to help! It will be very gratefully received.
I normally use css to do this kind of task to let the browser take care of stuffs
#reviews li
{
float:left;
width: 45%;
...
}
add those 2 lines to your css and let browser takes care of the arrangement. The idea is having each li take half of the container (50%). I made it 45% to take care of extra padding, margin and border
Also, your quote and image should be in the li
<li> <img src="..." /> <span>my quote here</span> </li>
Try below code
<section id="reviews">
<?php
$i=0;
foreach($reviews['reviews'] as $rv)
{
if($i++%2 == 0)
{
echo '<ul class="section_body">';
}
if ($rtmp++ < 10);
if ($rv['freshness'] == 'fresh') {
$image = "fresh";
}
else {
$image = "rotten";
}
$img = '<div><img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" /></div>';
echo '<li>' .$img . $rv['quote'] . '</li>';
if($i%2 == 0 || $i== count($reviews['reviews']))
{
echo '</ul>'
}
}
?>
</section>
You should put image and review text inside the li element.
Related
I am trying to have multiple lines of pictures with 6 pics in each line. Currently there are 4 pics on each line and I am not sure how to make it so I have 6. Any help would be very appreciated!
Here is my code:
<?php
$pageTitle = "Bright Punch Love";
$section = "home";
include('inc/products.php');
?>
<?php include('inc/header.php'); ?>
<div id="top"><img src="top.png" width="1337"></div>
<div class="shirts">
<ul class= "shirts-section">
<?php
foreach($products as $product_id => $product) {
echo "<li>";
echo '<a href="shirt.php?id=' . $product_id . '">';
echo '<img src="' . $product["img"] . '" width= 200 alt="' . $product["name"] . '">';
echo '<p id="details">$30 View Details</p>';
echo "</a>";
echo "</li>";
}
?>
</ul>
</div>
<?php include('inc/footer.php'); ?>
<div id="bottom-index"><img src="bottom-index.png" width="1337"></div>
I would suggest to use % instead of px. Also you use the width tag. Try to avoid using css in your html code. Use class="..." instead and include your css file in the head tag. I make the file now in the head, because it is easier for you. But I would recommend to make an file just for the css.
<head>
<style type="text/css">
.picture{
width : 15%;
}
</style>
</head>
echo '<img src="' . $product["img"] . '" class=\"picture\" alt="' . $product["name"] . '">';
Use PHP's array_chunk function to short your answer. Just Try.
$products_new = array_chunk($products, 6);
foreach($products_new as $product_id => $product) {
//Your code
}
I'm currently in developing module shop for the company I work for and there is a little problem. While extracting records from the table, I want for every third data record to close HTML "UL" tag.
This is what I currently have:
<?php
$selektKat = "SELECT * FROM `proizvodi` WHERE `kategorija` = '$kat'"; //don't worry about SQLi; I will fix it
$result = mysqli_query($con, $selektKat) or die(mysqli_error());
// Line where the loop starts
<?php
while ($row = mysqli_fetch_array($result)) { ?>
<ul class="products-grid clearfix" style="margin-right: 5px; margin-left: 20px;">
<li class="item" style="min-height: 339px">
<a id="product-image-42321" href="proizvod.php" title="naziv" class="product-image">
<img src="http://static.511tactical.com/mag/media/catalog/product/cache/1/small_image/220x/9df78eab33525d08d6e5fb8d27136e95/5/3/53212_716_Alternate1.jpg" width="220" alt="<?php echo $row['naziv'] ?>" />
</a>
<ul class="swatches clearfix">
<li id="swatch-228" class="swatch product-42321">
<a href="proizvod.php" title="<?php echo $row['naziv']; ?>">
<img src="<?php echo __DIR__ . '/images/' . $row['slika'] . '.jpg'; ?>" />
</a>
</li>
</ul>
<div class="price-box">
<span class="label" id="configurable-price-from-42321">
<span class="configurable-price-from-label">
</span>
</span>
<div class="product-name"><a id="product-name-140981" href="proizvod.php"><?php echo $row['naziv']; ?></a></div>
<span class="regular-price" id="product-price-42321">
<span class="price"><?php echo $row['cijena']; ?><sup>KM</sup>
</span>
</span>
</div>
<div class="actions">
</div>
</li>
<?php
}
?>
</ul> // This has to be closed in loop after every 3 records
</div>
Picture:
Cheers.
First, I provide simple PHP script that can be addapted to your needs. In this script open and end tags are handled properly.
I added also $break_after variable - you can set here any positive value you want - in your case it's 3 because you want to do the action after each 3rd element.
First method (it assumes you can get number of data elements before loop)
<?php
$data = array(1,2,3,4,5);
$break_after = 3;
$counter = 0;
$totalNumber = count($data);
foreach ($data as $item) {
if ($counter % $break_after == 0) {
echo '<ul>';
}
echo '<li>'.$item.'</li>';
if ($counter % $break_after == ($break_after-1) || $counter == $totalNumber-1) {
echo '</ul>';
}
++$counter;
}
Second method (it assumes you cannot get number of data elements before loop)
<?php
$data = array(1,2,3,4,5);
$break_after = 3;
$counter = 0;
foreach ($data as $item) {
if ($counter % $break_after == 0) {
echo '<ul>';
}
echo '<li>'.$item.'</li>';
if ($counter % $break_after == ($break_after-1)) {
echo '</ul>';
}
++$counter;
}
if ((($counter-1) % $break_after) != ($break_after-1)) {
echo '</ul>';
}
Regarding your question, you also need to remember to start your <ul> each 3rd record (not just closing it) but also make sure to close it after your loop. In your case you can use second method because you don't know number of elements (in fact you can get them using mysqli_num_rows function and then you could also use method 1). For your case your code should probably look like this:
<?php
$selektKat = "SELECT * FROM `proizvodi` WHERE `kategorija` = '$kat'"; //don't worry about SQLi; I will fix it
$result = mysqli_query($con, $selektKat) or die(mysqli_error());
// Line where the loop starts
<?php
$counter = 0;
$break_after = 3;
while ($row = mysqli_fetch_array($result)) {
if ($counter % $break_after == 0) {
?>
<ul class="products-grid clearfix" style="margin-right: 5px; margin-left: 20px;">
<?php } ?>
<li class="item" style="min-height: 339px">
<a id="product-image-42321" href="proizvod.php" title="naziv" class="product-image">
<img src="http://static.511tactical.com/mag/media/catalog/product/cache/1/small_image/220x/9df78eab33525d08d6e5fb8d27136e95/5/3/53212_716_Alternate1.jpg" width="220" alt="<?php echo $row['naziv'] ?>" />
</a>
<ul class="swatches clearfix">
<li id="swatch-228" class="swatch product-42321">
<a href="proizvod.php" title="<?php echo $row['naziv']; ?>">
<img src="<?php echo __DIR__ . '/images/' . $row['slika'] . '.jpg'; ?>" />
</a>
</li>
</ul>
<div class="price-box">
<span class="label" id="configurable-price-from-42321">
<span class="configurable-price-from-label">
</span>
</span>
<div class="product-name"><a id="product-name-140981" href="proizvod.php"><?php echo $row['naziv']; ?></a></div>
<span class="regular-price" id="product-price-42321">
<span class="price"><?php echo $row['cijena']; ?><sup>KM</sup>
</span>
</span>
</div>
<div class="actions">
</div>
</li>
<?php
if ($counter % $break_after == ($break_after - 1)) {
echo '</ul>';
}
++$counter;
}
if (($counter-1) % $break_after != ($break_after - 1)) { // make sure there will be closing </ul>
echo '</ul>';
}
?>
</div>
<?php
//Our images
$array = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14);
//Count array for last ul
$count_array = count($array);
//Counter
$count = 0;
foreach ($array as $key => $value) {
$count++;
//Begin
if ($count % 3 == 1) {
echo '<ul>';
}
//Output data
echo '<li>' . $value . '</li>';
//Close ul
if ($count % 3 == 0 || $count_array == $count) {
echo '</ul>';
}
}
?>
Output:
<ul><li>1</li><li>2</li><li>3</li></ul><ul><li>4</li><li>5</li><li>6</li></ul><ul><li>7</li><li>8</li><li>9</li></ul><ul><li>10</li><li>11</li><li>12</li></ul><ul><li>13</li><li>14</li></ul>
1234567891011121314
You specifically ask for opening and closing <ul> tags, but may I suggest an alternative, using only css, which can be easily converted into a responsive solution?
To start with, just put your items in a div instead of an list item (omitting the <ul> altogether):
<div class="product-grid">
<?php while ( $row = mysqli_fetch_array( $result ) ): ?>
<div class="item"> ... </div>
<?php endwhile; ?>
</div>
Now just use plain old css to float the grid and add margins in between the columns. Then using the nth-of-type pseudo-selector we can clear the margin on the nth element, depending on how many items you want in a row.
Always-3-column-grid example (Fiddle)
.product-grid { width: 100%; }
.product-grid .item { float: left; width: 32%; margin-left: 2%; margin-bottom: 2%; }
.product-grid .item:nth-of-type(3n+1) { margin-left: 0; }
Now the items are placed nicely in a grid, and it doesn't matter at all how wide the container is.
Fiddle note: the overflow: hidden is a kind of clearfix to show the border. It also works without it.
Now if you want, for instance, add breakpoints to show a 2-column grid instead of a 3-column grid on smaller devices, just change the width of the item and the counter of the pseudo selector. I've put the 3-grid counter in a media query as well, so you don't have to overwrite that one.
3-to-2-column-grid example (Fiddle)
Don't forget to resize the example panel to see the responsive result ;)
.product-grid { width: 100%; }
.product-grid .item { float: left; width: 32%; margin-left: 2%; margin-bottom: 2%; }
/* 3-column */
#media (min-width: 501px) {
.product-grid .item:nth-of-type(3n+1) { margin-left: 0; }
}
/* 2-column. Don't forget to alter the item width accordingly */
#media (max-width: 500px) {
.product-grid .item { width: 49%; }
.product-grid .item:nth-of-type(2n+1) { margin-left: 0; }
}
And here you go! Your fully responsive 3-to-2-column grid :) Just alter the breakpoints to your needs, and the width and margin sizes (just to make sure that in a 3-column version 3*columnWidth + 2*marginWidth adds up to 100%, and 2*columnWidth + marginWidth for the 2-column version).
$i=0;
while ($row = mysqli_fetch_array($result)) {
// Your code
if($i % 5 == 0){ // Break </ul> tag here}
// Rest of code
$i++;
} // End while loop
the % is modulus, it returns the remainder after a division is done, so
5 % 5 = 0
9 % 5 = 4
Add a varaible, let's say $i in you while that you increment at each iteration.
And when it is a multiple of 3, just close your ul.
while ($row = mysqli_fetch_array($result)) {
// YOUR CODE HERE
$count++;
if ($count % 3 == 0) echo '</ul>';
}
For the record the %operator will give you the remainder of the euclidean division.
I just had a previous question about this script, and now I'm back again because it's displaying vertically.
Basically, what I want this to do is display three photos per line, so there will be two rows of 3 images, totaling at 6 images.
<div class="4u">
<article class="item" style="float: left;">
<?PHP foreach($photoData->data as $img){
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '<header>'.$img->caption->text.'</header>';}
?>
</article>
</div>
The program I'm building is an Instagram fetcher that fetches 6 of my most recent photos from Instagram, and works, but here's the output: http://i.stack.imgur.com/xgTBW.png
Now, clearly I zoomed out because I wanted to show you all of the images.
I've tried float: left, and it didn't work.
Anyone have any ideas? I'd love the help. Thank you. :)
Here's a JSFiddle of how I'd like it to go
http://jsfiddle.net/GZb8A/
Using a line-break <br> to move to new line, do this:
<article class="item"> // no styles
<?php
$column_count = 0;
foreach($photoData->data as $img) {
$column_count++;
// adjust width and height in styles to suit your content better
<div class="instagram_item" style="width:200px; height:225px; text-align:center; display:inline-block; margin:0 10px 10px 0;">
echo '<a href="'.$img->link.'?intent=like" target="_blank">';
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '</a>';
echo '<header>'.$img->caption->text.'</header>';
</div>
if ($column_count == 3) {
$column_count = 0;
echo '<br>';
}
}
?>
</article>
<?PHP
$counter = 0;
foreach($photoData->data as $img){
$counter++;
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '<header>'.$img->caption->text.'</header>';
if ($counter == 3){
echo "<br/>";
$counter = 0;}
}?>
This should work
You could close and open your tag in foreach statement like:
<article class="item" style="float: left;">
<?php
$count = 0;
foreach($photoData->data as $img) {
$count++;
echo '<img src="'.$img->images->thumbnail->url.'"/>';
echo '<header>'.$img->caption->text.'</header>';
if(count>3) {
// close and open article
?>
</article>
<article class="item" style="float: left;">
<?php
$count = 0; //Reset count to 0 edited by LJ_C
}
}
?>
</article>
I'm making a basic columns layout for photos with CSS3 Columns,
the problem is that in this way, it will first align content vertically and and then go to next column
for example consider this: http://jsfiddle.net/LQEfK/1/
here as you can see first second and third img are in first column.
I found -webkit-column-axis which is not much documented and is suported only by Chrome.
<div class="image-gallery main">
<?php while ( bp_has_images() ) : bp_the_image(); ?>
<div class="image-thumb-box">
<img alt="<?php bp_gallplus_image_id() ?>" src="<?php bp_image_mid_url() ?>" alt="">
</div>
<?php endwhile; ?>
</div>
Now I want to remake this php to align with this CSS.
Like save make 3 variables in while loop and each should contain a column which will be right for css columns
your code just targets -webkit based browsers...
try this instead
.image-gallery {
-webkit-column-count: 3;
-webkit-column-gap: 3px;
-moz-column-count: 3;
-moz-column-gap: 3px;
column-count: 3;
column-gap: 3px;
}
Here is what I've done;
<div class="image-gallery main">
<?php
$key = 1;
$column_one = '';
$column_two = '';
$column_three = '';
?>
<?php while ( bp_gallplus_has_images() ) : bp_gallplus_the_image(); ?>
<?php
if($key == 1) {
$column_one .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
$key++;
} else if ($key == 2) {
$column_two .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
$key++;
} else {
$column_three .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
$key = 1;
}
?>
<?php endwhile; ?>
<?php echo $column_one . $column_two . $column_three; ?>
</div>
My script is supposed to display the first 10 images in the MySQL database and have the script hide the rest of the users images until the user clicks the link View All and have the rest of the images slide down when the user clicks the link.
My Question: So my question is that my images won't display when the user clicks the link View All and I was wondering how can I fix this problem so that all my users images are displayed when the user clicks the link?
PHP & MySQL code.
$multiple = FALSE;
$row_count = 0;
$dbc = mysqli_query($mysqli, "SELECT * FROM images WHERE images.user_id = '$user_id'");
if (!$dbc) {
print mysqli_error($mysqli);
} else {
echo '<div id="images">';
while ($row = mysqli_fetch_array($dbc)) {
if (($row_count % 5) == 0) {
echo '<ul>';
}
echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';
if (($row_count % 5) == 4) {
$multiple = TRUE;
echo '</ul>';
} else {
$multiple = FALSE;
}
$row_count++;
}
if ($multiple == FALSE) {
echo '</ul>';
}
if ($row_count == 5) {
echo '</div>';
echo '<div id="hidden">';
}
}
echo '</div>';
echo 'View All';
JQuery code.
$(document).ready(function(){
$("#hidden").hide();
$("#view_all").click(function(){
$("#hidden").slideDown();
});
});
Here is the HTML code
<div id="images">
<ul>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
</ul>
<ul>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
<li><img src="../images/image.png" /></li>
</ul>
</div><div id="hidden"></div>
View All
You will need some images in that #hidden div. You could simplify the code by using css to hide your #hidden div (#hidden { display: none; }
Use the following jQuery:
$(document).ready(function(){
$("#view_all").click(function(){
$("#hidden").slideToggle("slow");
return false;
});
});
Another try.
You 'hidden' div is outside of loop, so no image can be printed in it. It becomes clear if you use some indentations in the code:
while($row = mysqli_fetch_array($dbc)){
if(($row_count % 5) == 0){
echo '<ul>';
}
echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';
if(($row_count % 5) == 4) {
$multiple = TRUE;
echo "</ul>";
} else {
$multiple = FALSE;
}
$row_count++;
}
if($multiple == FALSE) {
echo "</ul>";
}
if($row_count == 5) {
echo '</div>';
echo '<div id="hidden">';
}
update try moving if($row_count == 5) {...} right after $row_count++;. (I didn't run it, but looks like a right thing to do).
Pardon me if i missed something, but it doesn't seem like you put anything into the "hidden" div. That would make sense if you want to dynamically fetch the images from the server, which i recommend for faster load times. However, there is no jQuery code to do this. You could simply do this:
// get-more-photos.php or something
$multiple = FALSE;
$row_count = 0;
$dbc = mysqli_query($mysqli,"SELECT *
FROM images
WHERE images.user_id = '$user_id'
LIMIT ".mysql_real_escape_string($GET['offset']).",".mysql_real_escape_string($GET['offset'])+10."");
if (!$dbc) {
print mysqli_error($mysqli);
} else {
while($row = mysqli_fetch_array($dbc)){
if(($row_count % 5) == 0){
echo '<ul>';
}
echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';
if(($row_count % 5) == 4) {
$multiple = TRUE;
echo "</ul>";
} else {
$multiple = FALSE;
}
$row_count++;
}
if($multiple == FALSE) {
echo "</ul>";
}
On the client, you would call this with something like:
$("#view_all").click(function(){
$("#hidden").html("Loading...").slideDown();
$.get('get-more-photos.php?offset=10', '', function(data) {
$("#hidden").html(data).slideDown();
});
});
All untested, of course, but it should work with minor modifications.
Oh, and the View all button in this case will only show ten more, which is more reasonable depending on the number of photos. However, it only shows 10 more the first time, fixing that is left as an exercise for the reader :).
EDIT:
If you want, you don't have to dynamically fetch the images from the server (although i recommend it). For example, you could do something like the following:
// display-images.php
echo "<div>";
include "get-more-photos.php?offset=0";
echo "</div>";
echo '<div id="hidden">';
include "get-more-photos.php?offset=10";
include "get-more-photos.php?offset=20";
include "get-more-photos.php?offset=30";
include "get-more-photos.php?offset=40";
include "get-more-photos.php?offset=50";
include "get-more-photos.php?offset=60";
include "get-more-photos.php?offset=70";
include "get-more-photos.php?offset=80";
include "get-more-photos.php?offset=90";
echo "</div>";
Of course, that will only get the first 100, and might generate a bunch of empty lists, but if you have more than 100 images, or are worried about the extra lists, i would just fetch them dynamically :).