BC 1.x Favicons einbinden

DG70 · Beitrag von **DG70** » Di 13. Apr 2021, 18:33

Und schon wieder eine Frage, diesmal zur Template Erstellung.

CSS-, JS-Dateien und META Tags können ja bequem und zentral über die headers.inc.php eingebunden, doch wie bekommt man die vielen Favicons eingebunden?

Direkt in den <head> Bereich der Template .tpl Datei:

Code: Alles auswählen

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Oder besteht die Möglichkeit es auch, quasi zentral, in der headers.inc.php einzufügen? Habe dazu leider nichts gefunden im Wiki oder Forum.

Noch cooler wäre sicher eine Erweiterung im SEO Tool Addon, aber das wird wohl nicht mehr angefasst in der 1.3 Version, oder?

Beitrag von **creativecat** » Mi 14. Apr 2021, 06:48

Das SEO-Tool wird vermutlich nicht mehr angepasst, nein. Es wäre zum Beispiel Interessant, wenn Modul das OG-Image setzen könnte (zum Beispiel für News-Seiten).
Das Favicon ist ja meistens eher durchgängig bei einer Seite identisch, daher codiere ich das immer fest und so schaut mein Header in der Regel aus:

Code: Alles auswählen

	{get_page_headers}

	<meta name="robots" content="index, follow">
	<meta name="author" content="...">
	<meta name="copyright" content="{date("Y",time())} ...">

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
	<meta name="format-detection" content="telephone=no">

	<link rel="canonical" href="{$cat_url}">

	<meta property="og:title" content="{page_title}">
	<meta property="og:site_name" content="...">
	<meta property="og:url" content="{$cat_url}">
	<meta property="og:type" content="website">
	<meta property="og:image" content="https:{template_dir}/css/default/images/preview_image.png">
	<meta property="og:image:secure_url" content="https:{template_dir}/css/default/images/preview_image.png">
	<meta property="og:image:type" content="image/png">
	<meta property="og:image:width" content="1200">
	<meta property="og:image:height" content="628">
	<meta property="og:description" content="{page_description}">

	<link rel="apple-touch-icon" sizes="57x57" href="https:{template_dir}/css/default/images/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="https:{template_dir}/css/default/images/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="https:{template_dir}/css/default/images/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="https:{template_dir}/css/default/images/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="https:{template_dir}/css/default/images/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="https:{template_dir}/css/default/images/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="https:{template_dir}/css/default/images/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="https:{template_dir}/css/default/images/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="https:{template_dir}/css/default/images/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192" href="https:{template_dir}/css/default/images/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="https:{template_dir}/css/default/images/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="https:{template_dir}/css/default/images/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https:{template_dir}/css/default/images/favicon-16x16.png">
	<link rel="manifest" href="https:{template_dir}/css/default/images/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="https:{template_dir}/css/default/images/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">

DG70 · Beitrag von **DG70** » Mi 14. Apr 2021, 13:36

Okay, ich habe bisher die zusätzlichen META Einträge in der headers.inc.php vom Template gesetzt:

Code: Alles auswählen

