half on the right and half on the left - php

I am currently trying to find a good solution for what to do with this
$all_products
this is an array with 7 products and i need to loop through them to create the dynamic page but i have kind of a structure issue with the page
<div class="left-pane left">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<div class="right-pane left">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
How will I know how many to put in the right and the left and can i alternate between then or do i need to do something like (count($all_product) / 2) on the left and then the rest on the right pane. Also how do i loop only half on one side using. how do i find out what to do because the array will be different count every time
<?php foreach ($all_products as $product) { ?>

You can construct each half separately by using something like:
$i = 0;
$left = '<div class="right-pane left">';
$right = '<div class="right-pane right">';
foreach ($products as $product) {
if ($i++ % 2 == 0) {
$left .= '<div class="item">' . $product . '</div>';
} else {
$right .= '<div class="item">' . $product . '</div>';
}
}
$left .= '</div>';
$right .= '</div>';

An alternative is to give them all a fixed width and float them all left in a container of fixed width.
.item {
float: left;
width: 300px;
}
Here's a kickoff example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3654173</title>
<style>
#items {
width: 600px;
}
.item {
float: left;
width: 300px;
}
</style>
</head>
<body>
<div id="items">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
</body>
</html>
It will only go from left to right and then top to bottom, not the other way round as in your original question. Not sure if that hurts.

$i = 0;
$left = "";
$right = "";
foreach ($all_products as $product) {
if($i%2==0) $left.= '<div class="item">'.$product.'</div>';
else $right.= '<div class="item">'.$product.'</div>';
$i++;
}
echo '<div class="left-pane left">'.$left.'</div>'.'<div class="right-pane left">'.$right.'</div>';

Related

Items per slide responsive

I've made a logo slider using Bootstrap (basically as seen here http://jsfiddle.net/juddlyon/Q2TYv/10/).
Within each slide there are 4 logos. I want to make this responsive, where on smaller screens it only shows 2 logos per slide. I'm not sure what the best way is to do this.
I can double the grid-4 width to 50% with media queries but then it will still show 4 per slide, in a 2x2 grid.
Another way is to duplicate the entire slide and hide and show the correct one, but this seems like a rather inefficient appreach.
So really I need to reduce the number of logos per slide as it is loaded.. but how?
I'm using WP and Advanced Custom Fields to populate the slider. Simplified code below:
PHP:
<?php
$firstslide = 0;
$slide = 0;
$repeater = get_field('clients', $clients);
$order = array();
foreach( $repeater as $i => $row ) {
$order[ $i ] = $row['name'];
}
array_multisort($order, SORT_ASC, $repeater);
if($repeater):
foreach($repeater as $i => $row):
if ($firstslide == 0) {
$class = "item active";
} else {
$class = "item";
};
if ($slide == 0) {
echo '<div class="' . $class . '">';
};
?>
<div class="grid-4">
<img src="<?php echo $row['logo']; ?>">
</div>
<?php
if ($slide == 4) {
echo '</div>';
$slide = 0;
} else {
$slide++;
}
$firstslide++;
endforeach;
wp_reset_postdata();
endif;
?>
This would results in something like:
<div class="item active">
<div class="grid-4"><img src="logo1.jpg"></div>
<div class="grid-4"><img src="logo2.jpg"></div>
<div class="grid-4"><img src="logo3.jpg"></div>
<div class="grid-4"><img src="logo4.jpg"></div>
</div>
<div class="item">
<div class="grid-4"><img src="logo5.jpg"></div>
<div class="grid-4"><img src="logo6.jpg"></div>
<div class="grid-4"><img src="logo7.jpg"></div>
<div class="grid-4"><img src="logo8.jpg"></div>
</div>
<div class="item">
<div class="grid-4"><img src="logo9.jpg"></div>
<div class="grid-4"><img src="logo10.jpg"></div>
<div class="grid-4"><img src="logo11.jpg"></div>
<div class="grid-4"><img src="logo12.jpg"></div>
</div>
Very simplified CSS for the grid:
.grid-4 {
width: 25%;
}
After more searching, it looks like Slick is a solution that will just take care this.
jsfiddle.net/BishopBarber/ufnjkjy4/1/

Bootstrap grid with php [duplicate]

