Druckbare Version
Hallo zusammen,
ich habe eine Frage bzgl. der MIME-Icons, diese möchte ich gerne verändern. Über die SuFu hatte ich einiges gefunden, aber alles sehr alt. Ich nehme an, seit den letzten Antworten zu diesem Thema hat sich am System wieder einiges verändert.
Was ist denn der aktuell beste Weg die Icons (gegen größere) auszutauschen? Die 18x18px sind mir etwas zu klein :)
Danke für jeden Tip und viele Grüße,
Jan
Wichtig: Ab Contao 3.x erfolgt die Einbindung etwas anders:
https://community.contao.org/de/show...l=1#post271509
Seit Contao 2.9 kannst du die Icons updatesicher anpassen.
Die Icons müssen generell im Ordner system/themes/default/images/ liegen. Ich empfehle, dass du darin einen Ordner "icons" machst und deine neuen Icons darin ablegst. Der Pfad zu ihnen ist dann system/themes/default/images/icons. So werden sie nicht überspeichert, wenn du Contao updatest da Contao seine eigenen Icons in den übergeordneten Ordner legt. Du musst dann aber darauf achten, dass du im localconfig.php den Pfad anpasst, also statt beispielsweise 'iconAUDIO.gif' musst du 'icons/iconAUDIO.gif' nutzen.
Öffne am besten parallel die system/libraries/File.php (ca. ab Zeile 340) damit du siehst, welche MIME-Icons in Contao definiert sind und wie du sie richtig aufrufst (der Aufruf variiert je nachdem ob es sich um ein Bild, eine Textdatei, o.ä. handelt). Aber bitte NICHT in der File.php etwas ändern, da das nicht updatesicher wäre!
Wenn du neue Dateitypen anlegst, musst du auch darauf achten, dass du sie im Backend unter Einstellungen > "Dateien und Bilder" als erlaubte Dateitypen definierst.
Füge in der system/config/initconfig.php nach ### INSTALL SCRIPT STOP ### z. B. folgendes ein:
Wenn du größere Icons einsetzen willst, musst du danach auch noch im Backend die Templates für ce_download und ce_downloads modifizieren, da darin die Größen der Icons fix eingegeben sind. Du kannst da dann also einfach die Größen von 18 z. B. auf 24 (oder welche Größe du halt benötigst) anpassen.PHP-Code:# Bestehende MimeType Icons austauschen
$GLOBALS['TL_MIME'] = array
(
'mp3' => array('audio/mpeg', 'icons/iconAUDIO.gif'),
'doc' => array('application/msword', 'icons/iconWORD.gif'),
'png' => array('image/png', 'icons/iconPNG.gif')
);
# Neue MimeType Icons hinzufuegen
$GLOBALS['TL_MIME'] = array
(
'docx' => array('application/word', 'icons/iconWORD.gif')
);
War ein kleiner Fehler drin. Habs mal eben korrigiert (kommt vom Schnelltippen ;))
Hallo,
stehe gerade vor einer ähnlichen Aufgabe: würde gerne die Syndikations-Buttons ('Auf Facebook teilen', 'Als PDF drucken' etc.) ändern. Die Icons dafür liegen allerdings in system/modules/frontend/html, wenn ich das richtig sehe.
Gibt es hier einen ähnlichen Weg zur updatesicheren Änderung der Standart-Icons?
Vielen Dank für eure Mühe.
Hi Nina,
super, vielen Dank für deine ausführliche Antwort!
Wird direkt als Bookmark hinzugefügt :)
Viele Grüße,
Jan
EDIT
Hat übrigens 1a funktioniert und ich musste nichtmal die Größe des Icons anpassen. Es hat automatisch die Größe des neuen Icons übernommen :)
Das kann nicht sein, da WIDTH und HEIGHT hard codiert sind. Evtl. schaust du mit einem Browser, welcher diese Angaben ignoriert.Zitat:
Zitat von jschma
Gruß Andreas
Wenn man sowieso die Templates ändern muss, kann man auch direkt Icons aus nem eigenen Ordner in tl_files/ nehmen und spart sich somit auch die $GLOBALS['TL_MIME'] Anpassung. Im untenstehenden Fall heißt das Verzeichnis "tl_files/mime_icons/" und die PNG-Icons "mime-[Dateiendung].png".
ce_download.xxx
ce_downloads.xxxPHP-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; ?>
<img src="<?php
// Next 2 lines are new, width and height are deleted
$mimeIcon = 'tl_files/mime_icons/mime-'.$this->extension.'.png';
echo (is_file($mimeIcon)) ? $mimeIcon : $this->icon;
?>" alt="<?php echo $this->mime; ?>" class="mime_icon" /> <a href="<?php echo $this->href; ?>" title="<?php echo $this->title; ?>"><?php echo $this->link; ?> <span class="size">(<?php echo $this->filesize; ?>)</span></a>
</div>
<!-- indexer::continue -->
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><img src="<?php
// Next 2 lines are new, width and height are deleted
$mimeIcon = 'tl_files/mime_icons/mime-'.$file['extension'].'.png';
echo (is_file($mimeIcon)) ? $mimeIcon : $file['icon'];
?>" alt="<?php echo $file['mime']; ?>" 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 -->
Kleine Ergänzung zu Ninas "Die Icons müssen generell im Ordner system/themes/default/images/ liegen.":
Da die eigenen Icons im Ordner /system/themes/default/images/ (oder in einem Unterordner) bei einem Update gelöscht werden, empfiehlt es sich, die eigenen Icons nach /tl_files/ auszulagern. Da der Pfad in der Tat fest in den Ordner /system/themes/default/images/ zeigt, muss man sich mit ein paar (genauer gesagt: vier) "../" behelfen, um da wieder raus zu kommen.
Ninas Beispiel von weiter oben sähe dann so aus:
Und im Browser kommt als Image Source dann das hier an:PHP-Code:# Bestehende MimeType Icons austauschen
$GLOBALS['TL_MIME'] = array
(
'mp3' => array('audio/mpeg', '../../../../tl_files/img/mime/iconAUDIO.gif'),
'doc' => array('application/msword', '../../../../tl_files/img/mime/iconWORD.gif'),
'png' => array('image/png', '../../../../tl_files/img/mime/iconPNG.gif')
);
# Neue MimeType Icons hinzufuegen
$GLOBALS['TL_MIME'] = array
(
'docx' => array('application/word', '../../../../tl_files/img/mime/iconWORD.gif')
);
Vielleicht hilft die Ergänzung ja, beim nächsten Update Frust zu vermeiden. :)HTML-Code:/system/themes/default/images/../../../../tl_files/img/mime/icon-pdf.png
Wieso sollten die gelöscht werden? Von welchem Update sprichst Du?Zitat:
Zitat von rnm3
Nicht vom Contao "Live Update" sondern von einem selber durchgeführten Update, bei dem Ordner oft nicht zusammengeführt (merge) sondern ausgetauscht bzw. überschrieben werden (auch um evtl. obsolete Systemdateien los zu werden).
entschuldige, ich verstehe das nicht ganz. Was meinst Du mit "mime[Dateiendung].png"? Ist stattdessen der Dateiname gemeint? Deine Lösung finde ich prinzipiell sehr gut und würde dem gerne folgen. Vielen herzlichen Dank!Zitat:
Zitat von Andreas
Herzliche Grüße
Kurze Frage hierzu. Ich habe eine Contao 3.1 Installation. Dort liegen die Icons ja in einem neuen Verzeichnis assets/contao/images/.
Ich habe die
system/modules/core/library/Contao/File.php
geöffnet, möchte dort aber nicht die neuen Pfade eingeben zwecks Updatesicherung. Ich habe daraufhin die individuellen Pfade in die system/config/initconfig.php geschrieben - wie unten zu sehen. Funzt nicht. Kann mir jemand helfen?
Zitat:
Zitat von Nina
Mit Dateiendung ist der Suffix gemeint. Beispiel mime-pdf.png, mime-doc.pngZitat:
Zitat von fast-doc
Hat mir hierbei noch jemand einen Tipp?
Zitat:
Zitat von autocrash
Liegt dein Ordner 'icons' auch in assets/contao/images/?
Hast du's auch mal über die dcaconfig.php probiert?
Besser wäre auch, wenn die Icons in files/mimeIcons/ liegen würden, also nicht im System. Ich weiß aber jetzt auswendig nicht, wie die Variable für den kompletten Pfad dann aussehen müsste.
jepp, funzt aber irgendwie nicht.Zitat:
Zitat von Andreas
ja, das wäre interessant :DZitat:
Zitat von Andreas
Gerade ausprobiert. Bei mir geht das in Contao 3.1 über die initconfig.php. Wenn du das so eingefügt hast wie in #12 zitiert, dann kann es nicht fuktionieren.
Du definierst damit ja das Array $GLOBALS['TL_MIME'] zweimal, das heißt, dass bei der zweiten Anweisung die erste wieder überschrieben wird.
Probiere es mal so:
Beachte auch die Kommas am Ende der Zeilen, die letzte hat kein Komma.PHP-Code:# Bestehende MimeType Icons austauschen und/oder neue hinzufügen
$GLOBALS['TL_MIME'] = array_merge($GLOBALS['TL_MIME'], array(
'mp3' => array('audio/mpeg', 'icons/iconAUDIO.gif'),
'doc' => array('application/msword', 'icons/iconWORD.gif'),
'png' => array('image/png', 'icons/iconPNG.gif'),
'pdf' => array('application/pdf', 'icons/iconPDF.gif')
));
Die Icons nach /files/ zu legen geht leider nicht, da der Ordner assets/contao/images hard codiert ist. Dazu müsste man das Template anpassen, was aber den Nachteil hätte, dass die Icons dann nur über die veränderten Templates funktionieren.
Zitat:
Zitat von Andreas
Sehr cool! Vielen Dank, jetzt klappts.
Also, für den Nächsten, der diese Lösung sucht, hier nochmal die Zusammenfassung:
(Contao 3.2.4)
Die eigenen Icons als .gif in 18x18px ins Verzeichnis assets/contao/images.
Die Definition in die Datei system/config/initconfig.php:
PHP-Code:# Bestehende MimeType Icons austauschen und/oder neue hinzufügen
$GLOBALS['TL_MIME'] = array
(
'mp3' => array('audio/mpeg', 'mein_iconAUDIO.gif'),
'doc' => array('application/msword', 'mein_iconWORD.gif'),
'png' => array('image/png', 'mein_iconPNG.gif'),
'pdf' => array('application/pdf', 'mein_iconPDF.gif')
);
Genau so sehe ich das auch.Zitat:
Zitat von Andreas
In der News (news_full.html5) und Eventansicht (event_full.html5) kann man auch eigene MIME Icons verwenden, dazu einfach den Code hier:
ersetzen durch:PHP-Code:<?php if ($this->enclosure): ?>
<div class="enclosure">
<?php foreach ($this->enclosure as $enclosure): ?>
<p><img src="<?php echo $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['mime']; ?>" class="mime_icon"> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?> <span class="size">(<?php echo $enclosure['filesize']; ?>)</span></a></p>
<?php endforeach; ?>
</div>
<?php endif; ?>
ACHTUNG: Die Änderung ist zwar für Version 2.11.1x, jedoch dürften die Anpassungen auf 3.2.x nicht allzu umständlich sein.PHP-Code:<?php if ($this->enclosure): ?>
<div class="enclosure">
<ul class="downloads">
<?php foreach ($this->enclosure as $enclosure): ?>
<?php
$filepath = substr($enclosure['href'], strrpos($enclosure['href'],'=')+1 );
$mydate = date ($GLOBALS['TL_CONFIG']['dateFormat'] , filemtime(TL_ROOT . "/" . $filepath));
$mytime = date ($GLOBALS['TL_CONFIG']['timeFormat'] , filemtime(TL_ROOT . "/" . $filepath));
$extension = pathinfo($filepath,PATHINFO_EXTENSION);
?>
<li><img src="<?php $enclosure['icon'] = 'files/layout/mime_icons/mime-'.$extension.'.png';
echo (is_file($mimeIcon)) ? $mimeIcon : $enclosure['icon']; ?>" width="18" height="18" alt="<?php echo $enclosure['mime']; ?>" class="mime_icon"> <a href="<?php echo $enclosure['href']; ?>" title="<?php echo $enclosure['title']; ?>"><?php echo $enclosure['link']; ?></a> <span class="size">(<?php echo $file['filesize']; ?></span><span class="date"> | <?php echo $mydate; ?></span><span class="time"> | <?php echo $mytime; ?>)</span></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Besser, der Code steht hier irgendwo... :D
ToM
Hallo miteinander,
ich häng mich hier mal ran:
Ich möchte größere Icons als von Contao vorgegeben.
Habe nun in der initconfig den Pfad zum Downloadicon (PDF) angepasst und es wird auch angezeigt, bleibt aber bei 18px Größe. In der ce_download und ce_downloads habe ich die Größen geändert, System bereinigt, Cache geleert, was muss ich noch tun? Hab ich was übersehen?
Wünsche einen schönen Feierabend!
pustefix
Also, ich habe nochmal nachgeschaut, im Quelltext stehen nach wie vor 18px, ich habe die Größe im Template aber auf 50 gesetzt, wieso greift meine Angabe nicht?
Kennt jemand eine Möglichkeit in einer Multidomain Installation in der initconfig.php eine Abfrage einzubauen, mittels der für jede Domain / Seitenbaum o.ä ein eigenes Array von Mime Icons definiert werden kann?
@mandrake
Dazu müssten in der initconfig Informationen über die im FE aufgerufene Seite bereit stehen. Weiß ich jetzt nicht, ob das der Fall ist.
Aber ich würde das dann sowieso anders machen. Die Templates ändern. Das Bild rausschmeißen und eine Klasse in den Link setzen.
Template:
Ausgabe:HTML-Code:class="mime-<?= $file['extension'] ?>"
Dann mit CSS die entsprechenden Icons vor den Links anzeigen.HTML-Code:<a class="mime-jpg" title="xxx.jpg" href="file-elements.html?file=files/xxx.jpg">xxx.jpg <span class="size">(41.0 KiB)</span></a>
Ja, die Alternative via Template Änderungen ist mir bewusst. Ich hatte die Hoffnung, dass man die Angelegenheit einfach global mittels einer entsprechenden Abfrage an zentraler Stelle regeln kann. Trotzdem vielen Dank für den Hinweis. :)
Zitat:
Zitat von willshedo
Hi, sagt mal hat sich da in Contao 3.5.12 was dran geändert? Ich habe die Anpassungen in einer 3.2er Version am laufen. Beim Test des Updates auf Version 3.5.12 musste ich feststellen, dass Dateien leider nicht angezeigt werden. Habt ihr ne ahnung warum?
Bei mir funzt das in 3.5.12 über die initconfig, die localconfig und die dcaconfig.
Allerdings solltest du das so machen
sonst überschreibst du die anderen Icons. Ich hatte das oben von 2013 auch fehlerhaft und jetzt oben nochmal korrigiert für die alten Contao Versionen.PHP-Code:$GLOBALS['TL_MIME'] = array_merge($GLOBALS['TL_MIME'], array(
'mp3' => array('audio/mp3', 'mein_iconAUDIO.gif'),
'doc' => array('application/msword', 'mein_iconWORD.gif'),
'png' => array('image/png', 'mein_iconPNG.gif'),
'pdf' => array('application/pdf', 'mein_iconPDF.gif')
));
Wenn du sowas machst, solltest du vorübergehend den internen Cache im BE deaktivieren.
Besten dank!
:-)
Wichtig ist auch der Name des Bildes. So war es zumindest bei mir. Das gif muss mit "icon" beginnen.Zitat:
Zitat von Andreas
Also:
PHP-Code:$GLOBALS['TL_MIME'] = array_merge($GLOBALS['TL_MIME'], array(
'mp3' => array('audio/mp3', 'icon_meinAUDIO.gif'),
'doc' => array('application/msword', 'icon_meinWORD.gif'),
'png' => array('image/png', 'icon_meinPNG.gif'),
'pdf' => array('application/pdf', 'icon_meinPDF.gif')
));
Das kann eigentlich nicht sein. Im Core ist nichts dementsprechendes, welches nur ein Bild erlaubt, welches mit "icon_" oder "icon" beginnen würde.Zitat:
Zitat von Flox
Darf ich fragen in welchen Ordner ihr die Dateien abgelegt habt?
es lag tatsächlich am namen.... crazy!Zitat:
Zitat von Flox
NEU
Für Contao 4 siehe Beitrag unten https://community.contao.org/de/show...l=1#post539834
---
Ich habe nochmal nachgesehen, es wird tatsächlich ein Unterschied bei dem Dateinamen/pfad gemacht https://github.com/contao/core/blob/...Image.php#L827
- Wenn das Icon mit "icon" beginnt wird es in assets/contao/images erwartet
- Wenn es nicht mit "icon" beginnt wird es in system/themes/' . \Backend::getTheme() . '/images/ erwartet
- Wenn man die Dateien z.B. in files/icons/ haben möchte, muss man den Pfad dazu schreiben und kann dann auch einen x-beliebigen Namen wählen
Also denke ich mal, dass Lösung 3 die beste wäre, weil man dabei nicht im Core ist.
Lösung 2 finde ich etwas seltsam fürs FE, da das FE ja nicht wissen kann, welches Theme im BE eingestellt ist, das ist ja Benutzer abhängig, falls überhaupt ein Benutzer eingeloggt ist.PHP-Code:<?php
if(TL_MODE == 'FE')
{
$GLOBALS['TL_MIME'] = array_merge($GLOBALS['TL_MIME'], array(
'mp3' => array('audio/mp3', 'files/icons/meinAUDIO.png'),
'doc' => array('application/msword', 'files/icons/meinWORD.png'),
'png' => array('image/png', 'files/icons/meinPNG.png'),
'pdf' => array('application/pdf', 'files/icons/meinPDF.png')
));
}
?>
Ich stand vor selbiger Aufgabe (C 4.9) und habe es übers CSS gelöst. Ein Unterverzeichnis in meinem Themeordner angelegt ('mime-icons') und dort die neuen – umgefärbten – SVGs angelegt. Die CSS-Anweisungen lauten dann z. B.
Spricht aus Eurer Sicht irgendwas dagegen?HTML-Code:.ext-xlsx {
background-image: url(../mime-icons/iconXLSX.svg)
}
Ja, in Contao 4 geht das jetzt einfacher.
Kopiere die /assets/contao/css/icons.css nach /files/css/
Ich empfehle direkt unter /files/css/ einen Ordner /files/css/img/ anzulegen. Mit dem Kunden kommunizieren, dass er Grafiken in diesem Ordner im BE nicht umbenennen oder verschieben darf!
Jetzt in der /files/css/icons.css die Pfade zu den SVGs ändern. Z.B. so:
Zum Schluss die Datei /files/css/icons.css im Layout einbinden.PHP-Code:/* alt */
.ext-pdf {
background-image:url("../images/iconPDF.svg");
}
/* neu */
.ext-pdf {
background-image: url(img/iconPDF.svg);
}