Frage zu einem PHP script

[einsiedler]

Hallo liebe Forumer,

ich habe folgendes Problem mit einem PHP script.

Aber vorab zur Erklärung: Zuallererst wird das script ImagesController.php aufgerufen, das Bilder aus einem Ordner der Reihe nach aufruft. Die Bilder liegen im Ordner mit dem Pfad ./mediaordner/arbeit01/ und sehen so aus: 01-01.jpg , 01-02.jpg , 01-03.jpg --> 01-10.jpg

So, hier nun das script das alle meine Daten an einem Platzhalter in meiner layout.html einfügt. Die Bilder werden wie erwartet angezeigt. NUR eben halt nicht die Daten die aus der datei.json ausgelesen werden, DIE werden NICHT angezeigt. Was ist da falsch?

Anbei nun a) meine index.php , wovon alles ausgeht, b) mein figure.html , das .html das mit index.php in mein layout.html am Platzhalter eingefügt wird und C) einen Auszug aus meiner datei.json und d) ein screen meiner ImagesController.php

Wo liegt da nun mein Fehler?

meine index.php

<?php
const LAYOUT_HTML_FILE_PATH = './layout.html';
const WIDGETS_FOLDER_PATH = './widgets/';
include_once './ImagesController.php';
$ImgCtrl = new ImagesController( './mediaordner/arbeit01/' );
$aImages = $ImgCtrl->ReadImagesData()->KeySort()->Get();
$_LayoutHtml = file_get_contents( LAYOUT_HTML_FILE_PATH );
$_FiguresHml = file_get_contents( WIDGETS_FOLDER_PATH . 'figures.html' );
$jFileContent = file_get_contents( 'datei.JSON' );
$jObject = json_decode( $jFileContent );
$_FiguresRendered = array_map(
		function ( $img ) use ( $_FiguresHml ) {
			return strtr(
					$_FiguresHml
					, [
						'{headline}' => $jObject -> {$img} -> headline,
						'{titel}' => $jObject -> {$img} -> titel,
						'{subtext}' => $jObject -> {$img} -> subtext,
						'{img.path}' => $img['path'],
						'{img.width}' => $img['size']['width'],
						'{img.height}' => $img['size']['height']
					]
				);
		}
		, $aImages
	);
echo str_replace( '{figures}', implode($_FiguresRendered), $_LayoutHtml );
?>

b) figure.html

<figure>
    <h3>{headline}</h3>
    <h4>{title}</h4>
    <img src="{img.path}" width="880px" height="880px" alt="{headline}" style="width:{img.width}vw; height:{img.height}vw;">
        <figcaption>{subtext}</figcaption>
</figure>

c)

{
  "01-01.jpg": {
	"headline" : "Drifters, 2012",
	"title" : "Perfor­mance",
	"subtext" : "<span>Das war eine Performance auf dem Wasser</span><span>Kunsthalle Münster,</span><span>Speicher II, Münster</span>"
  },
  "01-02.jpg": {
	"headline" : "Berge versetzen, 2008",
	"title" : "Raum&shy;installa&shy;tion",
	"subtext" : "<span>Stiftung Künstlerdorf,</span><span>Schöppingen</span>"
  },
  
  [ ... ]

  "01-09.jpg": {
	"headline" : "RTFM, 2015",
	"title" : "Raum&shy;installa&shy;tion",
	"subtext" : "<span>Das ist eine karte von kaspar König zur Ausstellung RTFM</span><span>Kunsthalle Münster,</span><span>Speicher II, Münster</span>"
  },
  "01-10.jpg": {
	"headline" : "Drifters, 2012",
	"title" : "Perfor&shy;mance",
	"subtext" : "<span>Das ist der Einladungsflyer</span><span>Kunsthalle Münster,</span><span>Speicher II, Münster</span>"
  }
} 

d) meine ImagesController.php

Vielen Dank für eure HILFE!

LG der (ratlose) einsiedende

[pl]

<img src="{img.path}"

Wo ist denn der Wert für diesen Platzhalter?

alt="{headline}"

Wird dieser Wert ausgegeben? Also prüf mal Deine Platzhalternamen und die Daten die zum Rendern geschickt werden. MFG

[einsiedler]

Hallo pl,

Wie gesagt, die IMG`s selbst werden ordentlich angezeigt also muss der Pfad stimmen.

Der steht in der index.php ==> $ImgCtrl = new ImagesController( './mediaordner/arbeit01/' );

und wird weiterverarbeitet im ImagesController.php

NUR eben die übrigen Platzhalter in <figures> mit den Informationen "headline", "title" und "subtext" werden NICHT ausgegeben.

b) Genau da liegt mein Problem: "headline", "title" und "subtext" werden NICHT ausgegeben Dieses soll ja in meine figures.html eingefügt werden, wenn es normal läuft, das tut es aber nicht.

Wo ist da mein gedanklicher Fehler?

Bitte um mithilfe.

Der einsiedelnde

[pl]

Hi,

so wies aussieht machst Du zum Erstenmal was mit Smarty/Templates. Da solltest Du Dich mal ein bischen intensiver damit befassen. D.h., dieses Rendern (bei Smarty heißt das assign) bekommt ein Template und ein Array mit den Daten. Genau das muss man nicht unbedingt über HTTP und einen Browser schleifen. Für den Anfang ists besser das alles zusammen auf der Kommandozeile zu tun um sich damit vertraut zu machen.

Und dann überlege Dir eine Strategie wie Dein Template für den Browser zu rendern wäre. Auf jeden Fall serverseitig und siehe da, den JSON brauchst Du da gar nicht. Was Du brauchst, ist ein Array mit den ins Template zu rendernden Daten und das ist alles PHP.

Erst nach dem Rendern wird das Template ausgeliefert, sprich: in den Ausgabepuffer geschrieben. Auf gehts 😉

[einsiedler]

Hallo pl, ich verstehe nur Bahnhof. Da ich momentan unter Zeitdruck bin und ich endlich mein Projekt fertig bekommen möchte muss mir das jemand machen, zurnot auch gegen Bezahlung. seufZ

P.S. Zusammen mit einem anderen Helfer ist mein "Projekt" extra so angelegt, d.h., das ich später einmal nur noch meine Infos`s in der .json zu ändern brauche, wenn Änderungen anstehen, das es so am leichtesten ist, deshalb ist alles so angelegt. Ich dachte auch, es ist von Vorteil. Jetzt macht ihr mir wieder alles kaputt und zerredet es. seufZ Das macht mich ratlos.

