|
You last visited: Today at 13:06
Advertisement
PHP Bilder ausgeben: 3 Bilder pro Reihe mit Flex Problem
Discussion on PHP Bilder ausgeben: 3 Bilder pro Reihe mit Flex Problem within the Web Development forum part of the Coders Den category.
11/24/2017, 01:37
|
#1
|
elite*gold: 0 
Join Date: Mar 2011
Posts: 418
Received Thanks: 17
|
PHP Bilder ausgeben: 3 Bilder pro Reihe mit Flex Problem
Tag Com!
Ein User hat auf seiner Seite Bilder hochgeladen. Jetzt müssen die auch angezeigt werden. Ich habe kurz etwas geschrieben alles funktioniert jedoch scheitert es 3 Bilder in eine Reihe zu kriegen. Es wird immer nur eins pro Reihe angezeigt.
PHP-Code:
PHP Code:
<?php
try {
if($stmt = $pdo->prepare(
"SELECT
u_post.p_id,
u_post.u_id,
u_post.post,
u_post.image_ordner,
u_post.p_like,
u_post.p_heart,
u_post.date,
user.id,
user.username
FROM u_post
LEFT JOIN user
ON u_post.u_id = user.id
ORDER BY DATE DESC")) {
if(!$stmt->execute()) {
print_r($stmt->errorInfo());
}
while($row = $stmt->fetchObject()) {
$articles[] = $row;
}
}
?>
<?php foreach($articles as $article): ?>
<article id="galerie">
<figure>
<a href="#"><?php echo '<img src="' . $article->image_ordner . '">'; ?></a>
<p class="left_info"><button type="button" class="heart_index"><i class="fa fa-heart-o" aria-hidden="true"></i></button> <a href="#" class="like_detail"><?php echo $article->p_like; ?></a></p>
<p class="right_info"><button type="button" class="comment_index"><i class="fa fa-comment-o" aria-hidden="true"></i></button> <a href="#" class="comment_detail"><?php echo $article->p_like; ?></a></p>
</figure>
<?php endforeach; ?>
<?php } catch(PDOException $err) {
print_r($err->getMessage());
} ?>
</article>
CSS
HTML Code:
main #galerie {
width:100%;
margin:0 auto;
text-align:center;
display:flex;
flex-flow: row wrap;
justify-content: space-around;
padding-left:1em;
padding-right:1em;
padding-top:1em;
}
main #galerie figure {
flex-basis: 30%;
flex-grow: 0;
flex-shrink: 1;
padding-bottom:1em;
}
main #galerie img {
width:100%;
height:auto;
}
main #galerie p {
line-height:0;
padding-left:0.688em;
}
main #galerie p.left_info {
display:inline-block;
width:45%;
margin-left:-4px;
vertical-align:middle;
text-align:left;
}
main #galerie p.left_info button {
border:0;
padding:0;
background:#fff;
cursor:pointer;
}
main #galerie p.right_info {
display:inline-block;
width: 50%;
vertical-align:middle;
text-align:right;
}
Wie es bei mir aussieht:
Wie es aussehen soll:
|
|
|
|
11/27/2017, 08:41
|
#2
|
Administrator
elite*gold: 28390
Join Date: Aug 2013
Posts: 9,902
Received Thanks: 2,652
|
Verwende ein clearfix, damit sollte es gehen
|
|
|
|
|
11/28/2017, 15:47
|
#3
|
elite*gold: 0
Join Date: Feb 2011
Posts: 1,351
Received Thanks: 410
|
Hier mal ein einfaches Beispiel, wie du sowas mit dem Flexboxsystem umsetzen kannst:
HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
figcaption {
text-align: center;
}
.container {
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="container">
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
</div>
</body>
</html>
Denk bitte auch daran, dass du Benutzerausgaben escapen tust (XSS). Am Besten schickst du uns nächstes mal nur den kompletten HTML Code oder wenn du uns alles schicken willst, dann mach bitte auch ein SQL Dump, damit wir dir hier weiterhelfen können, weil das so echt blöd nachzuvollziehen ist.
|
|
|
|
|
11/28/2017, 22:40
|
#4
|
elite*gold: 0
Join Date: Mar 2011
Posts: 418
Received Thanks: 17
|
Quote:
Originally Posted by xShizoidx
Hier mal ein einfaches Beispiel, wie du sowas mit dem Flexboxsystem umsetzen kannst:
HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
figcaption {
text-align: center;
}
.container {
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="container">
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
<figure role="group" class="galerie-bild">
<img src="https://placeimg.com/300/150/any">
<figcaption>
ein tolles Bild
</figcaption>
</figure>
</div>
</body>
</html>
Denk bitte auch daran, dass du Benutzerausgaben escapen tust (XSS). Am Besten schickst du uns nächstes mal nur den kompletten HTML Code oder wenn du uns alles schicken willst, dann mach bitte auch ein SQL Dump, damit wir dir hier weiterhelfen können, weil das so echt blöd nachzuvollziehen ist. |
1. Danke für die Hilfe aber so bekomme ich es selber hin. Das Problem ist einfach das ich es mit einer foreach schleife laufen lasse um alle Beiträge sehen zu lassen. Das kann man so mit deinem Beispiel nicht machen.
2. Dies ist nur ein Text später werde ich alles mal escapen und hier rein posten dann könnt ihr wenn ihr gerne magt mach Sicherheitsfixx suchen ^^.
|
|
|
|
|
11/29/2017, 09:10
|
#5
|
elite*gold: 0
Join Date: May 2010
Posts: 6,853
Received Thanks: 5,106
|
Die Figures aus dem HTML Beispiel kannst du ja trotzdem im foreach erzeugen lassen. Sehe da jetzt direkt kein Problem außer das vermischen von PHP Code und HTML. Dafür benutzt man in der Regel Template Engines um sowas zu vermeiden. Kenne mich aber nicht sonderlich aus welche es da alles gibt, glaube aber mit Smarty kannst so nen Mischmasch wie da unterbinden zum Beispiel.
|
|
|
|
|
11/29/2017, 12:00
|
#6
|
elite*gold: 0
Join Date: Apr 2011
Posts: 11,115
Received Thanks: 2,436
|
Quote:
Originally Posted by Serraniel
Die Figures aus dem HTML Beispiel kannst du ja trotzdem im foreach erzeugen lassen. Sehe da jetzt direkt kein Problem außer das vermischen von PHP Code und HTML. Dafür benutzt man in der Regel Template Engines um sowas zu vermeiden. Kenne mich aber nicht sonderlich aus welche es da alles gibt, glaube aber mit Smarty kannst so nen Mischmasch wie da unterbinden zum Beispiel.
|
Kann Twig nur empfehlen.
|
|
|
|
|
11/29/2017, 13:57
|
#7
|
elite*gold: 0
Join Date: Jul 2010
Posts: 283
Received Thanks: 16
|
Mahlzeit,
wieso verwendet man eig etwas neues was php auch kann?
Ich bau doch auch kein einfaches Gartenhaus mit 20 verschiedenen Holzarten und jede Holzart hat dabei seine eigene Stärke, Längen und co. Das ist dann nicht mehr einfach das ist dann kompliziert.
Und was kann Twig jetzt mehr als php?
Ob man jetzt Twig oder PHP reinmischt ist ja egal da kommt bei beiden eine Mischung raus.
|
|
|
|
|
11/29/2017, 14:11
|
#8
|
elite*gold: 0
Join Date: Feb 2011
Posts: 1,351
Received Thanks: 410
|
Quote:
Originally Posted by Cc_Cc_Cc
1. Danke für die Hilfe aber so bekomme ich es selber hin. Das Problem ist einfach das ich es mit einer foreach schleife laufen lasse um alle Beiträge sehen zu lassen. Das kann man so mit deinem Beispiel nicht machen.
2. Dies ist nur ein Text später werde ich alles mal escapen und hier rein posten dann könnt ihr wenn ihr gerne magt mach Sicherheitsfixx suchen ^^.
|
1. Du kannst dein PHP Skript ja so umschreiben wie du lustig bist. Von daher kannst du es auch genauso umsetzen wie ich es geschrieben habe. Im Endeffekt erhälst du ja sowieso nur HTML Code. Du kannst ja mal den HTML Code (kein PHP Code!) sowie den Css Code kopieren, damit wir uns das mal anschauen können. Alternativ stellst du das Projekt online und schickst uns den Link.
Quote:
Originally Posted by Masterkroko1
Mahlzeit,
wieso verwendet man eig etwas neues was php auch kann?
Ich bau doch auch kein einfaches Gartenhaus mit 20 verschiedenen Holzarten und jede Holzart hat dabei seine eigene Stärke, Längen und co. Das ist dann nicht mehr einfach das ist dann kompliziert.
Und was kann Twig jetzt mehr als php?
Ob man jetzt Twig oder PHP reinmischt ist ja egal da kommt bei beiden eine Mischung raus.
|
Du hast halt eine Trennung zwischen der Logik und dem HTML Code, wodurch das halt übersichtlicher ist und sich ein Frontend Entwickler sich um das Frontend kümmern kann und der Backend Entwickler um die Backend Entwicklung. Würde man dies nur mit reinem PHP Code umsetzen sieht es scheußlich aus und für Entwickler, welche sich nie mit PHP beschäftigt haben, ist es dann schwieriger dort durchzusteigen (bei größeren Projekten).
|
|
|
|
|
11/29/2017, 19:57
|
#9
|
elite*gold: 0
Join Date: Jul 2010
Posts: 283
Received Thanks: 16
|
Warum ist das Übersichtlicher? Ob ich PHP-Code oder Twig drin stehen habe macht doch kein Unterschied außer minimal die Syntax. Und Entwickler die sich nie mit Twig auseinander gesetzt haben aber mit PHP dürfen nun was neues lernen das sie aber eig garnicht brauchen. Ich selbst kein Mehrwert sehe.
Frontend müssen ja auch nicht mit Twig lernen, sie können ja einfach PHP lernen ist jetzt auch nicht die Welt und sie können Frontend und zunot auch etwas im Backend bearbeiten.
Vll. bin ich altmodisch aber ich verstehe den Sinn nicht.
Weiß nicht ich finde die Entwicklung erschreckend. Als wir letztens in der Firma was umsetzen wollten kam ein Mitarbeiter mit gefühlt 20 Sachen um die Ecke die das leben "erleichtern" soll letzendlich konnte man alles mit 4 Standard Sachen abdecken.
Und ja ich hab mir die Sachen zum größten Teil angeschaut. Leider muss ich auch zum Teil mit den Arbeiten. Wenn ich aber die Entscheidung treffe dann kommt mir sowas nicht in Haus.
Übersichtlich = einfach = wenig verschiedene Sprachtypen verwenden.
Das ist ja so wenn ich ein Programm welches komplett mit C# abdeckbar wäre zum teil mit Java dazu ein Stück C++ und VBA beinhaltet.
Quote:
Originally Posted by xShizoidx
Du hast halt eine Trennung zwischen der Logik und dem HTML Code
|
Naja hat man mit PHP auch und wenn schleifen Logik ist dann gibt es keine Trennung da twig auch schleifen hat.
Naja das ist jetzt ein anderes Thema. In meiner Welt ist das halt einfach mehr Ballast als Hilfe.
|
|
|
|
|
11/30/2017, 13:52
|
#10
|
elite*gold: 2
Join Date: May 2010
Posts: 2,254
Received Thanks: 1,919
|
Meiner Meinung nach kann man mit Twig o.ä. schneller bzw. neue Designs drüber klatschen und das Backend behalten -> im LastChaos Bereich könnte man so die Websiten für die PrivatServer schnell vervielfältigen und gut verkaufen.
Allgemein mische ich meistens aber auch php mit html, je nachdem was ich eben vor hab, bei einer statischen Seite(niemals eine Designänderung).
|
|
|
|
|
12/01/2017, 02:37
|
#11
|
elite*gold: 0
Join Date: Apr 2011
Posts: 11,115
Received Thanks: 2,436
|
Quote:
Originally Posted by Masterkroko1
Warum ist das Übersichtlicher? Ob ich PHP-Code oder Twig drin stehen habe macht doch kein Unterschied außer minimal die Syntax. Und Entwickler die sich nie mit Twig auseinander gesetzt haben aber mit PHP dürfen nun was neues lernen das sie aber eig garnicht brauchen. Ich selbst kein Mehrwert sehe.
Frontend müssen ja auch nicht mit Twig lernen, sie können ja einfach PHP lernen ist jetzt auch nicht die Welt und sie können Frontend und zunot auch etwas im Backend bearbeiten.
Vll. bin ich altmodisch aber ich verstehe den Sinn nicht.
Weiß nicht ich finde die Entwicklung erschreckend. Als wir letztens in der Firma was umsetzen wollten kam ein Mitarbeiter mit gefühlt 20 Sachen um die Ecke die das leben "erleichtern" soll letzendlich konnte man alles mit 4 Standard Sachen abdecken.
Und ja ich hab mir die Sachen zum größten Teil angeschaut. Leider muss ich auch zum Teil mit den Arbeiten. Wenn ich aber die Entscheidung treffe dann kommt mir sowas nicht in Haus.
Übersichtlich = einfach = wenig verschiedene Sprachtypen verwenden.
Das ist ja so wenn ich ein Programm welches komplett mit C# abdeckbar wäre zum teil mit Java dazu ein Stück C++ und VBA beinhaltet.
Naja hat man mit PHP auch und wenn schleifen Logik ist dann gibt es keine Trennung da twig auch schleifen hat.
Naja das ist jetzt ein anderes Thema. In meiner Welt ist das halt einfach mehr Ballast als Hilfe.
|
Ich weiß ja nicht an was du arbeitest, aber wenn du nur simple Strukturen hast dann kannst du es auch ordentlich mit php machen.
Aber sobald du mit Vererbung, includieren etc. anfängst dann muss man x mal durch deinen Code gucken um zu gucken was wo gemacht wird.
Dazu kommt das du im php ein riesen scope hast anstatt für jeden include dein scope wo du einfach die nötigen variablen übergibst.
Dazu kommen dann noch einige Hilfsfunktionen die einfach nützlich sind.
Du kannst simple Blöcke erstellen die du auf bestimmten Seiten einfach überschreibst.
Im php müsste man html in einer variable speichern, diese ggf. überschreiben und am ende ausgeben.
|
|
|
|
 |
Similar Threads
|
[Selling] EUW |SoloQ Gold 1 | Flex 5v5 Silver 1 | Flex 3v3 Gold 5 | UNVERIFIED
11/06/2017 - League of Legends Trading - 0 Replies
Hey,
I want to sell a smurf Account of mine.
It is:
Gold 1 99LP SoloQ
Silver 1 87LP Flex 5v5
Gold 5 0LP Flex 3v3
|
[Selling] 2 acc LOL EUNE Platinum 4 flex, unranked soloq and unranked soloq/flex
02/27/2017 - League of Legends Trading - 0 Replies
Screens:
FIRST ACCOUNT:
https://snag.gy/YVctnu.jpg
https://snag.gy/9F8kA0.jpg
https://snag.gy/YfwWnU.jpg
https://snag.gy/gZIeBd.jpg
|
[Buying] Need platinum/diamond FLEX ranked account to flex boost with. Rent/buy.
12/15/2016 - League of Legends Trading - 1 Replies
I want to play FLEX ranked with diamond premades, but dont have an account with platinum flex rank. EUW.
|
Für wow geld ausgeben oder für free to play games geld ausgeben?
09/22/2013 - General Gaming Discussion - 5 Replies
Hallo,
was meint ihr sollte man für freetoplay spiel, wo paytowin herrscht, dafür sein Geld ausgeben, damit man für eine permanente (Beispiel) waffe 25€ ausgibt oder sollte man das Geld lieber in wow reinstecken und halt nur ne begrenzte Zeit spielen, man kann bei freetoplay ja immer spielen, aber bei wow hast du ja alle "Waffen" für immer, also was meint ihr sollte man in wow das Geld reinstecken oder eher in ein paytowin system es reinsteken? :)
|
All times are GMT +1. The time now is 13:07.
|
|