$mod_headers = array(
	'frontend' => array(
		'js'  => array(),
		'css' => array(
    			array('file' => 'modules/lib_bootstrap_4/vendor/css/bootstrap.css'),
			array('file' => 'modules/lib_bootstrap_4/vendor/icons/font/bootstrap-icons.css'),
			array('file' => 'templates/'.pathinfo(__DIR__,PATHINFO_BASENAME).'/css/default/frontend.css'),
		),
        	'jquery' => array( 'core' => true, 'ui' => true ),
        	'meta' => array(
            		array('name'=>'viewport','content'=>"width=device-width, initial-scale=1.0"),
			array('name'=>'robots','content'=>"index, follow"),
			array('name'=>'author','content'=>"xxx"),
			array('name'=>'copyright','content'=>"xxx"),
			array('name'=>'geo.region','content'=>"DE-SH"),
			array('name'=>'geo.placename','content'=>"xxx"),
			array('name'=>'geo.position','content'=>"12.345678;12.345678"),
			array('name'=>'ICBM','content'=>"12.345678, 12.345678"),
            		array('http-equiv'=>'X-UA-Compatible','content'=>'IE=edge'),
		)
    ),

Im Template selbst dann mit {get_page_headers} eingebunden.
War mir nicht sicher ob das für die Favicons auch geht ? Und wenn ja wie die Syntax ausschaut ...
Hatte die Hoffnung ich könnte "alles" in einer Datei vorhalten, nun ja direkt im Template geht ja dann auf jeden Fall.

Beitrag von **shadowcat** » Mi 14. Apr 2021, 14:00

Wir haben zwar 'meta' vorgesehen, aber nicht 'link'. Könnte man aber einbauen.

DG70 · Beitrag von **DG70** » Mi 14. Apr 2021, 14:22

Also mir würdest du mit dem "Einbau" eine große Freude machen ... :daumen:

Da ich aber nicht einschätzen kann wieviel Aufwand es tatsächlich bedeutet und ob es das Ganze wert ist, akzeptiere ich natürlich Eure Entscheidung dazu.

Das Testen dazu kann ich auf jeden Fall "übernehmen" ...

DG70 · Beitrag von **DG70** » Di 1. Jun 2021, 13:24

Auch wenn es sicher kein "Prio 1" Thema ist ... möchte ich noch etwas dazu loswerden ...

Die Vielzahl an nötigen Icons und die dazugehörigen Einträge im <head> Bereich sind bei der Erstellung und Pflege von Templates eher umfangreich und aufwendig als einfach und schnell ... auch wenn Google hierfür eine Menge Werkzeuge (Icon Generatoren) "liefert".

Ich wollte das einfacher und habe es nun auf 5+1 Icons reduziert.
1. icon.svg, die modernen, gängigen Browser können mittlerweile SVG. Wenn man im Nachgang die SVG Datei editiert und die Einträge für "width" und "height" entfernt ist die Datei absolut frei skalierbar. Über den <style> Eintrag "prefers-color-scheme:dark" kann man die Farbe des Icons für den Dark-Mode anpassen. So hat man in einer Datei quasi alle Größen und zwei Farb-Varianten.
2. icon.png (32x32 Pixel), für die Browser ohne SVG Unterstützung.
3. apple-touch-icon.png (180x180 Pixel), für IPad and Co. Seit IOS 8 wird ein "downscaling" in akzeptabler Qualität unterstützt.
Je nach Logo kann es besser aussehen wenn das eigentliche Logo 140x140 Pixel groß ist und ein weißer 20 Pixel Rand dazugefügt wird.
4. icon-192.png (192x192 Pixel), für Android Geräte
5. icon-512.png (512x512 Pixel), für Android Geräte

6. favicon.ico (16x16 / 32x32 Pixel) als "Fallback" im Root der Webseite ohne(!) Eintrag im <head> Bereich. Falls keins der obigen Icons unterstützt wird.
Das manifest.webmanifest kommt als Datei natürlich noch dazu ...

Ist soweit nicht meine Idee, funktioniert aber sehr gut ... gefunden über Google (englischer Text):
https://evilmartians.com/chronicles/how ... most-needs
und
https://www.leereamsnyder.com/blog/favicons-in-2021

Black Cat relevantes:
Um möglichst weit oben in der Ordnerstruktur die Icons zu platzieren, habe ich diese nicht dem Template selbst zugeordnet, sondern im CMS Media Bereich untergebracht. Der Uploadfilter im Backend/Media Bereich mag leider keine SVG Dateien ... akzeptiert aber ein FTP upload.
Auch das favicon.ico bekommt man nur per FTP in den Root Bereich der Webseite, komfortabler wäre es natürlich mit dem SEO-Tool.

Vielleicht findet Ihr noch ein wenig Lust und Zeit die beiden Punkte für BC 1.x einzupflegen (?)

BlackCat CMS Forum

BC 1.x Favicons einbinden

BC 1.x Favicons einbinden

Re: BC 1.x Favicons einbinden

Re: BC 1.x Favicons einbinden

Re: BC 1.x Favicons einbinden

Re: BC 1.x Favicons einbinden

Re: BC 1.x Favicons einbinden