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
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
Geändert von BrainStormer (07.03.2017 um 13:04 Uhr)
Hallo
möglicher Ansatz/workaround:
gib dem CE Download im Backend eine class mit 'meinIconA', 'meinIconB', ...
ändere via CSS
PHP-Code:
.ce_download.meinIconA img {
display: none;
}
.ce_download.meinIconA a::before {
display: inline;
content: 'url(../assets/contao/images/meinIconA.gif)';
}
...
Grüsse
Bernhard
Oder ohne extra Klasse:
Das ist für Contao 3. Bei Contao 4 scheint das einfacher zu gehen, siehe hier https://demo.contao.org/en/file-elements.html.PHP-Code:
/* 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");
}
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
Andreas, da hab ich ne Frage zu
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 ...PHP-Code:
.mime_icon[src$="iconJPG.gif"] + a {
background-image: url("assets/contao/images/iconJPG.gif");
}
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
Grüsse
Bernhard
Das ist CSS, da gibt es kein Wenn/Dann.
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.aspPHP-Code:
/* 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");
}
Geändert von Andreas (19.02.2017 um 16:07 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
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
Grüsse
Bernhard
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.
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
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
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:
Im Anhangseht ihr das Ergebnis (Ich hab jetzt einfach zum ausprobieren irgendeins genommen)HTML-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; }
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
Hi Brainstormer,
kann man sich das mal live anschauen? Hast Du eventuell einen Link für uns?
Joachim
*** Kein Backup, kein Mitleid ***
Hallo,
anbei der Link: einach nach unten unter "Downloads"
http://untergestell.com/index.php/ipai-reha.html
Lg Andi
Das ist ein fav-navicon von FontAwesome, das dort eingeblendet ist. Folgender CSS-Teil ist dafür zuständig:
Und das steht im HTML:Code:.fa-navicon::before, .fa-reorder::before, .fa-bars::before { content: "\f0c9"; }
Wenn Du diese ZeileCode:<div class="ce_download meinIconA block"> <em class="fa fa-navicon"> </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>
rausnimmst, ist auch das Fav-navicon von FontAwesome weg.Code:<em class="fa fa-navicon"> </em>
Geändert von jscholtysik (08.03.2017 um 17:26 Uhr)
Joachim
*** Kein Backup, kein Mitleid ***
Perfekt! Danke.
Das stand in der ce.download.htmal5, hab es jetzt mal rausgeschmissen. s.u.
Lg AndiHTML-Code:<?php $this->extend('block_searchable'); ?> <?php $this->block('content'); ?> <!---<em class="fa fa-navicon"> </em>//---> <a href="<?= $this->href ?>" title="<?= $this->title ?>"><?= $this->link ?> <span class="size">(<?= $this->filesize ?>)</span></a> <?php $this->endblock(); ?>
Also in der Original ce_download.html5 schaut der Code so aus:
Code:<?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...
Joachim
*** Kein Backup, kein Mitleid ***
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
Hi Andreas,
schon klar, ist auch in meinem oberen Beitrag schon korrigiert...
Joachim
*** Kein Backup, kein Mitleid ***
Und ich dachte schon ...
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
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)