der einsiedelnde

[dedlfix]

Tach!

Was ist da falsch?

Das herauszufinden ist Aufgabe des Debugging. Jede Operation in deinem Codes soll etwas bestimmtes tun. Einige nehmen Daten entgegen, einige erzeugen/besorgen welche, einige tun beides. Mit Debugging überprüft man, ob diese Operationen auch das tun, was man konkret von ihnen erwartet. Also bau Kontrollausgaben ein, am besten mit var_dump(), und finde so die problematische Stelle, an der die Daten nicht wie erwartet sind.

Ein zusätzliches Mittel ist, das error_reporting auf E_ALL zu stellen (und display_errors einzuschalten), damit PHP auch auf nebensächlich scheinene Probleme hinweist.

dedlfix.

[TS]

Hello,

deinen Skripten fehlt jegliche Fehlerbehandlung.
Da man im laufenden Betrieb die Fehler immer mindestens in zwei Gruppen unterscheiden sollte, solltest Du dir zuallererst Gedanken über die Klassifizierung machen:

• schwere nicht vorhersehbare (System-)Fehler

• vorhersehbare und ggf. behebbare Fehler; variantes situations- und benutzerabhängiges Laufzeitverhalten

Dazu gehört dann auch das von Dedlfix bereits angemahnte Debugging. Das hilft beim Fehlerfinden der zweiten Kategorie. Diejenigen (nicht behebbaren) der ersten Kategorie sollten durch Logging auffindbar sein. Das fehlt deinen Skripten außerdem.

Glück Auf
Tom vom Berg

[Gunnar Bittersmann]

@@einsiedler

b) figure.html

<figure>
    <h3>{headline}</h3>
    <h4>{title}</h4>
    <img src="{img.path}" width="880px" height="880px" alt="{headline}" style="width:{img.width}vw; height:{img.height}vw;">
        <figcaption>{subtext}</figcaption>
</figure>

Das Markup stimmt so nicht. Von innen nach außen:

Es macht wenig Sinn, als Alternativtext alt="{headline}" anzugeben, wo ebendieser Inhalt {headline} schon im h3-Element steht. In dem Fall ist wohl ein Leerstring angebracht: alt="".

Man könnte die Zuordnung übers aria-labelledby-Attribut herstellen. Dazu braucht dann jede Bildüberschrift eine eigene ID:

	<h3 id="{id}">{headline}</h3> …
	<img src="{img.path}" alt="" aria-labelledby="{id}" …/>

Es wäre aber zu überdenken, ob aria-labelledby auf den Inhalt von {headline} oder von {subtext} zeigen sollte.

Die Angaben width="880px" height="880px" sind falsch; die Werte müssen Zahlen (ohne px) sein. Aber wozu soll das überhaupt gut sein? Wenn die Angabe style="width:{img.width}vw; height:{img.height}vw;" nicht greift (bspw. in alten Browsern, die vw nicht verstehen), sollen alle Bilder auf 880 × 880 Pixel verzerrt werden?

Bildbreite in vw? Wie groß sind die Werte dafür? Sollen die Bilder auf schmalen Viewports unkenntlich klein dargestellt werden?

Die Überschriftenhierarchie stimmt nicht; {title} ist keine Unterüberschrift zu {headline}, h4 ist falsch. Entweder

	<h3>
		<span class="headline">{headline}</span>
		<span class="title">{title}</span>
	</h3>

oder

	<header>
		<h3>{headline}</h3>
		<span>{title}</span>
	</header>

Ich glaube aber nicht, dass {headline}/{title} überhaupt Überschriften im Sinne der Dokumentstruktur sind. Folglich:

<figure>
	<span class="headline">{headline}</span>
	<span class="title">{title}</span>
	<img …/>
	<figcaption>{subtext}</figcaption>
</figure>

Ich glaube auch nicht, dass die Bilder einer Galerie figure-Elemente (“typically referenced as a single unit from the main flow of the document” [HTML]) sind.

Es sind eher Items in einer Liste:

<ul>
	<li>
		<span class="headline">{headline}</span>
		<span class="title">{title}</span>
		<img …/>
		<span class="subtext">{subtext}</span>
	</li>
	⋮
</ul>

Oder ggfs. ol.

LLAP 🖖

[Rolf B]

Hallo Tassilo,

überlege Dir:

• was gibt der Image-Controller bei Get() zurück?
• was tut array_map?
• was ist eigentlich $img, wenn Du im array_map Callback bist? Der key des aImages Array? Oder der value?

