Okay:
Der wichtigste Teil, wo es Änderungen geben muss,
und bitte nur dort, ist meine
ImagesController.php (ganz unten angefügt)
Zur Erläuterung aber alles was ich habe:
Wie gesagt, das template
(figures.html) das ich in mein
layout.html einsetze, solange wie es halt Bilder/Videos in meinem Ordner gibt (Schleife), sieht so aus:
Benannt:
figures.html
HTML:
<figure>
<h3>{headline}</h3>
<h4>{subtitle}</h4>
<img style="{img.width}%; height:{img.height}vh;" src="{img.path}" width="880" height="880" alt="{headline}">
<figcaption><span>{subtext}</span></figcaption>
</figure>
Wie ihr seht wird dort ebenso einiges aus einem array/bzw. .json Datei eingefügt.
Der Teil im layout.html wo das template (
figures.html) eingesetzt wird hier im Ausschnitt:
(ist so glaub ich jetzt nicht so wichtig!)
HTML:
[ ... ]
<section>
<h4>"Eine Überschrift</h4>
<p>Sub-Überschrift</p>
<section>
{figures} <!-- hier werden die templates für die IMG`s eingefügt -->
</section>
<section>
<figure>
<video width="864" height="482" controls poster="http://foo.net/mediaordner/media-01/arbeit01/01-02.png">
<source src="http://foo.net/mediaordner/media-01/arbeit01/01-02.mp4" type="video/mp4" />
<source src="http://foo.net/mediaordner/media-01/arbeit01/01-02.ogg" type="video/ogg" />
<source src="http://foo.net/mediaordner/media-01/arbeit01/01-02.webm" type="video/webm" />
Ihr Browser kann dieses Video nicht wiedergeben.<br>
Sie können es unter <a href="http://foo.net/mediaordner/media-01/arbeit01/01-02.mp4">Video-Link</a> downloaden.
</video>
<figcaption>"Mein tolles Video / HDV - Video / 3:35 Min</figcaption>
</figure>
</section>
[ ... ]
Gut, hier sind noch die Bilder und das Video getrennt, aber das möchte ich ja letztlich anders hinbekommen.
Das eben alles , sowohl Bilder als auch Videos, in einem Ordner sind, die als Bildergalerie ausgegeben werden.
Mein Ordner sieht z.B. wie folgt aus:
./mediaordner/arbeit01/01-01.jpg
./mediaordner/
arbeit01/01-02.mp4
./mediaordner/
arbeit01/01-02.ogg
./mediaordner/
arbeit01/01-02.webm
./mediaordner/arbeit01/01-03.jpg
./mediaordner/arbeit01/01-04.jpg
./mediaordner/arbeit01/01-05.jpg
./mediaordner/arbeit01/01-06.jpg
[ ... ]
Dabei verwende ich nur JPG`s und ich würde gerne
alle drei Videoformate verwenden.
Die Reihenfolge , das das Video bei arbeit01 hier nun an zweiter Stelle ist, kann abweichen bei den anderen arbeiten02 ==> also: 02-04.mp4 etc. , arbeiten03 ==> also: 03-06.mp4 [ ... ]
Nun das index.php das das template ins layout.html samt einigen Zusatzsinfos
( in einer
datei.JSON ) einsetzt:
(DAS bitte alles so belassen, es funktioniert perfekt!)
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();
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 );
?>
Und nun die
ImagesController.php um die es eigentlich geht:
(Alles davor ist nur zur Erläuterung was ich mache!)
PHP:
<?php
class ImagesController {
private $IsValid = false;
private $AllowedImageTypes;
public function __construct( $base_dir = null ) {
$this->BaseDir = $base_dir;
$this->Initialize();
}
public function ReadImagesData() : ImagesController {
if ( !$this->IsValid )
throw new Exception( 'can\'t read images from non valid dir! (' . $this->BaseDir . ')' );
$_images = glob( $this->BaseDir . '/*.{' . $this->AllowedImageTypes . '}', GLOB_BRACE );
foreach ( $_images as $img )
$this->Images[pathinfo($img, PATHINFO_BASENAME)] = ['path' => $img, 'size' => $this->CalculateSizes(getimagesize($img)) ];
$this->IsValid = is_array($this->Images) && !empty($this->Images);
return $this;
}
public function Get() {
return $this->Images;
}
public function KeySort() : ImagesController {
ksort( $this->Images, SORT_REGULAR | SORT_FLAG_CASE );
return $this;
}
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 CheckDir() : bool {
if ( $this->BaseDir == null )
throw new Exception( 'base dir not defined! (' . $this->BaseDir . ')' );
return is_dir( $this->BaseDir );
}
private function Initialize() {
$this->IsValid = $this->CheckDir();
$this->AllowedImageTypes = 'jpg,gif,png';
$this->WidthCalculateValue = 100;
$this->HeightCalculateValue = 37;
$this->Images = null;
}
}
?>
Dort bitte das, was das
private function CalculateSizes( $size ) Betrifft beibehalten (ist für mich wichtig!)
Nun müssen halt die Bilder und das/die Video(s) unterschieden werden, aber wie jetzt konkret?
Bei dem Video im
16/9 Format würde ich die
HeightCalculateValue = 37; setzen und
WidthCalculateValue = 100; und beim
4/3 Format muss nur eine neue Breite (width) ausgerechnet werden ( mit Dreisatz) , dabei ist
HeightCalculateValue = 37; , sodaß die Videos in einem gewissen Verhältnis dargestellt werden.
Achso und ja, ich benötige ja für die Videos dann auch ein eigenes template, also muss ja auch unterschieden werden: bei Bildern eventuell :
figuresIMG.html und bei Videos:
figuresVID.html ... oder so ...
Das wäre es!
Vielen Dank im vorraus!
LG M.