html output formatting php - php

I am trying to format some html output from my db using php and here's my problem:
How it should be formated:
...
<li>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-1</div>
<div class="some-class-1">ARRAY-ELEMENT-2</div>
<div class="some-class-1">ARRAY-ELEMENT-3</div>
<div class="some-class-2">ARRAY-ELEMENT-4</div>
</div>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-5</div>
<div class="some-class-1">ARRAY-ELEMENT-6</div>
<div class="some-class-1">ARRAY-ELEMENT-7</div>
<div class="some-class-2">ARRAY-ELEMENT-8</div>
</div>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-9</div>
<div class="some-class-1">ARRAY-ELEMENT-10</div>
<div class="some-class-1">ARRAY-ELEMENT-11</div>
<div class="some-class-2">ARRAY-ELEMENT-12</div>
</div>
</li>
<li>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-13</div>
<div class="some-class-1">ARRAY-ELEMENT-14</div>
<div class="some-class-1">ARRAY-ELEMENT-15</div>
<div class="some-class-2">ARRAY-ELEMENT-16</div>
</div>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-17</div>
<div class="some-class-1">ARRAY-ELEMENT-18</div>
<div class="some-class-1">ARRAY-ELEMENT-19</div>
<div class="some-class-2">ARRAY-ELEMENT-20</div>
</div>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-21</div>
<div class="some-class-1">ARRAY-ELEMENT-22</div>
<div class="some-class-1">ARRAY-ELEMENT-23</div>
<div class="some-class-2">ARRAY-ELEMENT-24</div>
</div>
</li>
... etc.
Data is held inside an array gathered from mysql db, so far I got to this:
$num_thumbs = 4; //Number od elemets in a row
$result = myQueryFunction("SELECT * FROM table_name ORDER BY Id ASC");
$num_rows = mysql_num_rows($result);
if (!empty($num_rows)) {
while ($row = mysql_fetch_array($result)) {
$thumbs_array[] = "<a href=\"" . $row[0] . "\"><img src=\"" . $row[1] . "\"";
}
$thumb_p = "<div>\n";
mysql_free_result($result);
$i = 1;
foreach ($thumbs_array as &$thumb_link) {
if ($i == $num_thumbs) {
$i = 1;
$thumb_p .= "<div class=\"some-class-2\">" . $thumb_link . "</div>";
$thumb_p .= "</div>\n<div class=\"row-wrapper\">\n";
} else {
$thumb_p .= "\t\n<div class=\"some-class-1\">" . $thumb_link . "</div>";
$i++;
}
}
$thumb_p .= "\n</div>\n";
}
print($thumb_p);
this covers only this part of code formatting:
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-13</div>
<div class="some-class-1">ARRAY-ELEMENT-14</div>
<div class="some-class-1">ARRAY-ELEMENT-15</div>
<div class="some-class-2">ARRAY-ELEMENT-16</div>
</div>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-17</div>
<div class="some-class-1">ARRAY-ELEMENT-18</div>
<div class="some-class-1">ARRAY-ELEMENT-19</div>
<div class="some-class-2">ARRAY-ELEMENT-20</div>
</div>
<div class="row-wrapper">
<div class="some-class-1">ARRAY-ELEMENT-21</div>
<div class="some-class-1">ARRAY-ELEMENT-22</div>
<div class="some-class-1">ARRAY-ELEMENT-23</div>
<div class="some-class-2">ARRAY-ELEMENT-24</div>
</div>
I've been thinking of using some variable $newList = null; that will be updated at each row, so I can check if it has changed the next one.
any ideas? Thanks in advance :)

