Suche Flaggenersatz für Polyglot_XH

[Michael_G]

Hallo zusammen,
seit Mitte August läuft meine große zweisprachige Website mit einer einzigen neuen Domain anstatt mit zwei sprachlich angepassten.
So habe ich auch wieder Polyglot_XH installiert, vor allem wegen der automatisch korrekt gesetzten hreflang-Links im Header. Leider fehlen die hreflang-Links auf der Startseite, aber das ist ein anderes Thema.

Ich vermisse die Möglichkeit, anstelle von Flaggen Texte für das Polyglot-Sprachmenü verwenden zu können.

Leider habe ich für macOS noch immer kein kleines praktisches Grafiktool wie IrfanView für Windows gefunden,
mit dem ich mir rasch selbst GIF-Dateien mit Texten wie DE, EN und Start erstellen könnte.
Und im Internet findet man auch nur kostenlose und kostenpflichtige GIFs mit Flaggen, aber keine GIFs als Flaggenersatz mit Texten wie DE (oder „Deutsch”) und EN (oder „English”).
Habe auch als Link zur Introseite, auf der Besucher manuell DE oder EN wählen können, einen Globus als GIF-Datei ausprobiert, aber wenn man verfügbare Grafiken auf 20 Pixel Bildhöhe (Breite entsprechend umgerechnet) schrumpft, sieht das alles schlecht aus bzw. ist nicht mehr erkennbar.

Habe mir dann so geholfen, dass ich mittels Apple Pages die Texte erstellt und per Screenshot jpg-Bilder erzeugt habe.
Diese habe ich dann mittels Pym (kleines Grafiktool) auf 50 Pixel Höhe (Breite automatisch angepasst) geschrumpft und als GIF gespeichert (20 Pixel Höhe sehen schlimm aus).
Das ist nun meine Notlösung, die einigermaßen gut aussieht (meine Website siehe Userprofil).

Mein Verbesserungsvorschlag/meine Bitte (wenn mal jemand Lust und Zeit hat, eilt nicht):
Es gibt hier im Downloadbereich bereits Flaggen zum Herunterladen.
Wäre es nicht schön, wenn jemand mit entsprechenden Möglichkeiten dafür ein Downloadpaket mit Flaggenersatz erstellt?
Also GIF-Dateien in den gängigen Größen z. B. 32x20 Pixel, mit oder ohne Rand, Texte wie „DE”, „EN”, „Start”, „Home”, „Intro”?

Hätte ich noch einen Windows-PC, würde ich das selbst angeboten haben.

P. S. 1: Vielleicht hat einer von euch Template-Entwicklern solche Text-GIFs erstellt?
P. S. 2: Polyglot_XH läuft auch prima unter PHP 8.2

[olape]

Ja, das „Problem“ wurde schon mehrfach angesprochen, die Flaggen passen in vielen Fällen nicht wirklich.
Meine Wahl würde dann aber entweder wirklich auf Text fallen, oder svg. Weder gif noch jpg halte ich hier für geeignet und auch png scheidet aus meiner Sicht aus.

[Tata]

Leider habe ich für macOS noch immer kein kleines praktisches Grafiktool wie IrfanView für Windows gefunden...

Das Problem hatte ich auch, wenn ich am iMAC arbeiten begonnen habe. Seit damals habe ich Paralles desktop installiert, so habe ich, falls nötig, auch Windows installiert mit allen Applikationen, die unter OSX nicht gibt (IrfanView, RealDraw und andere).

[olape]

Ich vermisse die Möglichkeit, anstelle von Flaggen Texte für das Polyglot-Sprachmenü verwenden zu können.

Meine Wahl würde dann aber entweder wirklich auf Text fallen, oder svg.

/plugins/polyglott/views/languagemenu.htm
ersetze den Inhalt mal bitte mit:

Code: Select all

<!-- Polyglott_XH: language menu -->
<?php foreach($languages as $language):?>
<a href="<?php echo $language['href'];?>">
    <span title="<?php echo $language['alt'];?>"><?php echo $language['alt'];?></span>
</a>
<?php endforeach;?>

!!!ungetestet!!!
Muss dann natürlich sicher noch gestylt werden.

[lck]

P. S. 1: Vielleicht hat einer von euch Template-Entwicklern solche Text-GIFs erstellt?

Leider nicht bzw. nur vereinzelt für meine Template-Demos. Frank vielleicht?

Speziell für deine Seite, könnte man es auch per CSS gestalten. Am Ende deiner Template stylesheet.css einfügen

Code: Select all

.langMenu img {
    display: none;
}
nav.langMenu a {
	color: #ff0000;
	font: 600 24px/1.5em system-ui, sans-serif;
	padding: 0 0 0em 0.5em;
}
nav.langMenu a[href$="tips/"]:before {
	content: "Start";
}
nav.langMenu a[href$="tips/en/"]:before {
	content: "EN";
}
nav.langMenu a[href$="tips/de/"]:before {
	content: "DE";
}

Das hat den Vorteil, man kann das gestalten wie man will, color, padding, margin, font-size ...

Oder, man kann Polyglott auch svg beibringen. Dazu müssten nur die config's erweitert werden und dann eben Text-svg's erstellen und in userfiles/images/flags speichern.
Es gibt online-Tools zur svg-Erstellung, z.B. Text to svg.