Spoiler: verwende lieber foreach statt array_map und ein Temp-Array, an das Du die übersetzten Templates anhängst. Oder gleich eine Stringvariable. Es gibt zwar einen Trick^[1], um im array_map Callback Key und Value eines assoziativen Arrays zu bekommen, aber den finde ich persönlich eher hässlich.

Und dann sollten sich Tassilo und der Einsiedelnde noch auf die Schreibweise von titel einigen.

Rolf

---

1. chreekat may be miffed about array_map, but I am miffed about php.net page anchors and position:fixed headers 😟 ↩︎

[einsiedler]

Lieber Rolf, das ist mir alles zu hoch , ich bin da angewiesen auf jemanden der das wirklich kann. seufZ

Wie gesagt : die <figure>`s stehen in meinem Quellcode drin, wie es soll.

Die IMG werden ordentlich angezeigt,

NUR eben die übrigen Platzhalter in <figures> mit den Informationen "headline", "title" und "subtext" werden NICHT ausgegeben.

der einsiedelnde

[einsiedler]

Hier ist das layout.html wo an der gelb markierten Stelle mein Platzhalter ist worin die einzelnen <figure> hineingesetzt werden.

Wie gesagt : die <figure>`s stehen in meinem Quellcode drin, wie vorrauszusehen. Die IMG werden ordentlich angezeigt, NUR eben die übrigen Platzhalter in <figures> mit den Informationen "headline", "title" und "subtext" werden NICHT ausgegeben.

Bitte helft mir:

Wo bitte liegt mein Fehler? Das mit den debugging verstehe ich nicht! Könnt ihr mir helfen?

Gruß der einsiedelnde

[dedlfix]

Tach!

Das mit den debugging verstehe ich nicht! Könnt ihr mir helfen?

Du musst dir selbst helfen, denn nur du sitzt vor deinem System und kannst es untersuchen. Debugging geht grundlegend wie folgt. Gegeben sei als Beispiel diese Zeile Code.

$a = 42 + 23;

Was steht nun in $a? Nein, nicht du sollst das rechnen, du sollst das Script fragen, was es herausbekommen hat.

$a = 42 + 23;
var_dump($a);

Die Ausgabe wird sein:

int(65)

... und daraus ist zu entnehmen, dass sich in $a ein Integer mit dem Wert 65 befindet. Wenn das Ergebnis den Erwartungen entspricht, kann das var_dump() wieder weg. Man kann auch echo statt var_dump() nehmen, aber dessen Ausgabe ist nicht die genaueste bei einige Datentypen und Werten. Besser ist das var_dump().

Sowas musst du nun überall da machen, wo Unklarheiten sind. Wenn du eine Stelle gefunden hast, wo ein unerwartetes Ergebnis rauskommt, musst du weiterforschen in Richtung da wo der Wert herkommt.

Teil 2 beim Debugging ist, alle Fehlermeldungen zu sehen. Dazu solltest du an den Anfang des Scripts

eror_reporting(E_ALL);
ini_set('display_errors', 1);

notieren. Aber nur zum Entwickeln. Im Produktivsystem möchte man eingentlich ein System haben, das Fehler in ein Logfile schreibt, aber wenn dir schon Debugging

dedlfix.

[Rolf B]

Hallo einsiedler,

Das mit den debugging verstehe ich nicht!

Tjaaa. Willst Du denn, das das so bleibt? Oder möchtest Du es nicht lieber lernen?

Debuggen muss jeder können, der programmieren will. Du kannst ja nicht mit jedem Fehler in ein Forum oder zu einem Kumpel laufen und sagen: tut nicht, schreib mal für mich fertig...

Debuggen kannst Du lernen. Du hast deinen Programmcode geschrieben. Dabei hast Du Dir etwas gedacht. Du hast dir überlegt: Wenn ich dies tue, bekomme ich jene Daten heraus. Und damit kann ich SO weiterarbeiten.

Ob diese Gedanken richtig waren, musst Du überprüfen. Schritt für Schritt. Du musst die Daten, die Du durch deine Aktionen bekommen hast, ausgeben und schauen, ob es das ist, was Du glaubst, dass es sein soll. Du musst an Hand deiner Kontrollausgaben schauen, ob dein Programm daher läuft, woher Du geplant hast, dass es läuft.

Kontrollausgaben kann man mit Echo machen. Das blöde daran ist, dass sie dann kreuz und quer ins HTML gerotzt werden und einem die Ausgabe kaputt machen. Ich verwende da ganz gern ein Array, wo ich meine Kontrollinformationen einfach Eintrag für Eintrag anhänge, und dieses Array gebe ich dann am Ende vor dem </body> Tag aus.

Ohne Kontrollausgaben ist Debuggen schwierig. Eine Testmethodik der 60er Jahre ist der Schreibtischtest: Ein großer Zettel, eine Zeile für jede Variable, und dann führt man das Programm "von Hand" aus. Setzt natürlich immer noch voraus, dass man genau weiß, was jeder Befehl tut. Ich befürchte ja, dass Du das nicht weißt.

Die Schreibtischtestvariante, die VHIG-Entwickler^[1] wie ich einsetzen, ist, den Code im Kopf auszuführen und sich zu merken, was in den Variablen landet. Das klappt, solange der Code unter einer bestimmten Komplexität bleibt.