It seems you're trying to put an li every three div. In this case, you can do this :
$thumb_p = "<li>\n<div class=\"row-wrapper\">\n";
mysql_free_result($result);
$i = 1;
$j = 0;
foreach ($thumbs_array as &$thumb_link) {
if ($i == $num_thumbs) {
$i = 1;
$thumb_p .= "<div class=\"some-class-2\">" . $thumb_link . "</div>";
$thumb_p .= "</div>\n";
if($j == 3)
{
$thumb_p .= "</li>\n<li>";
$j = 0;
}
$thumb_p .= "<div class=\"row-wrapper\">\n";
$j++;
} else {
$thumb_p .= "\t\n<div class=\"some-class-1\">" . $thumb_link . "</div>";
$i++;
}
}
$thumb_p .= "\n</div>\n</li>\n";
I can't actually try it but I think it's okay. A li is added every three row-wrapper you print.

Related

Dynamically building bootstrap row, 3 per row

I am not sure the best way to go about this, on a site i'm building (using bootstrap) i want to have 3 cards per row using the grid system like:
HTML:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Which is no problem normally, but i'm building it (or trying to) dynamically:
PHP:
<main>
<br /><br /><br />
<?php
$pages = array_slice(scandir($_SERVER['DOCUMENT_ROOT']), 2);
$mixed = shuffle($pages);
$count = 0;
echo '<div class="container"><div class="row">';
foreach($pages as $page)
{
$count++;
if (strpos($page, '.php') !== false && $page != 'index.php') {
$html = file_get_contents($page);
$code = explode("|", extractXvideos($html));
?>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="<?= $code[3]; ?>" class="card-img-top" alt="<?= $code[0]; ?>">
<div class="card-body">
<p class="card-text"><?= substr($code[0], 0, 25); ?> ...</p>
</div>
</div>
</div>
<?php
if ($count == 18) {
// The reason only 15 is showing is because we ignore ".", ".." & "index.php".
break;
}
}
}
echo '</div></div>';
?>
</main>
For this project i'm scanning .php pages on the server, then trying to lay them out 3 per row, so after every row of 3 i need to start a new row echo '<div class="container"><div class="row">'; from what i can see, i do not know the best way to go about this, any help would be appreciated.
main
<?php
$pages = array_slice(scandir($_SERVER['DOCUMENT_ROOT']), 2);
$mixed = shuffle($pages);
$count = 0;
$output = '';
foreach($pages as $page) {
$count++;
if (strpos($page, '.php') !== false && $page != 'index.php') {
$html = file_get_contents($page);
$code = explode("|", extractXvideos($html));
$output .= '<div class="container">';
$output .= '<div class="row">';
$output .= '<div class="col">Column</div>';
$output .= '<div class="col">Column</div>';
$output .= '<div class="col">Column</div>';
$output .= '</div>
$output .= '</div>';
}
}
echo $output;
?>
main
try this template and apply your conditions.

Two Pictures in one row in a large gallery

I have a Problem:
I coded a whole gallery with bootstrap and in this gallery are gaps. There are 100 pictures on 7 pages and instead of going down in one picture block it has gaps between it. This follows no obvious order.
Here is a picture:
So I wanted to take the whole col-md etc and picture container away and make my own columns. So that it works properly, but my solution from the internet doesn't work... I think it must be a problem with PHP that it is in a For loop and not in pure HTML like in the solutions. But I don't know how to solve it.
Here is the PHP code before:
<?php
//require_once("galerie-config.php");
if (!isset($_GET['pageindex'])) {
$_GET['pageindex'] = "1";
}....
<script type='text/javascript' src='../js/Bateaux/jquery/jquery.js'></script>
<script type='text/javascript' src='../js/Bateaux/jquery/jquery-migrate.min.js'></script>
<script type='text/javascript' src='../revslider/public/assets/js/jquery.themepunch.tools.min.js'></script>
<script type='text/javascript' src='../revslider/public/assets/js/jquery.themepunch.revolution.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var BateauxOptions = {"ajax_url":"../js/admin-ajax.html"};
/* ]]> */
</script>
<script type='text/javascript'>
/* <![CDATA[ */
var mejsL10n = {
"language": "en-US",
"strings": {
"Close": "Close",
"Fullscreen": "Fullscreen",
"Download File": "Download File",
"Download Video": "Download Video",
"Play\/Pause": "Play\/Pause",
"Mute Toggle": "Mute Toggle",
"None": "None",
"Turn off Fullscreen": "Turn off Fullscreen",
"Go Fullscreen": "Go Fullscreen",
"Unmute": "Unmute",
"Mute": "Mute",
"Captions\/Subtitles": "Captions\/Subtitles"
}
};
var _wpmejsSettings = {
"pluginPath": "../js\/mediaelement\/"
};
/* ]]> */
</script>
<script type='text/javascript' src='../js/Bateaux/hoverIntent.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/main-vendors.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/main.min.js'></script>
<!-- INNER BANNER STARTS
========================================================================= -->
<div class="inner-banner" style="background-color:#fff;">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Referenzen</li>
<li class="active">Galerie</li>
</ol>
<h1>Galerie</h1>
</div>
</div>
<!-- /. INNER BANNER STARTS
========================================================================= -->
<!-- PORTFOLIO STARTS
========================================================================= -->
**<div class="container contents portfolio">
<div class="row no-gutter-6">
<?php
require_once("dbh.php");
$numPicturesPerPage = 20;
//$seiten = [0,1,2,3,4,5,6,7,8,9,10];
global $pageIndex;
$pageIndex = 1;
if (isset($_GET['pageindex'])) {
$pageIndex = $_GET['pageindex'];
}
$bildauswahl = $numPicturesPerPage * ($pageIndex -1);
$sql = "SELECT * FROM galeriebilder LIMIT $bildauswahl,$numPicturesPerPage";
$rows = $dbh->query($sql);
$imgPathNames = [];
$i = 0;
foreach ($rows as $row) {
//for ($i=0;$i<$numPicturesPerPage;$i++) {
$bildcode = $row['bildcode'];
//array_push($imgPathNames, $bildcode);
$i++;
echo "<!-- Picture Starts -->";
***echo "<div class='col-lg-6 col-md-6 col-sm-6'>";
echo "<div class='picture'>";
echo "<img id='aquarium-galerie-" . $i . "' src='../images/galerie/". "$bildcode" . "'" . " onclick='alert(\"" . $bildcode . "\")' class='img-responsive editable' alt='' />";
echo "</div>";
echo "</div>";
//}***
?>
<!-- Picture Ends -->
<?php
}
?>
</div>
<div class="row">
<!-- Picture Starts -->
<?php
global $numPages;
$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row){
global $numPictures;
$numPictures = $row[0];
}
$biggerThan = $numPictures % $numPicturesPerPage;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($biggerThan > 0) {
$numPages++;
}
if (preg_match("/d+/", $pageIndex, $matches)) { $pageIndex = $matches[0]; } // Filtert die Zahl aus z.B. 2.php heraus
function navSeiten($aktuell,$gesamt) {
$pageIndex = $_GET['pageindex'];
$next = $aktuell + 1;
$previous = $aktuell - 1;
$ausgabe = '<ul class="pager">';
if ($aktuell <= 3 ) {
$seiten = array(1,2,3,4,5);
}else if ($aktuell == $gesamt -3 ) {
$seiten = array($aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}else if ($aktuell >= $gesamt -3 ) {
$seiten = array($gesamt -4 , $gesamt -3, $gesamt -2 , $gesamt -1, $gesamt );
} else {
$seiten = array( $aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}
//echo ($pageIndex);
?>
<li class="previous" style="<?php
if ($pageIndex == "1" ) { echo "display:none ";} ?>" >
<a href="galerie.php?pageindex=' . $previous . '" aria-label="Previous">
<span aria-hidden="true"></span>
</a>
</li>
<?php
foreach ($seiten as $seite) {
if ($seite == $pageIndex) {
$ausgabe .= '<li class="active">' . $seite . '</li>';
} else {
$ausgabe .='<li>' . $seite . '</li>';
}
}
?><li class="next" style="
<?php
/*$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row) {
$numPictures = $row[0];
}*/
$numPicturesPerPage = 20;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($pageIndex == $numPages ) { echo "display:none"; }
?>" >
<a href="galerie.php?pageindex=' . $next . '" aria-label="Next">
<span aria-hidden="true"></span>
</a>
</li>
<?php
//echo $numPages;
echo $numPictures;
$ausgabe .= '</ul>';
return $ausgabe;
}
?>
<div class="col-lg-12 no-gutter-12 pagging">
<?php echo navSeiten($pageIndex,$numPages) ?> <!-- Dies ist der Funktionsaufruf der Funktion die die komplette Leiste der Seitenaufrufe-->
</div>
</div>
</div>
<!-- /. PORTFOLIO ENDS**
========================================================================= -->
<!-- FOOTER STARTS
========================================================================= -->
<footer class="parallax-1">
<!-- Social Media Starts -->
<div class="social-media transparent-black-bg" style="background-color:#000;">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Facebook</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Youtube</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Instagram</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<div class="caption">Google+</div>
</div>
</div>
</div>
</div>
<!-- Social Media Ends -->
<!-- Contact Info Starts -->
<div class="contact-info" style="background-color:#313131;">
<div class="container">
<div class="row">
<!-- Address Starts -->
<div class="col-lg-3 col-md-3 col-sm-3 address">
<div class="footer-logo"><img src="../images/Startseite/Logo-Footer.png" class="img-responsive" alt="Logo von Biological Aqua Dreams (eine Koralle)" style="margin-left:0;"></div>
<address>
<strong>KONRAD-HAUSSMANN-WEG 6<br>
D-73614 SCHORNDORF</strong>
<div class="phone">+49 176 6316 1653</div>
<div>INFO#BIOLOGICAL-AQUA-DREAMS.COM</div>
</address>
<div class="about">Sie haben Fragen? Kontaktieren Sie uns einfach telefonisch oder per Email.</div>
</div>
<!-- Address Ends -->
<!-- Blog Posts Starts -->
<div class="col-lg-4 col-md-4 col-sm-4 latest-posts">
<h1>ALLES AUF EINEN BLICK</h1>
<div class="post">
<h2>Unsere Leistungen </h2>
<div class="info"><span class="user">Erfahren Sie mehr über uns</span></div>
</div>
<div class="post">
<h2>Wartung und Reparatur</h2>
<div class="info"><span class="user">Wir sind für Sie da</span></div>
</div>
</div>
<!-- Blog Posts Ends -->
<!-- Get in Touch Starts -->
<div class="col-lg-5 col-md-5 col-sm-5 get-in-touch">
<h1>KONTAKT AUFNEHMEN</h1>
<form action='../process.php' method='post' name='ContactForm' id='ContactForm'>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email *">
</div>
<textarea rows="5" class="form-control" name="comment" placeholder="Nachricht *"></textarea>
<div id='message_post'></div>
<input class="btn btn-default" type='submit' value='SENDEN' name='submitf' id="submitf" style="outline:none;">
</form>
</div>
<!-- Get in Touch Ends -->
</div>
</div>
</div>
<!-- Contact Info Ends -->
<!-- Copyright Starts -->
<div class="copyright light-grey-bg">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">© 2018 BIOLOGICAL AQUA DREAMS |
DATENSCHUTZ | IMPRESSUM</div>
<div class="col-lg-4 col-md-4 col-sm-4 created-by">Created by Crew Ad</div>
</div>
</div>
</div>
<!-- Copyright Starts -->
</footer>
....
And here after my solution:
<div class="container contents portfolio">
<div class="row no-gutter-6">
<?php
require_once("dbh.php");
$numPicturesPerPage = 20;
//$seiten = [0,1,2,3,4,5,6,7,8,9,10];
global $pageIndex;
$pageIndex = 1;
if (isset($_GET['pageindex'])) {
$pageIndex = $_GET['pageindex'];
}
$bildauswahl = $numPicturesPerPage * ($pageIndex -1);
$sql = "SELECT * FROM galeriebilder LIMIT $bildauswahl,$numPicturesPerPage";
$rows = $dbh->query($sql);
$imgPathNames = [];
$i = 0;
foreach ($rows as $row) {
//for ($i=0;$i<$numPicturesPerPage;$i++) {
$bildcode = $row['bildcode'];
//array_push($imgPathNames, $bildcode);
$i++;
echo "<!-- Picture Starts -->";
//echo "<div class='col-lg-6 col-md-6 col-sm-6'>";
echo "<div class='picture'>";
echo "<figure><img id='aquarium-galerie-" . $i . "' src='../images/galerie/". "$bildcode" .
"'" . "width='750px' height='500px' onclick='alert(\"" . $bildcode .
"\")' class='img-responsive pic editable' alt='' /></figure>";
echo "</div>";
//echo "</div>";
//}
?>
<!-- Picture Ends -->
<?php
}
?>
</div>
<div class="row">
<!-- Picture Starts -->
<?php
global $numPages;
$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row){
global $numPictures;
$numPictures = $row[0];
}
$biggerThan = $numPictures % $numPicturesPerPage;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($biggerThan > 0) {
$numPages++;
}
if (preg_match("/d+/", $pageIndex, $matches)) { $pageIndex = $matches[0]; } // Filtert die Zahl aus z.B. 2.php heraus
function navSeiten($aktuell,$gesamt) {
$pageIndex = $_GET['pageindex'];
$next = $aktuell + 1;
$previous = $aktuell - 1;
$ausgabe = '<ul class="pager">';
if ($aktuell <= 3 ) {
$seiten = array(1,2,3,4,5);
}else if ($aktuell == $gesamt -3 ) {
$seiten = array($aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}else if ($aktuell >= $gesamt -3 ) {
$seiten = array($gesamt -4 , $gesamt -3, $gesamt -2 , $gesamt -1, $gesamt );
} else {
$seiten = array( $aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
}
//echo ($pageIndex);
?>
<li class="previous" style="<?php
if ($pageIndex == "1" ) { echo "display:none ";} ?>" >
<a href="galerie.php?pageindex=' . $previous . '" aria-label="Previous">
<span aria-hidden="true"></span>
</a>
</li>
<?php
foreach ($seiten as $seite) {
if ($seite == $pageIndex) {
$ausgabe .= '<li class="active">' . $seite . '</li>';
} else {
$ausgabe .='<li>' . $seite . '</li>';
}
}
?><li class="next" style="
<?php
/*$sql ="SELECT count(bild_id) FROM galeriebilder";
$rows = $dbh->query($sql);
foreach ($rows as $row) {
$numPictures = $row[0];
}*/
$numPicturesPerPage = 20;
$numPages = intval(floor($numPictures / $numPicturesPerPage));
if ($pageIndex == $numPages ) { echo "display:none"; }
?>" >
<a href="galerie.php?pageindex=' . $next . '" aria-label="Next">
<span aria-hidden="true"></span>
</a>
</li>
<?php
//echo $numPages;
echo $numPictures;
$ausgabe .= '</ul>';
return $ausgabe;
}
?>
<div class="col-lg-12 no-gutter-12 pagging">
<?php echo navSeiten($pageIndex,$numPages) ?> <!-- Dies ist der Funktionsaufruf der Funktion die die komplette Leiste der Seitenaufrufe-->
</div>
</div>
</div>
Here is the CSS Code:
.picture {
clear:both;
}
.pic {
//float: left;
width:50%;
display:block;
}
figure {
display: table-cell;
text-align: center;
}
Sorry that it's now a mix of all solutions I found on the internet. I didn't changed it already.
I hope you can help me.
With kindly greetings Lukas Stetter

PHP - Adding 2 div to a foreach loop every 4 times with ACF Repeater

I have an ACF Repeater field i'd like to output as an accordion grid, like so:
<div class="intro row">
<div class="item item-1">name 1</div>
<div class="item item-2">name 2</div>
<div class="item item-3">name 3</div>
<div class="item item-4">name 4</div>
</div>
<div class="expanded row">
<div class="expand" id="item-1">expanded info 1</div>
<div class="expand" id="item-2">expanded info 2</div>
<div class="expand" id="item-3">expanded info 3</div>
<div class="expand" id="item-4">expanded info 4</div>
</div>
<div class="intro row">
<div class="item item-5">name 5</div>
<div class="item item-6">name 6</div>
<div class="item item-7">name 7</div>
<div class="item item-8">name 8</div>
</div>
<div class="expanded row">
<div class="expand" id="item-5">expanded info 5</div>
<div class="expand" id="item-6">expanded info 6</div>
<div class="expand" id="item-7">expanded info 7</div>
<div class="expand" id="item-8">expanded info 8</div>
</div>
I can group the initial row fine, it's just the second "expanded" row i'm having trouble with. How can I repeat and group the second row of 4 correctly in the same loop? My current PHP:
<?php // check if the repeater field has rows of data
if( have_rows('features') ):
// loop through the rows of data
// add a counter
$count = 0;
$group = 0;
while ( have_rows('features') ) : the_row();
$name = get_sub_field('feature_name');
$expandedInfo = get_sub_field('feature_info');
if ($count % 4 == 0) {
$group++;
?>
<div class="intro row">
<?php
}
?>
<div class="item item-<?php echo $count; ?>">
<?php echo $name ?>
</div><!-- item-->
<?php
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<?php
}
$count++;
endwhile;
else :
// no rows found
endif;
?>
The second 'expanded' row can be done so that you store each count (item-1,item-2) in an array or just traverse through all the count when you close the intro row.
<?php
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<div class="expanded row">
<?php
$start = $count-3;
// if $count is 4, $start will be 1, and the $i will go to 4
// if $count is 8, $start will be 5
for($i=$start;$i<=$count;$i++){
echo '<div class="expand" id="item-' . $i . '"></div>';
} ?>
</div>
<?php
}
This is just an example. I would suggest you to store each $count in an array and then use the count($array) to get the number of them. After you have traversed the array, reset it.
The Array Approach
<?php // check if the repeater field has rows of data
if( have_rows('features') ):
// loop through the rows of data
// add a counter
$count = 0;
$group = 0;
// Content Array
$content_array = array();
while ( have_rows('features') ) : the_row();
$name = get_sub_field('feature_name');
$expandedInfo = get_sub_field('feature_info');
// Adding the Expanded Info
$content_array[ 'item-' . $count ] = $expandedInfo;
if ($count % 4 == 0) {
$group++;
?>
<div class="intro row">
<?php
}
?>
<div class="item item-<?php echo $count; ?>">
<?php echo $name ?>
</div><!-- item-->
<?php
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<div class="expanded row">
<?php
foreach( $content_array as $item_id => $expanded_info ) {
echo '<div class="expanded" id="' . $item_id . '">';
echo $expanded_info;
echo '</div>';
} ?>
</div>
<?php
// Resetting the Array
$content_array = array();
}
$count++;
endwhile;
else :
// no rows found
endif;
?>
okey, lets see ,
using variables to store your templates may helps a lot in this context ,
as follow :
$intro = '';
$expanded = '';
while (have_rows('features')) :
the_row();
if ($count % 4 == 0) {
$group++;
$intro .= '<div class="intro row">';
$expanded .= '<div class="expanded row">';
}
$intro .= '<div class="item item-' . $count . '"></div><!-- item-->';
$expanded .= '<div class="expand" id="item-' . $count . '"></div>';
if ($count % 4 == 3) {
$intro = '</div><!-- intro-->';
$expanded = '</div><!-- intro-->';
}
$count++;
endwhile;
I've made a quick example to explain to show you how using variables may fix your issue : https://3v4l.org/cKPP4
Can't test it right now, but I think something like that should work.
<?php // check if the repeater field has rows of data
if( have_rows('features') ):
// loop through the rows of data
// add a counter
$count = 0;
$group = 0;
$array = array();
while ( have_rows('features') ) : the_row();
$name = get_sub_field('feature_name');
$expandedInfo = get_sub_field('feature_info');
if ($count % 4 == 0) {
$group++;
?>
<div class="intro row">
<?php
}
?>
<div class="item item-<?php echo $count; ?>">
<?php echo $name ?>
</div><!-- item-->
<?php
array_push($array, $expandedInfo);
if ($count % 4 == 3) {
?>
</div><!-- intro-->
<div class="expanded row">
<?php
for ($i=0; $i < count($array); $i++) {
echo '<div class="expand" id="item-'.$i + 1.'">'.$array[$i].'</div>';
}
echo '</div>';
}
$count++;
endwhile;
else :
// no rows found
endif;
?>