[Michael_G]

P. S. 1: Vielleicht hat einer von euch Template-Entwicklern solche Text-GIFs erstellt?

Leider nicht bzw. nur vereinzelt für meine Template-Demos. Frank vielleicht?

Speziell für deine Seite, könnte man es auch per CSS gestalten. Am Ende deiner Template stylesheet.css einfügen

Code: Select all

.langMenu img {
    display: none;
}
nav.langMenu a {
	color: #ff0000;
	font: 600 24px/1.5em system-ui, sans-serif;
	padding: 0 0 0em 0.5em;
}
nav.langMenu a[href$="tips/"]:before {
	content: "Start";
}
nav.langMenu a[href$="tips/en/"]:before {
	content: "EN";
}
nav.langMenu a[href$="tips/de/"]:before {
	content: "DE";
}

Das hat den Vorteil, man kann das gestalten wie man will, color, padding, margin, font-size …

Oder, man kann Polyglott auch svg beibringen. Dazu müssten nur die config's erweitert werden und dann eben Text-svg's erstellen und in userfiles/images/flags speichern.
Es gibt Online-Tools zur svg-Erstellung, z.B. Text to svg.

Hallo @lck,
danke sehr für Deine CSS-Lösung, die gefällt mir am besten!
Sieht prima aus!

Nachteil: funktioniert so nur auf den Startseiten /, /de/ und /en/, aber nicht auf weiteren Seiten.
Habe dann die Idee gehabt, in einer Suchmaschine den Suchstring „CSS URL abfragen” einzugeben.
Gefunden: https://www.mediaevent.de/css/css-selek ... ektor.html
Die dort beschriebene Lösung war mir bereits bekannt und ich nutze sie zur Kenntlichmachung externer Links und Sprungmarken auf eigenen Webseiten.
Es war nur eine kleine Änderung Deines Codes nötig: anstelle von a[href$="tld/Sprachordner/"… muss es heißen: a[href^="https://domain.tld/Sprachordner/"

Lösung für alle, die vielleicht später die gleiche Problemstellung haben:
In stylesheet.css des Templates fhs-whitespace einfügen (bei anderem Template ggf. Attribute für Farben, Fonts etc. anpassen!):

Code: Select all

.langMenu img {
    display: none;
}
.langMenu a {
	display: inline-block;
	padding: 0 0 .1em .1em;
	border: 0;
}
nav.langMenu a {
	color: #ff0000;
	font: 600 24px/1.5em system-ui, sans-serif;
	padding: 0 0 0em 0.5em;
}
nav.langMenu a[href^="https://domain.tld/en/"]:before {
	content: "EN";
}
nav.langMenu a[href^="https://domain.tld/de/"]:before {
	content: "DE";
}

Wer auch die Homepage der Hauptsprache ohne Sprachordner (konservativ, bzw. wie von CMSimple_XH eigentlich gedacht) einbinden möchte, fügt darunter (!) noch ein:

Code: Select all

nav.langMenu a[href$="https://domain.tld/"]:before {
	content: "Start";
}

Wer dafür nicht nur wie ich eine einzige Seite (Sprachauswahl) nutzt, sondern wirklich die Hauptsprache ohne Sprachordner nutzt, ersetzt hier das Dollarzeichen $ durch ein Hochdach ^ (also wie oben bei DE und EN verwendet. Dann werden auch Unterseiten berücksichtigt).

Ich wollte die Hauptsprache (bei mir nur eine Sprachauswahlseite mit Fake-Sprache) nicht verlinken, fand aber bisher keine Möglichkeit.
Diese CSS-Lösung ist für mich auch deshalb perfekt, weil ich so selbst bestimmen kann, dass nur DE/EN verlinkt werden.

@olape: Auch Dir vielen lieben Dank für die von Dir ungetestete Lösung, die hatte ich auch direkt getestet.
Hat funktioniert, aber ich kann die Verlinkung zur Fake-Startseite nicht weglassen.

BTW: Ich nutze die Browsersprache der Besucher, um gleich die richtige Startseite /de/ oder /en/ zu laden.
Die Sprachauswahlseite (Fake-Sprache, hier: AT) erscheint nur, wenn ein Besucher weder Deutsch noch Englisch im Browser als Sprache hinterlegt hat. Die Sprachauswahlseite enthält auch Links zur Hilfe (zweisprachig) und gibt Tipps zur Verwendung der Browsersprache.
Deshalb ist eine Verlinkung zu dieser Seite weder erwünscht noch notwendig.

[olape]

Hat funktioniert, aber ich kann die Verlinkung zur Fake-Startseite nicht weglassen.

Deshalb ist eine Verlinkung zu dieser Seite weder erwünscht noch notwendig.

Was denn nun?

Ich glaube, ich kann dem im Moment nicht ganz folgen. Aber ist ja auch egal.
Du hast eine Lösung für dich gefunden, damit ist alles ok.

[lck]

Nachteil: funktioniert so nur auf den Startseiten /, /de/ und /en/, aber nicht auf weiteren Seiten.

Richtig. Das ist das Problem, wenn man nicht selber alles testen kann.

Diese CSS-Lösung ist für mich auch deshalb perfekt, weil ich so selbst bestimmen kann, dass nur DE/EN verlinkt werden.