Die Hirntest-Methode, die ich angewendet habe, sagt mir, dass Du Dir unklar bist, was in $img drinsteht. Zuerst behandelst Du es wie den Key im $aImages Array, dann wie den Value. Deswegen funktioniert dein Code nicht. Du hast $aImages so konstruiert, dass der Dateiname der Index im Array ist und die übrigen Informationen (path und size) den Wert bilden. Mit array_map kommst Du nicht gleichzeitig an Index und Wert heran. Deswegen mein Hinweis auf foreach. Die Schreibverwechslung title/titel gibt's auch noch, aber das ist harmlos.

Rolf

PS: Debuggen kannst Du nur unter einer einzigen Voraussetzung nicht lernen: Wenn Du Code nicht selbst schreibst, sondern frei von Verständnis zusammenkopierst. Ist das so? Suchst Du nur eine weitere Kopiervorlage? Das solltest Du dann klar ansagen. Andernfalls werden wir weiter versuchen, Hilfe zur Selbsthilfe zu leisten (bei manchen habe ich das aufgegeben - soll ich das bei Dir auch tun?)

---

1. Vom Hirn ins Gerät (sprich: ohne Planung, ohne separaten Designschritt) ↩︎

[einsiedler]

AAAAAHHHHHHHHHHHHHH, DANKE, das ist der Part der WICHTIG ist!

Die Hirntest-Methode, die ich angewendet habe, sagt mir, dass Du Dir unklar bist, was in $img drinsteht. Zuerst behandelst Du es wie den Key im $aImages Array, dann wie den Value. Deswegen funktioniert dein Code nicht. Du hast $aImages so konstruiert, dass der Dateiname der Index im Array ist und die übrigen Informationen (path und size) den Wert bilden. Mit array_map kommst Du nicht gleichzeitig an Index und Wert heran. Deswegen mein Hinweis auf foreach. Die Schreibverwechslung title/titel gibt's auch noch, aber das ist harmlos.

NEIN, bitte NICHT!

soll ich das bei Dir auch tun?

Tassilo

[Rolf B]

Hallo einsiedler,

mach Dir doch mal - nur um zu schauen was passiert - eine für Debug aufbereitete Version der Schleife. Programmieren ist keine Kunst. Es ist ein Handwerk (mit Kopfunterstützung). Und Handwerker brauchen Werkzeuge und das Wissen über die nötigen Handgriffe. Debuggen ist eins der wichtigsten Werkzeuge. Ein Klempner ohne Lötlampe? Klar, man kann Rohre mit Panzertape zusammenfügen...

$_FiguresRendered = array_map(
		function ( $img ) use ( $_FiguresHml ) {
      var_dump($img);
			$fig = strtr(
					$_FiguresHml
					, [
						'{headline}' => $jObject -> {$img} -> headline,
						'{titel}' => $jObject -> {$img} -> titel,
						'{subtext}' => $jObject -> {$img} -> subtext,
						'{img.path}' => $img['path'],
						'{img.width}' => $img['size']['width'],
						'{img.height}' => $img['size']['height']
					]
				);
      var_dump($fig);
      return $fig;
		}
		, $aImages
	);

Rolf

[einsiedler]