Iterating over 12 items specify markup up on nth items

Hi I am using Bootstrap 2 with a PHP content management system.
I am rendering 12 items from the database, each 3 items needs to be wrapped in a row. However I am unable to achieve this my last attempt is below (with simplified markup):
$i = 1;
echo "<div class='row-fluid'>";
foreach($posts as $p) {
if ($i % 3 == 0) {
echo "</div>";
}
if ($i % 4 == 0) {
echo "<div class='row-fluid'>";
}
echo "<div class='span4'><h5>$p->title</h5></div>";
$i++;
}
In affect what I am looking for is something like this:
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
<div class="row">
<div class="item></item>
<div class="item"</item>
<div class="item"></item>
</div>
I have tried everything I can think of any help would be great thanks.
Try if there are 12 rows :
echo "<div class='row-fluid'>";
foreach($posts as $p) {
echo "<div class='span4'><h5>$p->title</h5></div>";
if ($i % 3 == 0) {
echo "</div>";
echo ( $i< 12 )? "<div class='row-fluid'>" : "";
}
$i++;
}
I think this will work
$i = 0;
echo "<div class='row-fluid'>";
foreach($posts as $p) {
echo "<div class='span4'><h5>$p->title</h5></div>";
if ($i % 3 == 0) {
echo "</div><div class='row-fluid'>";
}
$i++;
}
echo "</div>";

How do I group a div in some class on MySQL while

I want add a different class on my MySQL result.
<?php while ($fetch = $db->fetch($query)) { ?>
<div class="result"><?php echo $fetch['title']; ?></div>
<?php } ?>
Output should be like this
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
Here, every 6 results will have <div class="group"></div>.
Let me know
<div class="group">
<?php
$count = 0;
while ($fetch = $db->fetch($query)) {
if (++$count == 6) {
echo '</div><div class="group">';
$count = 0;
}
echo '<div class="result">' . $fetch['title'] . '</div>';
}
?>
</div>
create a counter that increments every time the loop is ran, then at the beginning of each loop check the value. if the value == 6 then close the current div and open a new one with the class change (you could make 2 counters to flip flop back and forth). Reset your counter after the div change.
--edit added code--
Make yourself 2 'group' div classes, 'group1' and 'group0' for the flip-flop
<div class="group1">
<?php
$count = 0;
$divstyle = 1;
while ($fetch = $db->fetch($query)) {
if (++$count == 6) {
echo '</div><div class="group'.(++$divstyle % 2).'">';
$count = 0;
}
echo '<div class="result">' . $fetch['title'] . '</div>';
}
?>
</div>
This might be a bit bad...
<?php $cnt=0;while ($fetch = $db->fetch($query)) { ?>
<div class="result"><?php if($cnt%6==0){echo "<div class=\"group\">";} echo $fetch['title'];if($cnt%6==0){echo "</div>";} $cnt++;?></div>
<?php } ?>

Categories