Verschiedene Download-Buttons [gelöst]

[BrainStormer]

Hallo an alle,
ich hab auf meiner Seite ein paar Dokumente zum Download. Preislisten, Broschüren etc. Gibt es irgendwie die möglichkeit verschiedene Downloadicons einzuführen? Hat da jemand eine Lösung?

Lg

[derRenner]

Hallo

möglicher Ansatz/workaround:

gib dem CE Download im Backend eine class mit 'meinIconA', 'meinIconB', ...

ändere via CSS

.ce_download.meinIconA img {
     display: none;
}
.ce_download.meinIconA a::before {
     display: inline;
     content: 'url(../assets/contao/images/meinIconA.gif)';
}
... 

[Andreas]

Oder ohne extra Klasse:

/* CSS */
.mime_icon {
  display: none;
}
.mime_icon + a {
  background-repeat: no-repeat;
  padding-left: 24px;
}
.mime_icon[src$="iconJPG.gif"] + a {
  background-image: url("assets/contao/images/iconJPG.gif");
}
.mime_icon[src$="iconPDF.gif"] + a {
  background-image: url("assets/contao/images/iconPDF.gif");
} 

Das ist für Contao 3. Bei Contao 4 scheint das einfacher zu gehen, siehe hier https://demo.contao.org/en/file-elements.html.

[derRenner]

Andreas, da hab ich ne Frage zu

.mime_icon[src$="iconJPG.gif"] + a {
  background-image: url("assets/contao/images/iconJPG.gif");
} 

so wie ich das interpretiere bekommen jene <a> aus class .mime_icon mit dem "iconJPG.gif" ein background-image iconJPG.gif gesetzt. Also eigentlich sich selbst ...
Doch die Frage lag ja darin, dass ich pro Download ein eigenes Icon setze.
Bei deiner Lösung wird automatisiert eine wenn/dann Abfrage umgesetzt - doch ohne das deklarierte 'wenn' gibt's doch kein 'dann' ... oder verstehe ich da was nicht.

Kannst du mir dein CSS mal kurz "ausdeutschen", damit ich's korrekt verstehe? Denn grundsätzlich gefällt mir dieser Ansatz

[Andreas]

Das ist CSS, da gibt es kein Wenn/Dann.

/* CSS */
.mime_icon {
  display: none; /* die img.mime_icon unsichtbar schalten */
}
.mime_icon + a { /* Das "a", welches nach einem Geschwister kommt, welches die Klasse mime_icon hat. Also alle As, welche nach den img.mime_icon kommen. */
  background-repeat: no-repeat;
  padding-left: 24px;
}
.mime_icon[src$="iconJPG.gif"] + a { /* Das "a", welches nach einem Geschwister kommt, welches die Klasse mime_icon hat und dessen SRC auf iconJPG.gif endet ($) */
  background-image: url("files/css/img/icon-jpg.gif");
}
.mime_icon[src$="iconPDF.gif"] + a { /* Das "a", welches nach einem Geschwister kommt, welches die Klasse mime_icon hat und dessen SRC auf iconPDF.gif endet ($) */
  background-image: url("files/css/img/icon-pdf.gif");
} 

Um sowas selber umsetzen zu können musst du dich mit den CSS-Selektoren vertraut machen. Beispiel: gute Übersicht https://www.w3schools.com/cssref/css_selectors.asp

[derRenner]

Danke schon mal!

Ja, dass es kein Wenn/Dann gibt ist mir klar - war ja auch in Anführungsstrichen gesetzt
Damit hab ich's eh richtig interpretiert - doch dann zielt deine Lösung nicht auf die eigentliche Frage ab.
Denn wenn ich das richtig verstanden habe, möchte @BrainStormer für verschieden Downloads auch jeweils eigene Icons setzen und zu diesem Zeitpunkt exsistieren ja nur die Core-Icons der Downloads. Um jetzt ein eigenes Icon zu setzen muss dem ce_download erst mitgeteilt werden, dass es ein anderes Icon braucht.
In deiner Ausführung geht CSS ja davon aus, dass .mime_icon auf iconPDF.gif (oder iconJPG.gif) endet und setzt es dann das neue Hintergrundbild.
Da es ja nur zwei Ausführung gibt (JPG und PDF), wird @BrainStormer nie mehr als zwei Icons zusammen bringen

Ich interpretiere die Anforderung so:
Download A ... soll Icon Neu A bekommen
Download B ... soll Icon Neu B bekommen
Download C ... soll Icon Neu C bekommen
Download D ... soll Icon Neu D bekommen

