Two Pictures in one row in a large gallery - php

Question

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">[phone]</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