PHP Bilder ausgeben: 3 Bilder pro Reihe mit Flex Problem

11/24/2017 01:37 Cc_Cc_Cc#1
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:

CSS

Wie es bei mir aussieht:

Wie es aussehen soll:
11/27/2017 08:41 andii#2
Verwende ein clearfix, damit sollte es gehen
11/28/2017 15:47 xShizoidx#3
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 Cc_Cc_Cc#4
Quote:
Originally Posted by xShizoidx View Post
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 Serraniel#5
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 False#6
Quote:
Originally Posted by Serraniel View Post
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 Masterkroko1#7
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 xShizoidx#8
Quote:
Originally Posted by Cc_Cc_Cc View Post
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 View Post
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 Masterkroko1#9
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 View Post
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 Ih¢sãs123#10
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 False#11
Quote:
Originally Posted by Masterkroko1 View Post
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.