... und das geht dann mit deiner ausführung nicht mehr, oder?
... mit Setzen von class würd's schon gehen

[Andreas]

Ja, stimmt. Wenn er für PDFs unterschiedliche Icons haben möchte, könnte er das mit einer extra CSS-Klasse für das Download-Element umsetzen. Für ein Element Downloads würde das nicht gehen.

Für Downloads könntest du der Tabelle tl_files ein extra Feld "downloadType" hinzufügen. Am besten vom Typ 'select'. Das musst du dann in dein angepasstes Ausgabe-Template bringen. Wenn du dieses Template sowieso anpasst, kannst du dort auch direkt das IMG rausschmeißen und ne anständige Klasse direkt auf das A-Tag aufsetzen. Die Downloadtypen verwaltest du dann in der Dateiverwaltung. Im Template machst du das so, dass als Klasse das Mime-Icon, die Dateierweiterung und der Downloadtyp aufgesetzt wird, dann bist du am flexibelsten mit deinem CSS.

[BrainStormer]

Hey,
Danke für die Antworten, es ist jetzt erstmal ziemlich verständlich. Leider fehlt mir diese Woche komplett die Zeit, da grad ein bisschen Land unter ist. Ich werde es nächste Woche mal probieren, danke schonmal

[BrainStormer]

Hallo an alle,
danke nochmal für die Antworten, es hat mir auch echt viel geholfen und ich hab es auch hinbekommen. Das ist jetzt mein Code:

.ce_download.meinIconA a {
    width:94px;
    height:100px;
    display:block;
    background-image:url("files/Hernik/Tiere/102_100pxgif.gif");
    background-repeat:no-repeat;
    font-size:0px;
}

Im Anhangseht ihr das Ergebnis (Ich hab jetzt einfach zum ausprobieren irgendeins genommen)
Da gleich noch eine Frage hinterher: Wenn ihr das Bild aufmacht seht ihr oben rechts sodrei Strichen, die bekomme ich einfach nicht weg, kann da jemand helfen?
Lg

[jscholtysik]

Hi Brainstormer,


kann man sich das mal live anschauen? Hast Du eventuell einen Link für uns?

[BrainStormer]

Hallo,
anbei der Link: einach nach unten unter "Downloads"

http://untergestell.com/index.php/ipai-reha.html

Lg Andi

[jscholtysik]

Das ist ein fav-navicon von FontAwesome, das dort eingeblendet ist. Folgender CSS-Teil ist dafür zuständig:

.fa-navicon::before, .fa-reorder::before, .fa-bars::before {
    content: "\f0c9";
}

Und das steht im HTML:

<div class="ce_download meinIconA block">
  
      <em class="fa fa-navicon">&nbsp;</em>
  <a href="index.php/ipai-reha.html?file=files/Hernik/Das%20Team/jwo20101105224135.jpg" title="Die Datei jwo20101105224135.jpg herunterladen">jwo20101105224135.jpg <span class="size">(162,8 KiB)</span></a>

</div>

Wenn Du diese Zeile

      

<em class="fa fa-navicon">&nbsp;</em>

rausnimmst, ist auch das Fav-navicon von FontAwesome weg.

[BrainStormer]

Perfekt! Danke.
Das stand in der ce.download.htmal5, hab es jetzt mal rausgeschmissen. s.u.

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>
	<!---<em class="fa fa-navicon">&nbsp;</em>//--->
  <a href="<?= $this->href ?>" title="<?= $this->title ?>"><?= $this->link ?> <span class="size">(<?= $this->filesize ?>)</span></a>

<?php $this->endblock(); ?>

Lg Andi

[jscholtysik]

Also in der Original ce_download.html5 schaut der Code so aus:

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <?= Image::getHtml($this->icon, '', 'class="mime_icon"') ?> <a href="<?= $this->href ?>" title="<?= $this->title ?>"><?= $this->link ?> <span class="size">(<?= $this->filesize ?>)</span></a>

<?php $this->endblock(); ?>

Muss also manuell hingefügt worden sein...

[Andreas]

Das ist ein fav-icon ...
... ist auch das Favicon weg.

Kein Favicon, sondern ein Icon von FontAwesome, die beginnen alle mit "fa-". Favicons kommen nur im HEAD vor und haben üblicherweise die Erweiterung "ico".

[jscholtysik]

Hi Andreas,


schon klar, ist auch in meinem oberen Beitrag schon korrigiert...

[Andreas]

Und ich dachte schon ...