Danke Rolf, ich habe es nun mal eingesetzt und bekomme für das erste Bild folgende Info`s:

array(2) { ["path"]=> string(33) "./mediaordner/arbeit01//01-01.jpg" ["size"]=> array(2) { ["width"]=> float(45.8341) ["height"]=> float(45.8341) } } string(206) "

{title}

für das zweite Bild:

array(2) { ["path"]=> string(33) "./mediaordner/arbeit01//01-02.jpg" ["size"]=> array(2) { ["width"]=> float(36.45894) ["height"]=> float(45.8341) } } string(207) "

{title}

u.s.w.

zum ansehen: https://tassilosturm.de/test-umgebung/DemWeb_A/index.php

Bedeutet nun: (Wie ich es verstehe) ist in $img also der Pfad UND der Bildname UND die Bildgrößen enthalten UND darum funktioniert es nicht (weil ich nur jeweils den Bildnamen brauche).

Liege ich richtig?

Gruß der einsiedelnde

[Rolf B]

Hallo Tassilo,

genau, du brauchst den Bildnamen, und der ist anderswo gespeichert.

Wie Du siehst, enthält $img ein Array mit zwei Einträgen: path und size. Das stammt aus dem ImagesController, da steht:

$this->Images[pathinfo($img, PATHINFO_BASENAME)] = [ 'path' => $img, 'size' => $this->CalculateSizes(...) ].

Der Bildname landet im Schlüssel des Arrays, wo er für array_map unerreichbar ist.

Im jetztigen Hauptprogramm versuchst Du den Zugriff $jObject -> {$img} (was auch ohne die geschweiften Klammern funktionieren täte). Weißt Du, was dieser Ausdruck bedeutet? Nimm den Inhalt der Variablen $img und suche in $jObject eine Eigenschaft dieses Namens. Aber ein Array als Eigenschaftsname? Was passiert damit? Lauschen wir mal, wie PHP vor sich hin brabbelt. „Ok, ich soll in $jObject eine Eigenschaft suchen. Mit dem Namen... hä? Ein Dings, ein äh... jedenfalls kein String. Namen sind doch Strings! Hey Dings, ich brauche Dich als String.“ „Ok,“ sagt das Array, „bitte schön: "Array".“ „Danke,“ sagt PHP, und schaut sich nach $jObject->Array um. „Oh, diese Eigenschaft gibt's gar nicht. Na gut. Vielleicht später. Hier, Programmierer, dein Wert: NULL.“

Kein Scherz. Die String-Darstellung eines beliebigen Arrays ist "Array".

echo ARRAY(1,2,3);
// Ausgabe: Array

Mit error_reporting(E_ALL) hätte es fleißig Warnmeldungen gegeben.

Du brauchst den Dateinamen, ohne Pfad, weil deine JSON-Datei so aufgebaut ist. Du könntest ihn nun im Hauptprogramm wieder mit pathinfo($img['path'], PATHINFO_BASENAME) wieder heraussuchen - aber das wäre doppelte Arbeit. Du hast den BASENAME ja schon, als Schlüssel für den Array-Eintrag in $aImages. Das sieht man oben in dem Auszug aus ImagesController.

Das Problem ist jetzt, dass array_map() Dir den Schlüssel nicht liefert. Nur die Werte.

Achso, wenn ich deinen array_map so betrachte - du holst Dir das figure-Template mit use($_FiguresHml) in die verfügbaren Daten der Callback-Funktion hinein. Das müsstest Du auch mit $jObject tun, sonst ist $jObject in der Callback-Funktion NULL.

Die elegantere Lösung ist darum hier: foreach ($aImages as $basename => $img) statt array_map, damit bekommst Du Eintrag für Eintrag Schlüssel und Wert, und kannst $basename als Schlüssel für $jObject verwenden.

Rolf

[dedlfix]

Tach!

Achso, wenn ich deinen array_map so betrachte - du holst Dir das figure-Template mit use($_FiguresHml) in die verfügbaren Daten der Callback-Funktion hinein. Das müsstest Du auch mit $jObject tun, sonst ist $jObject in der Callback-Funktion NULL.

Deswegen hab ich extra noch den Hinweis mit dem error_reporting an meine erste Antwort angehängt, weil damit der Zugriff auf die in diesem Scope nicht bekannte Variable durch eine Notice-Meldung deutlich gemacht wird.

dedlfix.

[einsiedler]

Also nochmal für doofe wie mich:

<?php
const LAYOUT_HTML_FILE_PATH = 'layout.html';
const WIDGETS_FOLDER_PATH = 'widgets/';
include_once 'ImagesController.php';
$ImgCtrl = new ImagesController( './mediaordner/arbeit01/' );
$aImages = $ImgCtrl->ReadImagesData()->KeySort()->Get();
$_LayoutHtml = file_get_contents( LAYOUT_HTML_FILE_PATH );
$_FiguresHml = file_get_contents( WIDGETS_FOLDER_PATH . 'figures.html' );
$jFileContent = file_get_contents( 'datei.JSON' );
$jObject = json_decode( $jFileContent );
$_FiguresRendered = foreach ($aImages as $basename => $img)(
		function ( $img ) use ( $_FiguresHml ) {
			return strtr(
					$_FiguresHml
					, [
						'{headline}' => $jObject -> $basename -> headline,
						'{titel}' => $jObject -> $basename -> titel,
						'{subtext}' => $jObject -> $basename -> subtext,
						'{img.path}' => $img['path'],
						'{img.width}' => $img['size']['width'],
						'{img.height}' => $img['size']['height']
					]
				);
		}
		, $aImages
	);
echo str_replace( '{figures}', implode($_FiguresRendered), $_LayoutHtml );
?>

Gruß T.

[Rolf B]

Hallo Tassilo,

foreach ist ein Befehl, keine Funktion.

Und eine function darin brauchst du dann auch nicht mehr.

Echt jetzt? Hast du den Code derart zusammen kopiert, dass dich das überfordert?

Rolf

[einsiedler]

Ich verstehe das nicht ganz, wie geht es denn dann richtig. wenn es doch so einfach geht!

Gruß T.

[Rolf B]

Hallo einsiedler,

Ich verstehe das nicht ganz,

Die Untertreibung des Tages.

Also gut, ich gebe auf. Wenn Du einfach nur eine Kopiervorlage willst...

Das Ergebnis von strtr schreibe ich in eine Zwischenvariable, falls man da mal debuggen muss. Man könnte das auch direkt als zweiten Parameter des array_push hinschreiben, dieses Statement wird mir dann aber auch zu unübersichtlich.

<?php
const LAYOUT_HTML_FILE_PATH = 'layout.html';
const WIDGETS_FOLDER_PATH = 'widgets/';
include_once 'ImagesController.php';

$ImgCtrl = new ImagesController( './mediaordner/arbeit01/' );
$aImages = $ImgCtrl->ReadImagesData()->KeySort()->Get();

$_LayoutHtml = file_get_contents( LAYOUT_HTML_FILE_PATH );
$_FiguresHml = file_get_contents( WIDGETS_FOLDER_PATH . 'figures.html' );

$jFileContent = file_get_contents( 'datei.JSON' );
$jObject = json_decode( $jFileContent );

$_FiguresRendered = ARRAY();

foreach ($aImages as $basename => $img) {
   $fig = strtr($_FiguresHml
            , [
								'{headline}' => $jObject -> $basename -> headline,
								'{titel}' => $jObject -> $basename -> titel,
								'{subtext}' => $jObject -> $basename -> subtext,
								'{img.path}' => $img['path'],
								'{img.width}' => $img['size']['width'],
								'{img.height}' => $img['size']['height']
							]);
   array_push($_FiguresRendered, $fig);
}
echo str_replace( '{figures}', implode($_FiguresRendered), $_LayoutHtml );
?>

Rolf

[einsiedler]

Vielen lieben Dank, Dir! Ich werde morgen dort https://wiki.selfhtml.org/wiki/PHP/Tutorials/Einstieg wegen den Funktionen mal nachhaken um sie annähernd zu verstehen.

Dank!

Gruß T.

[Rolf B]

Hallo einsiedler,

unser wiki ist bei PHP schlecht besetzt.

Bei Fragen hilft auch https://www.php.net/manual/en/

Rolf

[TS]

Hello,

unser wiki ist bei PHP schlecht besetzt.

Bei Fragen hilft auch https://www.php.net/manual/en/

Das PHP-Manual ist sehr umfangreich und wird durch die UCN in vielen Fällen schon verständlicher, als die nackte Funktionsbeschreibung.

Wenn wir hier im eigenen Wiki also einen Mehrwert schaffen wollen, müssen wir mMn anhand von Beispielen größere Zusammenhänge erklären, warum man was wie machen kann und besonders auch, warum man etwas nicht machen sollte. Dazu muss man dann meistens Sachen, die es vielleicht als Blackbox ("Framework", Klassensammlung, ...) schon fertig gibt, selber und diskret aufbauen und erklären.

Das Zusammentragen, Beschreiben und Überptüfen von Fakten ist sehr mühevoll. Wenn sie dann erst in unserem Wiki stehen, werden sie sogar von der Wikipedia aufgegriffen und dort veröffentlicht. Hinterher ist immer alles leichter.

Bei HTML, CSS, und JavaScript gab es schon eine Vorlage durch die alte Doku. Bei PHP gab es nur die vielen Fragen im Forum. Als Frank aus Berlin und ich damals darum gebeten haben, die Forumsdateien des Archivs offline zu bekommen, wurde dies aber vom damaligen Vorstand abgelehnt und def Download künstlich erschwert.

Damit fehlte uns dann ein Leitfaden für sinnvolle PHP-Artikel.

Glück Auf
Tom vom Berg

[einsiedler]

Als allerletztes möchte ich noch die Berechnung in meiner ImagesController.php ändern.

Wie schon erwähnt werden Bilder aus einem Ordner ausgelesen und deren Größe bestimmt.

Ich möchte es nun so machen das in meinem CSS folgendes steht:

img { display: block; width: auto; height: auto; margin: 0 auto; border: 1px dotted orange; } 

in meinem Template steht dann folgendes:

<figure>
<h3>{headline}</h3>
<h4>{subtitel}</h4>
<img src="{img.path}" width="880" height="880" alt="{headline}" style="max-width:{img.width}vw; max-height:{img.height}vw;">
<figcaption>{subtext}</figcaption>
</figure>  

Dort werden also meine errechneten Werte in mein max-width und max-height eingefügt.

Das gesamte ImagesController.php ist in meinem Ausgangs-thread zu sehen.

Hier nun mein Angebot zur Änderung der private function CalculateSizes( $size )

private function CalculateSizes( $size ) : array {
        $size_calc = [ 'width' => $this->WidthCalculateValue, 'height' => $this->HeightCalculateValue ];
        switch ( $size[0] <=> $size[1] ) {
            case 1 :
                $size_calc['height'] = round( $this->HeightCalculateValue * $size[1] / $size[0] ,5 );
                break;
            case -1 :
                $size_calc['width'] = round( $this->WidthCalculateValue * $size[0] / $size[1] ,5 );
                break;
            default :
                break;
        }
        return $size_calc;
    }


private function Initialize() {        
$this->IsValid = $this->CheckDir();        
$this->AllowedImageTypes = 'jpg,gif,png';        
$this->WidthCalculateValue = 100;        
$this->HeightCalculateValue = 90.8131;        
$this->Images = null;     }

Kann man das so machen, wäre das richtig?

Height bekommt ein bestimmten Wert in vh (eine FESTE HÖHE), sagen wir mal 90.8131vh, das width ist ein Prozentwert je nach dem:

Case 1; Das Bild ist Quadratisch also height hat die volle HÖHE 90.8131vh und width hat die volle Breite also 100%

Case 2 : Das Bild ist horizontal Rechteckig also hat das width die volle Breite , also 100%

UND nun muss per Dreisatz mein neues vh ( also die HÖHE) ausgerechnet werden

height in px * 90.8131 / width in px

also folglich bei einem Bild wo die px Werte per IMGsize herausgefunden wurden :

width: 880px und height: 620px

620 * 90.8131 / 880 ergibt 63,98195 (hier auf 5 Stellen Runden) das wäre mein neuer vh Wert

Case 3: Das Bild ist vertikal Rechteckig also hat mein vh die volle HÖHE also 90.8131vh

und nun muss meine neue Breite festgestellt werden, also hat das Rechteck nicht mehr die vollen 100%

sondern ==> width in px * 100% / height in px also ==> 620 * 100 / 880 ergibt ca 70.454545 meine neue Breite in %

Das möchte ich so errechnen.

Gruß der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Das möchte ich so errechnen.

Kannst du mal das Problem beschreiben (nicht deinen Lösungsversuch)?

LLAP 🖖

[einsiedler]

Klar, aber das wird euch villeicht nicht gefallen wie ich da herangehe.

Es geht mir darum das die Bilder zum Beispiel bei einer Schriftvergrößerung nicht mitskalieren. Ich hatte da schon eine Version in der ich beim IMG als width und height vw Werte mitgegeben habe , das wiederum gefällt mir aber nicht, weil ja dann die ganze Bildschirmbreite betroffen wäre. das die IMG sehr klein würden beim zusammenschieben.

Nun aber gebe ich dem IMG eine feste HÖHE je nach Gerät / Bildschirm etc. in vh und errechne jeweils per Dreisatz die entsprechende Breite in % dazu. Wenn ich dem IMG

img { display: block; width: auto; height: auto; margin: 0 auto; }

gebe und dem IMG jeweils ein maximales width und height

skaliert das Bild NICHT hoch (bei der Schriftvergrößerung) und beim zusammenschieben des Browserfensters bleibt das Bild proportional und wird kleiner (gemäß der aktuellen Breite des Browserfensters wenn man es zusammenschiebt).

Ich habe eine laufende Version , dort habe ich die Werte allerdings mit dem Taschenrechner ausgerechnet: https://welten-bau.de/aktuell/aktuell3-4.html

Ausgangspunkt für diese Überlegung war eine Kunstseite http://www.contemporaryartdaily.com/ wobei dort die IMG bei der Schriftgröße mithochskalierten und damit für mich unansehnlich wurden , weil man ja dann nichts mehr erkennen konnte, nur wenn man scrollt kann man es erahnen.

Ich fragte mich wie eine Bildergalerie aussehen könnte wobei je nach Gerät das IMG schon skaliert im Browserfenster angezeigt wird.

Nun haben auch die eine andere Lösung gefunden, die ich allerdings auch nicht gut finde.

Gruß der einsiedelnde

[Matthias Apsel]

Hallo einsiedler,

Kannst du mal das Problem beschreiben (nicht deinen Lösungsversuch)?

Klar, aber das wird euch villeicht nicht gefallen wie ich da herangehe.

Was ist das Problem?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@einsiedler

Klar, aber das wird euch villeicht nicht gefallen wie ich da herangehe.

Mit „gefallen“ hat das wenig zu tun. Die Frage ist, ob es sinnvoll ist.

Es geht mir darum das die Bilder zum Beispiel bei einer Schriftvergrößerung nicht mitskalieren.

Warum nicht? Die Schriftgröße ist ein wesentliches Merkmal einer Seite und oft ist es wünschenswert, wenn sich die Größe von Bildern daran orientiert.

Ich hatte da schon eine Version in der ich beim IMG als width und height vw Werte mitgegeben habe , das wiederum gefällt mir aber nicht, weil ja dann die ganze Bildschirmbreite betroffen wäre. das die IMG sehr klein würden beim zusammenschieben.

Nun aber gebe ich dem IMG eine feste HÖHE je nach Gerät / Bildschirm etc. in vh und errechne jeweils per Dreisatz die entsprechende Breite in % dazu.

Das kann eigentlich nur schiefgehen. Um Bilder nicht zu verzerren, müsste die Breite ebenfalls in vh angeben werden. Aber wozu? Einfach keine Breite angeben, dann wirkt der Ausgangswert auto und das BIld wird nicht verzerrt. ☞ Codepen

Angesichts unterschiedlicher Bildproportionen und Viewportproportionen scheint mir eine feste Höhe in vh aber nicht sinnvoll zu sein:

Das Hochkantbild ist gegenüber dem Panorama zu klein.

Das Panoramabild passt nicht in den Viewport.

Ich fragte mich wie eine Bildergalerie aussehen könnte wobei je nach Gerät das IMG schon skaliert im Browserfenster angezeigt wird.

So in etwa? ☞ Bildergalerie, Artikel dazu: Zurück zu den Wurzeln

(Wie’s ohne CSS-Präprozessor geht, hab ich auf dem WKE erzählt. Muss ich noch aufschreiben.)

LLAP 🖖

[einsiedler]

Da geht`s nun wieder los... das zereden ...

Nö, da verzerrt sich nix, wie man an meinem laufenden Beispiel sieht.

Es geht mir nicht um die Art wie ich es errechnen möchte,

sondern ob der PHP - Schnipsel in sich logisch aufgebaut ist wie es sich gehört... technisch ...

Wie sieht es da aus, ist alles richtig?

[Gunnar Bittersmann]

@@einsiedler

Da geht`s nun wieder los... das zereden ...

Ich diskutiere nicht über Technik ohne zu hinterfragen, wofür diese eingesetzt wird, denn das wäre verantwortungslos.

LLAP 🖖

[einsiedler]

Ein Beispiel

Das passiert wenn man die Schrift auf 300% vergrößert, ja, für die Schrift selbst sicherlich sinnvoll (für ein bestimmtes Klientel die es lesen möchten/wollen), aber mit dem Bild in dieser Größe kann ich nix anfangen.

Es ist nur ärgerlich, weil ich viel weiter herunterscrollen müßte um den weiteren Text zu lesen der noch darunter kommt / kommen könnte UND ich habe ein häßliches verpixeltes großes Bild das ich mir beim herunterscrollen anschaue.

Und wie schon gesagt. Meine Rechnung funktioniert.

Ich möchte nur wissen ob der PHP - Schnipsel stimmt.

LG der einsiedelnde

[JürgenB]

Hallo,

hast du es schon mal mit img { max-width:100% } probiert. Auf dieser Seite mache ich das so.

Gruß
Jürgen

[Gunnar Bittersmann]

@@einsiedler

Das passiert wenn man die Schrift auf 300% vergrößert, ja, für die Schrift selbst sicherlich sinnvoll (für ein bestimmtes Klientel die es lesen möchten/wollen), aber mit dem Bild in dieser Größe kann ich nix anfangen.

Wer sehschwach ist und deshalb die Schrift auf 300% vergrößert, will sicher auch, dass die Bilder um diesen Faktor skaliert werden, damit die Person was darauf erkennen kann.

LLAP 🖖

[Tabellenkalk]

Hallo,

will sicher auch, dass die Bilder um diesen Faktor skaliert werden,

Sicher? Vielleicht war das Bild bereits groß genug, oder es genügt auch ein kleinerer Faktor…

Gruß
Kalk

[einsiedler]

Es geht einfach um einen ersten Eindruck den man von meinen Arbeiten durch die Bilder bekommen soll, und es soll halt kein hochaufgelöstes Material auf meiner Website bereit gestellt werden. Das schick ich den interessierten Leuten auf Anfrage schon zu.

Auf meiner verlinkte Demo-Seite kann man sehen, wenn man die Schriftgröße vergrößert UND das Bildschirmfenster zusammenschiebt das sich da nichts verzerrt.

Oder ist das etwa bei jemanden von euch so, das es tatsächlich so ist? Sagt es mir bitte, wenn ja.

Gruß der einsiedelnde

[Gunnar Bittersmann]

@@einsiedler

Auf meiner verlinkte Demo-Seite kann man sehen, wenn man die Schriftgröße vergrößert UND das Bildschirmfenster zusammenschiebt das sich da nichts verzerrt.

Du meinst aktuell3-4.html? Da ist ja auch keine von auto abweichende Breite mit CSS gesetzt.

LLAP 🖖

[einsiedler]

Öhm doch:

/* +++ */
	section .secIMG  {
		margin: 0; padding: 0;
		width: 100%;
		max-width: 100%;
		border: 3px dotted yellow;
	}
	
	.secIMG figure {
		margin: 0; padding: 0;
		width: 100%;
		border: 1px dotted steelblue;
	}
	.secIMG figcaption {
		font-size: 0.97rem;
		text-align: center;
		padding-top: 0.6rem;
		border: 1px dotted indigo;
	}
	.secIMG img {
		display: block;
		width: auto;
		height: auto;
		margin: 0 auto;		
		border: 1px dotted orange;
	}
	
	.IMG1 {
		max-width:100%;
		max-height:69.09vh;   
		}
	.IMG2 {
		max-width:100%;
		max-height:52.875vh;  
		}
	.IMG3 {
		max-width:56.25%;
		max-height:94vh;     
		}
	.IMG4 {
		max-width:73.75%;
		max-height:94vh;
		}
	.IMG5 {
		max-width:100%;
		max-height:94vh;
		}
	.IMG6 {
		max-width:56.25%;
		max-height:94vh;
		}
	.IMG7 {
		max-width:81.875%;
		max-height:94vh;
		}
	.IMG8 {
		max-width:33.75%;
		max-height:94vh;
		}
	.IMG9 {
		max-width:100%;
		max-height:53.4625vh;  
		}
		
	video {
		
		}

Dort habe ich jedem einzelnen IMG (von .img1 ==> .img9) zusätzlich (als Klasse) noch eine maximale breite und höhe mitgegeben...

und es funktioniert…

Aber villeicht sind nur meine Browser von Opera über Chrome bis Firefox speziell so eingestellt das es nur bei mir funktioniert. Belert mich eines besseren und sagt mir halt mit einem screen-Beweis das ich falsch liege.

P.S.: Anmerkung: Habe gerade gesehen das der vh wert ein wenig niedriger sein muss, denn von 100% bis 110% skaliert es doch einmal. Muss da den vh wert nochmal justieren.

Villeicht auch deswegen:

P.S. Ich habe Dein Video über "Custom properties" angeschaut und finde diese mathematische herangehensweise auch sehr inteessant, sodas ich auch da "weiterdenken" mag. (Zurück zu den Wurzeln / Bildergalerie ) ist nicht schlecht!

Gruß der einsiewdelnde

[einsiedler]

Ich muss zugeben Dein Ansatz mit der data-aspect-ratio in Zusammenhang mit Custom properties gefällt mir recht gut. Ich werde mich da reinhängen um es zu verstehen.

Wieder Friede?

LG Tassilo

[Gunnar Bittersmann]

@@einsiedler

Wieder Friede?

Klar.

War Unfriede?

LLAP 🖖

[einsiedler]

Es ist die elegantere Lösung und zudem (zugegeben) noch recht einfach. Was ich nur einmal "per Hand" machen müsste ist den aspect Ratio errechnen wie in Deinem Beisiel und dem ImG style="--aspect-ratio: calc (4/3)" geben.
Recht einfach. Nur muss ich mir noch anlesen wie das mir dem Custom properties funktioniert. https://wiki.selfhtml.org/wiki/CSS/Custom_properties_(CSS-Variablen) https://www.mediaevent.de/css/variable.html

Anmerkung:

:root {
--area: 0.4;
--a: calc(var(--area) * var( --aspect-ratio));

--x0: 1;
--x1: calc((var( --x0) + var( --a) / var( --x0)) / 2);
--x2: calc((var( --x1) + var( --a) / var( --x1)) / 2);
--x3: calc((var( --x2) + var( --a) / var( --x2)) / 2);

width: calc(var( --x3) * 100%);
}

Das wäre es doch eigentlich und halt die Angaben --aspect-ratio: foo im style.

Nicht das ich wüßte, dann ist alles gut!

Gruß T.