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>
Related
I want array 1,3,5,7,9 layout will be reverse from array 0,2,4,6,8,10
for example 1st row layout- image on left and description on righ, the 2nd row layout- image on right and description on left, and continuously.
This is my function.php code
<?php
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
$image = get_field('featured_image', $term);
?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
</div>
</div><?php
} ?>
CSS code:
.row{
display: flex;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 15px;
}
.row .col {
flex: 1;
padding-right: 10px;
padding-left: 10px;
}
And the result still like this
my expectation will be like this:
We just need to change code in function.php as below.
<?php
$i=0;
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
$image = get_field('featured_image', $term);
if($i % 2){ ?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
</div>
</div>
<?php } else {?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
</div>
</div>
<?php }
$i++;
}
?>
Hope now you got all things and let me know still any help need.
I assume you want the array_diff of [0,2,4,6,8,10].
Array_diff returns what is missing in the array, if we use an range() to create the reference array then it would look like:
$yourarray = [0,2,4,6,8,10];
$diff = array_diff(range(min($yourarray), max($yourarray)), $yourarray);
//[1,3,5,7,9]
https://3v4l.org/6QY3r
you need to add following css to achieve your desired output:
when odd .product-cat div found apply order: 1; to image container(.product-cat-image) and order: 2; to detail container(.product-cat-details)
when even .product-cat div found apply order: 2; to image container(.product-cat-image) and order: 1; to detail container(.product-cat-details)
.product-cat:nth-child(odd) .product-cat-image{
-webkit-order: 1;
order: 1;
}
.product-cat:nth-child(odd) .product-cat-details{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-image{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-details{
-webkit-order: 1;
order: 1;
}
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 have the following foreach:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
?>
<div class='wrapper'>
<div class="album"><img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246"></div>
</div>
<?php } ?>
But thus appears only a div .album within each div .wrapper. How do I see two divs .album within each div .wrapper?
UPDATE
Guys, found the solution:
<?php
$total = 0;
foreach($result15 as $row15){
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
if($total == 0){
echo '<div class="wrapper">';
}
?>
<div class="album" data-disco="disco<?php echo $id15; ?>">
<img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246">
</div>
<?php
$total = $total + 1;
if($total % 2 == 0){
echo '</div>';
$total = 0;
}
}
?>
<div class='wrapper'>
<div class="album"><img src="img/<?php echo $thumb15; ?>" alt="" width="246" height="246">
<div class="album"><img src="img/..." alt="" width="246" height="246"></div>
</div>
Something like this?
EDIT
I dont understand what you want. But you can do this to get two divs, but you will need to get your image path for the second div image:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
echo "<div class='wrapper'>";
echo '<div class="album"><img src="img/'.$thumb15.' alt="" width="246" height="246"></div>';
echo '<div class="album"><img src="img/'.$thumb15.' alt="" width="246" height="246"></div>';
echo '</div>';
} ?>
Try this:
<?php
foreach($result15 as $row15) {
$thumb15 = $row15->thumb;
$id15 = $row15->id_discografia;
echo "<div class='wrapper'>";
echo '<div class="album"><img src="img/'.$id15 .' alt="" width="246" height="246"></div>';
echo '<div class="album"><img src="img/'.$id15 .' alt="" width="246" height="246"></div>';
echo '</div>';
} ?>
A nice solution could be to use array chunk considering you want to treat the data in 'chunks' of 2 images at a time. This way, if you want to alter how many images appear in a wrapper you only need to change your chunk size.
$chunkSize = 2;
foreach (array_chunk($result15, $chunkSize) as $wrapperImages) {
echo '<div class="wrapper">';
foreach ($wrapperImages as $image) {
$thumb = $image->thumb;
echo '<div class="album"><img src="img/'.$thumb.' alt="" width="246" height="246"></div>';
}
echo '</div>';
}
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.