Ergebnis 1 bis 12 von 12

Thema: ce_downloads.tpl - Bildformat-Downloads mit Thumbnails (getImage())

  1. #1
    Contao-Nutzer Avatar von refalo
    Registriert seit
    09.08.2009.
    Ort
    Odenwald
    Beiträge
    80

    Standard ce_downloads.tpl - Bildformat-Downloads mit Thumbnails (getImage())

    Basiert auf dem TYPOlight Originaltemplate ce_downloads.tpl der TYPOlight Version 2.8.3:

    Beschreibung: Die Modifizierung bewirkt (mit Hilfe der TYPOlight/Contao-Core-Funktion getImage()) bei Bildformat-Downloads eine Darstellung eines entsprechenden Thumbnails anstelle des Dateityp-Icons (links neben dem Download-Link). Zusätzlich sind die Thumbnails genauso verlinkt (spricht mit demselben <a>-Tag inklusive title-Attribut gewrapped) wie die verlinkte Bezeichnung des Downloads rechts daneben.

    Anwendungsbeispiel: Man möchte "anderen" eine Fotostrecke als Download-Liste zur Verfügung stellen, z.B. als Alternative zum Versenden der Bilder in einer (zu?) "großen" Mail. Ohne Thumbnails kann das für den (potenziellen) Foto-Interessenten eine üble Sucherei werden: Jedes Bild müsste erst einmal geöffnet werden, um festzustellen, ob einen das Foto interessiert...

    Bemerkungen:
    (1) Man beachte, dass die Modifizierungen (in meiner Implementierung) nur dann zum Tragen kommen, wenn man dem Downloads-Inhaltelement eine bestimmte Klasse (siehe Template-Code unten) mitgibt.
    (2) Man berücksichtige weiterhin, dass getImage() Einschränkungen (u.a.) bzgl. der Wahl der maximalen Bildformat-Dimensionen macht, was sich in einer NICHT-Verkleinerung des Originalbildes darstellt (siehe z.B. Contao-Core-Quellcode dieser Funktion).
    (3) Es sollten nur Downloads mit Bildformat-Dateien in der Liste sein. Was sonst passiert, habe ich nicht getestet!

    Template-Datei ce_downloads.tpl :

    PHP-Code:
    <?php require_once("nabu.php"); ?>

    <!-- indexer::stop -->
    <div class="<?php echo $this->class?> block"<?php echo $this->cssID?><?php if ($this->style): ?> style="<?php echo $this->style?>"<?php endif; ?>>
    <?php if ($this->headline): ?>

    <<?php echo $this->hl?>><?php echo $this->headline?></<?php echo $this->hl?>>
    <?php endif; ?>

    <?php foreach ($this->files as $file): ?>
    <p style="clear:both;">
    <div style="float:left;margin-right:10px;" class="nabu-download-img-left">
    <a href="<?php echo $file['href']; ?>" title="<?php echo $file['title']; ?>">
    <img src="<?php echo Nabu::hasClass($this,'nabu-download-img') ? $this->getImage(Nabu::getUrlParameter($file['href'],'file'),100,100,'box') : $file['icon']; ?>" alt="" class="mime_icon"
        <?php echo Nabu::hasClass($this,'nabu-download-img') ? '' 'width="18"' ?>
        <?php echo Nabu::hasClass($this,'nabu-download-img') ? '' 'height="18"' ?>
    />
    </a>
    </div>
    <div style="float:left;">
    <a href="<?php echo $file['href']; ?>" title="<?php echo $file['title']; ?>">
    <?php echo $file['link']; ?> <span class="size">(<?php echo $file['filesize']; ?>)</span>
    </a>
    </div>
    </p>
    <?php endforeach; ?>

    </div>
    <!-- indexer::continue -->
    PHP-Include-Datei nabu.php :

    PHP-Code:
    class Nabu{
        
        static public function 
    hasClass($item,$key)   {  return self::isInArray(explode(' ',trim($item->class)),$key);  }
        static public function 
    isInArray(array $array,$elem)   {  $result self::getArrayElement($array,$elem);  return !empty($result);  }
        static public function 
    getArrayElement(array $array,$elem)   {  return array_intersect($array,array($elem));  }
        
        static public function 
    getUrlParameter($url,$key){
            
            
    $parts parse_url($url);
            
    $parametersString $parts['query'];
            
    $parameters = array();
            
    parse_str($parametersString,$parameters);
            return 
    $parameters[$key];
            
        }
    //getUrlParameter
        
    }//class Nabu 
    Hier noch ein paar fehlende CSS-Definitionen:
    Code:
    .nabu-download-img div { margin-top:15px; }
    .nabu-download-img .nabu-download-img-left { margin-right:10px;text-align:right;width:100px; }
    Viele Grüße refalo.
    Angehängte Dateien Angehängte Dateien
    Geändert von refalo (02.09.2010 um 19:37 Uhr)

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Finde ich jetzt ein wenig kompliziert und unüberschaubar.

    Hab hier mal ne Version für Contao 2.9.1 gemacht. Die Formatierung geht bei mir von außen über CSS und nicht mit inline-CSS. Es wird außerdem gecheckt, ob der Download vom Typ Bild ist.

    Den Code habe ich hier für den Upload HTML-kommentiert, ist nur ein einziger Block mitten im Original-Template, bitte den HTML-Kommentar entfernen. Und auch die Einrückung für den Thumb (IMG) ist nur zur besseren Leserlichkeit hier im Forum gedacht.

    PHP-Code:
    <!-- indexer::stop -->
    <div class="<?php echo $this->class?> block"<?php echo $this->cssID?><?php if ($this->style): ?> style="<?php echo $this->style?>"<?php endif; ?>>
    <?php if ($this->headline): ?>

    <<?php echo $this->hl?>><?php echo $this->headline?></<?php echo $this->hl?>>
    <?php endif; ?>

    <?php foreach ($this->files as $file): ?>
    <p>

    <!-- New code -->
    <?php
      
    /** * thumb max width */
      
    $width 100;

      
    /** * thumb max height */
      
    $height 75;

      
    /** * href to source pic */
      
    list(,$source) = explode('='$file['href']);

      
    /** * mode of transformation: proportional, box */
      
    $mode 'box';

      
    /** * check if image */
      
    $arrAllowedTypes trimsplit(','strtolower($GLOBALS['TL_CONFIG']['validImageTypes']));
      
    $pic in_array(pathinfo($sourcePATHINFO_EXTENSION), $arrAllowedTypes);
    ?>

    <?php if ($pic): ?>
      <img
        class="downloads_thumb"
        src="<?php echo $this->getImage($source$width$height$mode); ?>"
        width="<?php echo $width?>"
        height="<?php echo $height?>"
        alt="<?php echo $file['title']; ?>"
      />
    <?php endif; ?>
    <!-- New code END -->

    <img src="<?php echo $file['icon']; ?>" width="18" height="18" alt="" class="mime_icon" /> <a href="<?php echo $file['href']; ?>" title="<?php echo $file['title']; ?>"><?php echo $file['link']; ?> <span class="size">(<?php echo $file['filesize']; ?>)</span></a></p>
    <?php endforeach; ?>

    </div>
    <!-- indexer::continue -->
    capture_20100902_212926.jpg
    Gruß Andreas
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Contao-Nutzer Avatar von refalo
    Registriert seit
    09.08.2009.
    Ort
    Odenwald
    Beiträge
    80

    Standard

    Danke Andreas,

    Deine Lösung ist gegenüber meiner deutlich verbessert. Habe sie mit Contao 2.9.0 getestet.

    Was mir allerdings nicht ganz so gut gefällt ist, dass bei Deiner Lösung die Bilder durch die img-width-height-Attribute teilweise (unterschiedlich) gestretcht bzw. nicht proportional verkleinert werden.

    Wenn ich das rausnehme, zahle ich allerdings auch einen Preis: Ich muss dann mittels CSS eine vertikale Ausrichtung der Thumbnail-Spalte stylen...

    Danke und viele Grüße refalo.
    Geändert von refalo (03.09.2010 um 16:56 Uhr)

  4. #4
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo refalo,

    freut mich, dass dir meine Version gefällt.

    Du hast Recht, es ist auf jeden Fall noch verbesserungswürdig. Lösche einfach mal folgende Zeilen:
    HTML-Code:
        width="<?php echo $width; ?>"
        height="<?php echo $height; ?>"
    D.h. für width und height im IMG-Element müsste man eigentlich die tatsächliche Größe der generierten Thumbs ermitteln. Nachdem du die Zeilen gelöscht hast, funktioniert es so wie du wünschst.

    Gib z.B. $height = 100; und $width = ''; dann behalten die Bilder ihre Proportionen und erreichen eine maximale Höhe von 100px. Setzt du beide Werte auf z.B. 100, dann erreichst du mit dem richtig gesetzten mode, dass die maximale Ausdehnung (entweder Breite od. Höhe) 100px erreicht. Den mode kannst du auch leer lassen, das ergibt dann einen 3. Mode (meine ich auf jeden Fall) $mode = '';

    Spiele ein wenig mit den Werten, dann siehst du, was du erreichen kannst. Mein Template aus dem letzten Post sollte auf jeden Fall so nicht benutzt werden, da die Bilder je nach Einstellung sonst gestaucht werden.

    Hab jetzt grad keine Zeit und Muße nach einem Weg zu suchen, wie ich width und height der tatsächlich erzeugten Thumbs ins IMG-Element bekomme. Dürfte mit ein wenig PHP aber nicht so schwer sein.

    Gruß Andreas
    Geändert von Andreas (07.09.2010 um 18:08 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  5. #5
    Contao-Nutzer Avatar von refalo
    Registriert seit
    09.08.2009.
    Ort
    Odenwald
    Beiträge
    80

    Standard getimagesize

    Hallo Andreas,

    mit der PHP-Standard-Funktion getimagesize kriegt man die Dimensionen einer Bilddatei. Diese Lösung scheint mir besser zu sein, als die img-Attribute width und height ganz wegzulassen, da man den Browser ja idealer Weise über die zu erwartenden Dimensionen von Bilddateien im Voraus, d.h. vor der eigentlichen Anzeige informieren sollte.

    Hier nochmal eine entsprechend modifizierte Version Deines Templates von oben. Sämtliche Änderungen befinden ausschließlich im "if ($pic)"-Zweig unten :

    PHP-Code:
    <!-- indexer::stop -->
    <div class="<?php echo $this->class?> block"<?php echo $this->cssID?><?php if ($this->style): ?> style="<?php echo $this->style?>"<?php endif; ?>>
    <?php if ($this->headline): ?>

    <<?php echo $this->hl?>><?php echo $this->headline?></<?php echo $this->hl?>>
    <?php endif; ?>

    <?php foreach ($this->files as $file): ?>
    <p>

    <!-- New code -->
    <?php
      
    /** * thumb max width */
      
    $width 100;

      
    /** * thumb max height */
      
    $height 75;

      
    /** * href to source pic */
      
    list(,$source) = explode('='$file['href']);

      
    /** * mode of transformation: proportional, box */
      
    $mode 'box';

      
    /** * check if image */
      
    $arrAllowedTypes trimsplit(','strtolower($GLOBALS['TL_CONFIG']['validImageTypes']));
      
    $pic in_array(pathinfo($sourcePATHINFO_EXTENSION), $arrAllowedTypes);
      
    ?>

    <?php if ($pic): ?>
      <?php
          $bild 
    $this->getImage($source$width$height$mode);
        
    $info getimagesize($bild);
      
    ?>
      <img
        class="downloads_thumb"
        src="<?php echo $bild ?>"
        width="<?php echo $info[0]; ?>"
        height="<?php echo $info[1]; ?>"
        alt="<?php echo $file['title']; ?>"
      />
    <?php endif; ?>
    <!-- New code END -->

    <img src="<?php echo $file['icon']; ?>" width="18" height="18" alt="" class="mime_icon" /> <a href="<?php echo $file['href']; ?>" title="<?php echo $file['title']; ?>"><?php echo $file['link']; ?> <span class="size">(<?php echo $file['filesize']; ?>)</span></a></p>
    <?php endforeach; ?>

    </div>
    <!-- indexer::continue -->
    Viele Grüße refalo.
    Geändert von refalo (07.09.2010 um 16:21 Uhr)

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja, genau, viel anders hätte ichs auch nicht gemacht. Vielleicht noch anstatt $info, $dimension schreiben, nur wegen der Logik. Damit ist das Problem jetzt doch eigentlich nett gelöst.

    ps Dass du Bilder einer Galerie auch downloaden kannst ist dir bekannt?
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  7. #7
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.342

    Standard

    Hallo zusammen,
    ich krame diesen Artikel noch einmal heraus...

    Ich habe bei einem Kunden noch Typolight 2.9 laufen und dieser Post ist genau das, was ich gesucht habe.

    Leider bekomme ich keine Bilder angezeigt.

    Ich habe das Template mit dem letzten Code-Block aktualisert und kann keine Änderung feststellen.
    Also ich habe nur das ce_downloads.tpl mit dem Code komplett ausgetauscht oder muss noch etwas anderes gemacht werden?
    Was ist mit der PHP Datei von oben?

    Grüße
    Matu
    Viele Grüße aus Köln
    Matu

  8. #8
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das PHP von oben ist innerhalb der ce_downloads.tpl. ce_download.tpl musst du nehmen für einen Single Download. Nicht das Template aktualisieren, sondern ein neues aus ce_downloads.tpl erstellen und darein dann die Veränderungen (hat aber jetzt nix mit deinem Fehler zu tun).

    Schreibe mal echo 'hallo welt'; in dein Template um zu prüfen, ob das Template überhaupt genommen wird. Evtl. musst du den Cache leeren. Ansonsten kann man so aus der Ferne erstmal nicht viel mehr dazu sagen.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  9. #9
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.342

    Standard

    Ich habe den Cache geleert aber es werden keine Bilder angezeigt... Echo Welt wird auch nicht gezogen...

    Also ich habe das ce_downloads.tpl unter Templateserstellt und den kompletten Inhalt gegen den neuen Code ausgetauscht.

    Was kann ich noch ausprobieren?
    Viele Grüße aus Köln
    Matu

  10. #10
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Mmmh, müsste ich mir ansehen. Wenn 'hello world' nicht ausgegeben wird, dann wird das Template nicht genommen. Die Frage ist: warum?

    Mit Cache leeren meinte ich natürlich über die Systemwartung, also den Ordner system/tmp/ leeren, außer der .htaccess.
    Geändert von Andreas (19.07.2013 um 18:31 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  11. #11
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Der Code ist aber wirklich unnötig lang. Das geht in 3 Zeilen ;(

    Ich such die gleich mal am PC heraus

  12. #12
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Man benötigt dafür die Extension Thumbnify https://contao.org/de/extension-list...000049.de.html

    PHP-Code:
    <?php $this->import("Thumbnify"); ?>
    <!-- indexer::stop -->
    <div class="<?php echo $this->class?> block"<?php echo $this->cssID?><?php if ($this->style): ?> style="<?php echo $this->style?>"<?php endif; ?>>
    <?php if ($this->headline): ?>

    <<?php echo $this->hl?>><?php echo $this->headline?></<?php echo $this->hl?>>
    <?php endif; ?>

    <?php foreach ($this->files as $file): ?>
    <div class="download">

    <?php $tmpDownload explode('='$file['href']); ?>
    <?php $tmpMime 
    explode('/'$file['mime']); ?>
        <div class="<?php echo $tmpMime['1']; ?> image_container">
            <?php if (!($this->Thumbnify->getThumb($tmpDownload['1'], 168168'center_center'))): ?>
                <a href="{{env::path}}<?php echo $file['href']; ?>" title="<?php echo $file['title']; ?>">&nbsp;</a>
            <?php else: ?>
                <img src="<?php echo $this->Thumbnify->getThumb($tmpDownload['1'], 168168'center_center'); ?>" alt="" />
            <?php endif; ?>
        </div>
        <p>
            <a href="<?php echo $file['href']; ?>" title="<?php echo $file['title']; ?>"><?php echo $this->String->substr($file['link'], 22); ?> 
                <span class="size">(<?php echo $file['filesize']; ?>)</span>
            </a>
        </p>
    </div>
    <?php endforeach; ?>

    </div>
    <!-- indexer::continue -->
    Das sind nicht die Minimalanpassungen. Aber so steht z.B. vor jedem Download das Bild. Und es macht Snapshots von allen Bilddateien und PDF, EPS, etc. Wenn nicht, dann zeigt es kein Bild an. Dafür wird aber der Mime-Typ als Klasse ausgegeben. Dann kann man dafür via CSS ein Bild einbinden.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. getImage Hook und Wasserzeichen
    Von qfler im Forum Entwickler-Fragen
    Antworten: 3
    Letzter Beitrag: 20.02.2011, 17:37
  2. verschiedene ce_downloads.tpl auswählen
    Von kischd im Forum Allgemeine Inhaltselemente
    Antworten: 1
    Letzter Beitrag: 16.12.2010, 11:58
  3. getImage und watermark
    Von Fabio im Forum Entwickler-Fragen
    Antworten: 4
    Letzter Beitrag: 14.09.2010, 10:47
  4. getImage Parameter
    Von Lengen1971 im Forum Entwickler-Fragen
    Antworten: 5
    Letzter Beitrag: 26.08.2010, 07:18
  5. .rar Downloads
    Von key im Forum Bilder/Dateien
    Antworten: 1
    Letzter Beitrag: 01.02.2010, 16:21

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •