Ankündigung

Einklappen
Keine Ankündigung bisher.

Contao Galerie-Inhaltslement mit Video-Unterstützung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Contao Galerie-Inhaltslement mit Video-Unterstützung

    Hi Leute,
    der Thread von Airborne hat eine super Idee für den Mix aus Video- und Bild-Elementen in dem gewohnten Contao Galerie-Inhaltselement mit sich gebracht.
    Die Idee ist der Bild-Datei in der Dateiverwaltung die Adresse zu einem Video zu geben (siehe Screenshot im Anhang).

    Was einfach klingt, ist oft nicht ganz so einfach technisch umzusetzen und gerade mit der Lightbox/Colorbox und JS sind einige Hürden zu meisten.

    Lange Rede... Anbei findet Ihr auf Basis des gallery_default Templates des EX Themes genau diese Lösung.

    Anlage: Dateiverwaltung, gallery_default_video.html5

    Viele Grüße,
    Tim
    Angehängte Dateien
    Zuletzt geändert von Tim; 02.12.2021, 08:50.
    http://www.premium-contao-themes.com

  • #2
    Moin Tim,

    hervorragende Idee die Galerie auf diese Funktionalität zu erweitern.
    Das Template "gallery_default_video.html5" ist im Anhang leider nicht zu sehen. Wird es in einem Update von EclipseX irgendwann erscheinen?

    Gruß und vielen Dank,
    tschero
    Zuletzt geändert von tschero; 15.09.2021, 13:15.
    https://www.webdesign24.biz

    Kommentar


    • #3
      Das ist nicht sichtbar?
      Klicke auf die Grafik für eine vergrößerte Ansicht

Name: screenshot_47.png
Ansichten: 277
Größe: 39,9 KB
ID: 23393
      http://www.premium-contao-themes.com

      Kommentar


      • #4
        Doch jetzt, eben war es nicht sichtbar. KA warum?

        Vielen Dank
        https://www.webdesign24.biz

        Kommentar


        • #5
          Sehr cool und schön umgesetzt. Vielen Dank Tim. Ich habe auch schon damit rumgespielt und in meine Galerie exemplarisch ein Video eingebunden. Eine Sache ist mir dabei aufgefallen: Wenn man direkt auf das kleine Icon klickt, erscheint ein Film in der Lightbox. Klickt man sich jedoch direkt in der Lightbox mit den Pfeilen durch die Galerie, wird die Lightbox mit dem Video übersprungen und nur die anderen Bilder gezeigt.

          Kommentar


          • #6
            Ich hab das Template noch einmal geupdated. Jetzt sollte alles zusammen in einer LB-Instanz laufen.
            http://www.premium-contao-themes.com

            Kommentar


            • #7
              Hi,
              ich bin auch an dem Template interessiert. Wo finde ich es denn? Als Anhang sehe ich nur das Bild.

              Kommentar


              • #8
                Zitat von tefracky Beitrag anzeigen
                Hi,
                ich bin auch an dem Template interessiert. Wo finde ich es denn? Als Anhang sehe ich nur das Bild.
                Ich habe den Post erneut gespeichert. Ist die Datei nun erreichbar?
                http://www.premium-contao-themes.com

                Kommentar


                • #9
                  Zitat von Tim Beitrag anzeigen

                  Ich habe den Post erneut gespeichert. Ist die Datei nun erreichbar?
                  Leider nicht.

                  Edit: Jetzt ging es. Danke!

                  Klicke auf die Grafik für eine vergrößerte Ansicht  Name: Unbenannt.PNG Ansichten: 0 Größe: 37,9 KB ID: 23888
                  Zuletzt geändert von tefracky; 02.12.2021, 11:27.

                  Kommentar


                  • #10
                    Merkwürdig, ich kann den Anhang nicht sehen... Nur die Screenshots.

                    Kommentar


                    • #11
                      kann man das template noch einsetzen für eine aktuelle exclipse?
                      leider sehe ich auch nur den Screenshot und nicht den Download. Tim könntest du die Datei nochmal zur Verfügung stellen?

                      Kommentar


                      • #12
                        Zitat von tbruhn Beitrag anzeigen
                        kann man das template noch einsetzen für eine aktuelle exclipse?
                        leider sehe ich auch nur den Screenshot und nicht den Download. Tim könntest du die Datei nochmal zur Verfügung stellen?
                        Das Template ist inzwischen fester Bestandteil in EX.
                        http://www.premium-contao-themes.com

                        Kommentar


                        • #13
                          Tim Hallo, danke für den Hinweis. Perfekt. Der Download wird nun auch wieder angezeigt.
                          Ich habe das Problem, dass wenn ich eine Videogalerie erstelle die Videos immer in einem neuem Fenster angezeigt werden und nicht in der Lightbox wie die Bilder (beim verwenden des Default-Templates)
                          Wenn ich das Template gallery_default_video.html5 verwende dann werden Bilder und Videos in der Lightbox angezeigt
                          Video werden auch an die Lightbox angepasst aber die Bilder sind immer in voller Auflösung und werden nicht an die Lightbox angepasst.

                          Hat jemand einen Tipp welche Template-Anpassung ich machen muss? Danke!

                          Kommentar


                          • #14
                            Zitat von tbruhn Beitrag anzeigen
                            Tim Hallo, danke für den Hinweis. Perfekt. Der Download wird nun auch wieder angezeigt.
                            Ich habe das Problem, dass wenn ich eine Videogalerie erstelle die Videos immer in einem neuem Fenster angezeigt werden und nicht in der Lightbox wie die Bilder (beim verwenden des Default-Templates)
                            Wenn ich das Template gallery_default_video.html5 verwende dann werden Bilder und Videos in der Lightbox angezeigt
                            Video werden auch an die Lightbox angepasst aber die Bilder sind immer in voller Auflösung und werden nicht an die Lightbox angepasst.

                            Hat jemand einen Tipp welche Template-Anpassung ich machen muss? Danke!
                            Wenn du Bilder und Videos mischt, wirst du unterschiedliche Lightbox-Instanzen im Template erstellen müssen, denke ich. Die Vorgaben für Videos sind nicht zwingend passend für Bilder.
                            http://www.premium-contao-themes.com

                            Kommentar


                            • #15
                              Hast du sowas vielleicht schon mal umgesetzt oder ein Tipp für mich?
                              Folgendermaßen sind mein Template derzeit aus.
                              Videoanzeige passt für mich so
                              Bildanzeige wird leider zu groß in der Lightbox angezeigt und nicht automatisch angepasst.

                              HTML-Code:
                              <ul class="cols_<?php echo $this->perRow; ?> flex-gallery" id="gallery_<?php echo $this->id; ?>" itemscope itemtype="http://schema.org/ImageGallery">
                              <?php
                              $intItem = 0;
                              ?>
                              <?php foreach ($this->body as $class=>$row): ?>
                              <?php foreach ($row as $col): ?>
                              <?php if ($col->addImage): ?>
                              <li class="entry row<?php echo $this->perRow; ?> <?php echo $col->class; ?>">
                              <figure class="image_container" itemscope itemtype="http://schema.org/ImageObject">
                              
                              <?php $this->insert('picture_default', $col->picture); ?>
                              
                              <?php
                              $itemId = $this->id.'_'.$intItem;
                              $isVideo = false;
                              if( in_array(\pathinfo($col->href,PATHINFO_EXTENSION), array('mp4','mov','ogv','webm')) )
                              {
                              $isVideo = true;
                              }
                              ?>
                              
                              <?php if ($col->href): ?>
                              <a href="<?php echo $col->href; ?>" class="gallery_link_<?= $this->id; ?><?= $isVideo ? '_video' : ''; ?>" <?= $col->attributes; ?> title="<?php echo $col->alt; ?>" itemprop="contentUrl">
                              <?php endif; ?>
                              
                              <?php if ($col->href || $col->caption): ?>
                              <div class="content">
                              <div class="content-outside">
                              <div class="content-inside">
                              <div class="capt" itemprop="caption"><?php echo $col->caption; ?></div>
                              <?php if (strlen($col->href) > 0 && strlen($col->caption) < 1): ?>
                              <i class="fa <?= $isVideo ? 'fa-play-circle': 'fa-plus-circle'; ?> fa-3x"></i>
                              <?php endif; ?>
                              </div>
                              </div>
                              </div>
                              <?php endif; ?>
                              
                              <?php if ($col->href): ?>
                              </a>
                              <?php endif; ?>
                              
                              <?php
                              if( $isVideo ): ?>
                              <div style='display:none'>
                              <div id="inlinevideocontent_<?= $itemId ; ?>" class="inlinevideocontent">
                              <video id="video_<?= $itemId; ?>" class="video" controls autoplay>
                              <source src="<?= $col->href; ?>" type="video/mp4">
                              </video>
                              </div>
                              </div>
                              
                              <script>
                              jQuery(document).ready(function()
                              {
                              var video = document.getElementById("video_<?= $itemId; ?>");
                              if( jQuery(video).attr('autoplay') )
                              {
                              video.muted = true;
                              }
                              
                              jQuery('.gallery_link_<?= $this->id; ?>_video').colorbox(
                              {
                              rel:"gallery<?= $this->id; ?>", inline:true, width:"80%", height:"auto", maxWidth:"500px",href:"#inlinevideocontent_<?= $itemId ; ?>",
                              onOpen: function()
                              {
                              if( jQuery(video).attr('autoplay') )
                              {
                              video.muted = false;
                              video.play();
                              }
                              },
                              onClosed: function()
                              {
                              video.pause();
                              }
                              });
                              });
                              </script>
                              <?php endif; ?>
                              
                              </figure>
                              </li>
                              <?php endif; ?>
                              <?php $intItem++; ?>
                              <?php endforeach; ?>
                              <?php endforeach; ?>
                              </ul>
                              
                              
                              <script>
                              jQuery(document).ready(function()
                              {
                              jQuery('.gallery_link_<?= $this->id; ?>').removeAttr('data-lightbox');
                              jQuery('.gallery_link_<?= $this->id; ?>').colorbox({rel:"gallery<?= $this->id; ?>"});
                              });
                              </script>
                              

                              Kommentar

                              Lädt...
                              X