This question already has answers here:
Grid of responsive squares
(5 answers)
Closed 3 years ago.
I'm making a theme for my Omeka site in which I am calling an item and its various components using PHP. Each item is in its own div, and I have attempted to create a tile-like grid with Bootstrap. However, the divs only line up in a single vertical column. How do I make all divs line up in a row of three or four? I'm completely stumped. It works fine without the PHP (with multiple rows and manually added content) but won't work otherwise. This is what it looks like right now. And this is what I want the divs to look like:
Here is the html/php:
<?php foreach (loop('items') as $item): ?>
<div class="container">
<div class="item">
<div class="row">
<!-- attempt at square grid -->
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Image: <?php $image = $item->Files; ?>
<?php if ($image) {
echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');
} else {
echo link_to_item('<div style="background-image: url(' . img('defaultImage#2x.jpg') . ');" class="img"></div>');
}
?>
Title: <?php echo link_to_item(metadata('item', array('Dublin Core', 'Title')), array('class'=>'permalink')); ?><br>
Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?><br>
Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?><br>
Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?><br>
<br>
</div>
</div>
</div>
</div><!-- end grid -->
And the CSS:
.dummy {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align:center;
padding-top:calc(50% - 30px);
}
.item-item {
border: solid black 5px;
}
I'll give you a pseudo method of achieving this, harnessing array_chunk().
$chunks = array_chunk($array, 4);
foreach($chunks as $group): ?>
<div class="row">
<?php foreach($group as $element): ?>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<?php // do your php stuff...?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Example

Every/other CSS techniques

I am creating a page with 4 different sections. In each section there is a responsive image and on the image there is text and some buttons. Right now they are aligned a bit off center and to the right. I am trying to achieve so that the 1st div the text and buttons float right and the 2nd div the text and buttons float left and so on. I am using the even odd nth property but it is only responding on the even css nth property. Here is the CSS and html. Keep in mind I am just using the background color now as an example and will put in the floats and padding if I get it working.
.popup-open:nth-child(odd) {
background: #ff0000;
}
.popup-open:nth-child(even) {
background: #000000;
}
<div class="popup-open">
<div class="icons-large">
<?php
$fields = CFS()->get('icons_large');
if($fields) :
foreach ($fields as $field) : ?>
<div class="row">
<div class="image">
<img src="<?php echo $field['icons_big'];?>" alt="">
</div>
</div>
<?php endforeach; endif; ?>
</div>
<div class="icons-large">
<?php
$fields = CFS()->get('tour_titles');
if($fields) :
foreach ($fields as $field) : ?>
<?php echo $field['tour_name'];?>
<?php endforeach; endif; ?>
</div>
<div class="title"><?php the_title(); ?></div>
</div>
I think you should add a class to the divs and target them that way, you will have more control over it too.
if($fields) :
$i = 1;
foreach ($fields as $field) :
if($i === 2){
$class = "even";
$i = 1;
}else if($i === 1){
$class = "odd";
$i = 2;
}
<div class="row <?=$class;?>">
<div class="image">
<img src="<?php echo $field['icons_big'];?>" alt="">
</div>
</div>
<?php endforeach; endif; ?>

Break UL tag after 'n' times in while-loop

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.

Foreach loop not always displaying

I'm retrieving data out of a database using PHP's PDO extension. I never had a problem with this and it always shows up in all browsers. BUT when I tested the website on a friends laptop, the foreach loop works but the content is not displayed. The content is present in the source code.
this is how I set up the code that should be displayed:
<?php
foreach($advertentiesManager->recenteAdvertenties() as $advertentie) {
$verkoperData = $usersManager->userData($advertentie->verkoper);
?>
<div class="col-md-4" style="margin:10px 0;">
<div class="advertentie">
<div class="overlay"></div>
<div class="img" style="background:url('images/categorie/<?php echo $advertentie->categorie; ?>.jpg') no-repeat center center;background-size:cover;"></div>
<div class="picture" style="background:url('<?php echo str_replace("../", "", $verkoperData->foto); ?>') no-repeat center center;background-size:cover;"></div>
<div class="prijs"><p class="h2">€ <?php echo $advertentie->verkoopprijs; ?></p></div>
<div style="padding: 10px;padding-left:80px;margin-top:-40px;">
<a href="<?php echo $advertentie->type.'/'.strtolower(str_replace(" ", "-", $advertentie->titel)).'-'.$advertentie->id; ?>">
<?php echo $advertentie->titel; ?>
</a>
<br>
<p style="color:#777;font-size:.9em;">
<?php
$beschrijving = strip_tags($advertentie->omschrijving);
$max_length = 100;
if (strlen($beschrijving) > $max_length) {
$offset = ($max_length - 3) - strlen($beschrijving);
$beschrijving = substr($beschrijving, 0, strrpos($beschrijving, ' ', $offset)) . '... Meer';
} else {
$beschrijving = $advertentie->omschrijving;
}
echo $beschrijving;
?>
</p>
</div>
</div>
</div>
<?php
}
?>
You can view a live example at http://www.coupontrade.nl/ the content should be displayed under "Recente advertenties" and above the twitter part.

Categories