Anregungen zur Realisierung einer Bildergalerie mit Bildern und Videos


#1
Hallo liebe Forumer,
villeicht könnt ihr mir helfen bzw Anregungen geben.
Und zwar stelle ich mir eine Bildergalerie vor die sowohl IMG (eigentlich nur jpg`s) und Videos (mp4, ogg & webm) verwendet,
diese Bilder bzw Videos sollen aus einem Ordner mit php ausgelesen werden (PHP deshalb weil zusätzlich noch etwas dazukommt (eine Berechnung, mehr dazu später) !)
und weil ich templates (worin diese Bilder in html ausgegeben werden) und in mein index.html eingesetzt werden, sooft es halt Bilder in diesem Ordner gibt.
Ich habe schon ein entsprechendes script die rein IMG aus einem Ordner ausliest , mein entsprechendes html erstellt und die Bilder samt Infos ausgibt.
Aber nun kommen ja Videos hinzu.
Und da möchte ich euch fragen ob ihr eine Idee zur Realisierung habt.
Entweder sind die Videos im selben Ordner wie die Bilder oder halt getrennt.
Wenn also die Bilder und Videos im selben Ordner sind wie könnte eine Weiche aussehen die beides erkennt und dann entsprechend weitere Berechnungen anstellt.
Eine spontane Idee von mir wäre: Weil ich auch ein Vorschaubild für die Videos anzeigen möchte (mit controls poster="http://foo.png" )
das man halt anhand der Vorschaubilder die Videos erkennt aber auch gleichzeitig welches Format das Video hat also entweder 4 zu3 oder 16 zu 9

Wer hat dazu eine Idee?
Wer könnte mir das eventuell auch realisieren anhand von dem was ich bereits habe? (Das stelle ich ich dann zur Verfügung)

Lieben Gruß

M.
 

Technipion

Erfahrenes Mitglied
#2
anhand von dem was ich bereits habe? (Das stelle ich ich dann zur Verfügung)
Ja dann, Hosen runter! Gib uns den Code.

Grundsätzlich kannst du natürlich Videos und Bilder anhand ihres Dateiformats unterscheiden. Hängt aber auch ein Stück weit von deinem bisherigen Code ab.

Das mit der Vorschau ist einfach: Für 16 : 9 hat das Vorschaubild einfach oben und unten schwarze Balken.
 
#3
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.
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#4
Ich setze mich damit zwar über deine Anweisungen hinweg, aber ich muss das mal loswerden: Eine einzige Klasse namens Controller, Manager o. ä. mit einer einzigen Instanz, in der globalgalaktisch (fast) alles versammelt ist, macht noch keine OOP, auch wenn man dies häufig antrifft. Statt dessen habe ich es so gelernt, dass die Kunst darin besteht, die Dinge der realen Welt auf Objekte abzubilden. Wobei ersteres in diesem Fall etwas abstrakter zu verstehen ist, es würde sich um die Bilder und die Videos handeln. D. h. es müsste eine Klasse Video und eine Klasse Image geben. Die Erzeugung der Instanzen davon könnte man dann nach dem Faktory-Pattern vornehmen. Außerdem würde sich eine Klasse Reader anbieten, die das Verzeichnis ausliest und mit Hilfe der Factory daraus die Video- und Image-Objekte erzeugt. Darin dann eine Methode, die anhand des jeweiligen Templates das HTML ermittelt und zurück liefert. So würde ich diese Aufgabe angehen.
 
#5
Hört sich gut und vernünftig (richtig) an!
Nur habe ich momentan keine Lust es selbst zu machen, wer würde es für mich gegen ein gutes Entgeld schreiben? Mehr in einer PN!

Gruß M.