✔ Typo3--Wie Überschrift <h> eingeben und ersetzendes Bild dazu auswählen

[Gast170816]

Hallo,

ich suche für Typo3 eine Möglichkeit, wie ich bei einem normalen Text-/TextBild-Element, wo man doch zunächst die Überschrift eingeben kann... da will ich parallel zur Überschrift ein Bild auswählen.

Das Bild soll per "text-indent: -10001em;" in der CSS dann immer weggeschoben werden und nur das Bild soll sichtbar sein.

So will ich also grafische Überschriften machen, die aber von Suchmaschinen etc. auch als Text erkennbar sind.

Gibt es dafür eine Extension (was halt die Überschrift-Eingabe um einen Bild-Upload-Dialog ergänzt)?
Teilweise hab ich schon Tipps gelesen, man solle das doch mit TypoScript machen. Aber da kenn ich mich leider nicht so gut mit aus. Im Prinzip muss die Funktion immer nur sein "1. Überschrifttext rausschieben", "2. Hochgeladenes Bild gehört zu Überschriftstext".

 

[josDesign]

Die einzig wahre Möglichkeit ist das ganze per Typoscript zu erledigen. Und wozu Bilder hochladen? die TYPO3-Gifbuilder Function erstellt dir dein gewünschtes Bild.
Poste mal ein Beispielbild deiner Überschriften!

 

[Gast170816]

Sowas ähnliches... das per Typoscript machen... hab ich schonmal hinbekommen, bei einer Navigation.

Aber ich hab letzens mal eine Internetseite gesehen, die war doll mit Grafiken, z.B. alle Überschriften als nettes Comicbildchen oder auch Erklärungen als Bildskizzen.
In der CSS da hab ich erkannt, die Leute haben eigentlich alles per Text geschrieben (also Überschriften, Listen, Texte), aber dann immer den Text per "text-indent" oder "display none" weggeschoben und stattdessen per "background url(bild blabla)" ein Bild eingefügt.

Also so hatten die praktisch eine schön ansprechend bunte bildintensive SEite, die trotzdem gut funktionieren würde, wenn die Bilder mal "defekt" wären oder mit der die Suchmaschine auch was anfangen kann.

So gut bin ich mit Typoscript auch nicht... ich dachte mir halt, dass es total toll bedienfreundlich wäre, wenn ich z.B. eine Überschrift oder einen Text schreiben könnte und dann könnte ich ein Bild hochladen, dass diesen Text wiederum komplett ersetzt.

Auf der Internetseite, die ich gesehen hatte war das dann z.B. so:
Ein DIV hieß "welcome", darinnen stand meinetwegen "herzlich willkommen liebe Leute", aber zusätzlich hatte das div "welcome" noch ein "background - Bild" bekommen, wo statt dem langweiligen Text halt eine lustiges Comicbildchen (also z.B. ne Mickymaus, die Hallo sagt) war.
(PS: Laienhaft vermute ich jetztmal...eine Typo3-Extension, die sowas kann müsste dann halt zu dem Inhaltselement ein div erstellen... damit man ja dem div wiederum ein background-image zuweisen kann!)

Mit TS... da sitz ich Monate, weil ich sowas eigentlich nicht kann.
Hat da nicht schon mal jemand ne Extension erfunden?

Ohne Typo3, nur so ne bloße Internetseite, da wüsste ich wie ich halt alles eintippe und dann in der CSS das Bild angebe... aber ich dachte eben, so ganz easy in Typo3 ein "Text-Ersatzbild" angeben wäre toll!

 

[Gast170816]

Hat niemand einen Tipp?

Ich könnte ja auch dort, wo ich halt Bilder hinmachen will eben Bilder einsetzten (per "Bildelement einfüg"), aber ich dachte, es wär "schicker" wenn für Suchmaschinen ein "unsichtbarer" Text wäre der das Bild repräsentiert. Eine Seite, die viele Bilder hat, ist zwar schön, aber ja doch eigentlich "fachmännisch" gesehen nicht barrierfrei/nutzerfreundlich?!

Vermutlich könnte man das schon mit TypoScript machen.
Aber wenn es ein einfacher Redakteur pflegen soll, dann wär das etwas zuviel verlangt, da wär die Möglichkeit eines Hochlade-Dialogs besser.
Z.B. Listentext schreiben, der beschreibt, wie im Versandhandel ein Bestellvorgang abläuft... aber dann ersetzt ein Bild diesen Text, wo vielliecht eine tolle leicht verständlich Grafik den Bestellvorgeang mit 1,2,3...Bildern erklärt.

Ich denke sowas muss es doch als Extension oder sowas geben, denn ich habe bemerkt, dass viele moderne Designagenturen so Ihre Seiten gestalten.

 

[Gast170816]

Da ich jetzt ne Ecke schlauer bin und die Sache mit "Flexiblen Inhaltselementen" (FCE) ausprobiert habe, beantworte ich die Frage mal selbst.

1. ins DIV oben mitreinschreiben style="background: url()"
2. beim mappen ATTR (attribute) wählen
3. ATTR auf das oben erwähnte DIV mappen
4. als Art für das Bedienelement im Flexbilen Inhaltselement "Image Field" wählen.
5. aus dem Pulldown-Menü, was nach dem mappen noch erscheint das Attribut wählen (müsste ungefähr so aussehen: style="background)")

6. Alles wie gewohnt als "Content Element"-TO/DS speichern
7. in die DS (data structure) gehen und die Stelle suchen, wo es um das "Image Field" geht... dort gibts ne Stelle für TypoScript (<typoscript></typoscript>)
8. Folgendermaßen dort den Code ergänzen:
<TypoScript>
10 = IMG_RESOURCE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.stdWrap.wrap = background: url(|)
</TypoScript>

Also der Clou ist die letzte Zeile da, wo per "Wrap" und per "|" die Upload-Image-Information zwischen die Klammern bei "background: url" eingefügt wird.
(Ohne das würde die Information nämlich nur zwischen die zwei Anführungszeichen bei style=" " eingefügt.)

So, nuja... vielleicht hat's ja jemand anders auch was gebracht.
Details, wie ob sich das Bild wiederholen soll, oder wie groß das DIV als feste Größe sein soll, damit eben auch das Bild gut reinpasst könnte man bestimmt separat in der CSS machen oder eben ganz ähnlich nach diesem Beispiel "style element um repeat- und widht/height-informationen ergänzen, als attribut mappen, blahblah"...

PS: Ich habs hier mit nem DIV beschrieben, ich denke mal, das kann man exakt genauso für eine <h>-Überschrift machen. Und das <h> selbst dann nochmal als ELEMENT mappen und ein "Plain Input field" bietet dann die Möglichkeit die Überschrift in Textform nochmal einzugeben.