Zum Inhalt springen

Fehlendes / bei <img>

Erstellt am 2. August 2010 · 11 Antworten · letzte Antwort am 4. August 2010

Tags: HTML & CSS, Frage

schimanski99 ·

Liebe TYPO3-Versteher,

konnte leider keine passende Lösung für mein Problem finden, bzw. sie nicht umsetzen, da ich mich noch zu den Anfängern zählen muss.

Der W3C-Validator meldet folgenden Fehler:
... an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified
<img src=uploads/media/willkommen_01.jpg>

Die Fehlermeldung ist mir schon klar - das schließende / fehlt.

Aber wie kann ich bewirken, dass das schließende / beim <img>-tag gesetzt wird?

Vielen Dank im Voraus für Eure Hilfe.

Gruß, Renate

Julian.​Hofmann ·

Hallo Renate.

Kommt das IMG-Tag aus TYPO3 selbst oder aus einer Extension? Wenn es ein "normales" Bild ist (z.B. aus Text m/Bild), dann scheint Dein TYPO3 noch nicht zu wissen, dass es XHTML ausgeben soll.

Details dazu finden sie in der TSref unter CONFIG

config.doctype=xhtml_trans

Viele Grüße
Julian

schimanski99 ·

Hallo Julian,

vorweg erstmal vielen Dank.

Das Bild bzw. Bilder füge ich im Seitenelement als Text mit Bild auf der Registerkarte Media ein.

Und hier der Ausschnitt aus dem root-Template:
config {
doctype = xhtml_trans
..... }

Müsste doch so ok sein.

Gruß, Renate

Julian.​Hofmann ·

Hm. Sollte so passen.

Der W3C-Validator gibt im bericht doch auch aus, welchen Doctype er erkannt hat. Erkennt er den korrekt? Bzw. wird der Doctype von TYPO3 korrekt übernommen, d.h. steht im Quelltext richtig drin?

Hast Du den Doctype im TypoScript früher anders gehabt? Dazwischen den Cache mal geleert?

Tauchen die IMG-Tags im Quellcode wirklich so auf? <img src=uploads/media/willkommen_01.jpg>
- Normalerweiser sollte von TYPO3 hier auch das height- und width-Attribut (und alt-?) eingefügt werden.
- Normalerweise laden Bilder aus "Text mit Bild" auch im Ordner uploads/pics/. In uploads/media/ laden meines Wissens nach nur Dateien aus dem Ressources-Feld der Seiteneigenschaften.

schimanski99 ·

Der W3C-Validator gibt im bericht doch auch aus, welchen Doctype er erkannt hat. Erkennt er den korrekt? Bzw. wird der Doctype von TYPO3 korrekt übernommen, d.h. steht im Quelltext richtig drin?

Ja, wird korrekt erkannt.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

Hast Du den Doctype im TypoScript früher anders gehabt? Dazwischen den Cache mal geleert?

Ja, ist aber schon ein paar Tage her.

Tauchen die IMG-Tags im Quellcode wirklich so auf? <img src=uploads/media/willkommen_01.jpg>

Jetzt ist mir was aufgefallen. Ja, so taucht es im Quelltext auf:

<div id="header"> 
<img src=uploads/media/willkommen_01.jpg> 
</div>

A b e r: es wurde nicht mit TEXT MIT BILD erstellt, sondern stammt aus meinem root-template:

lib.logo = TEXT
lib.logo.data = levelmedia:-1, slide
lib.logo.listNum = 0
lib.logo.wrap = <img src=uploads/media/|>
lib.logo.file.height = 200

Wenn ich z.B. das Typoscript so ändere

lib.logo.wrap = <img src=uploads/media/| />

, dann müsste der Fehler doch behoben sein, oder? Aber wie gesagt, viel Ahnung hab ich noch nicht.

LG, Renate

Julian.​Hofmann ·
schimanski99 schrieb

Wenn ich z.B. das Typoscript so ändere

lib.logo.wrap = <img src=uploads/media/| />

Ja. Wobei die Attribute width, height und alt auch Sinn machen (und zumindest nach strengerem XHTML Strict nötig wären).

schimanski99 ·

Super, danke.

Und wie krieg ich die alt-, width- und height-tags dort hinein. Also ich meine, wie muss die Syntax dann aussehen?

lib.logo.wrap = <img src=uploads/media/| alt="alternativ text f. barrierefreiheit" width="100" height="100" />

Wäre das so richtig?

Julian.​Hofmann ·

Ja, das wäre der (erstmal) schnellste Weg, der auch funktionieren wird. Aber es wäre der unschöne Weg.

Ansich kannst Du hier TYPO3 Aufgaben übertragen und TYPO3 machen lassen. In Deinem TS-Schnipsel sagst Du via "lib.logo = TEXT", dass Du mit Text arbeiten willst - obwohl Du aber doch ein Bild/Image verarbeitest und auch als IMG im HTML haben möchtest. Warum also nicht ein IMAGE-Objekt erzeugen?

lib.logo = IMAGE
lib.logo {
  import =  uploads/media/
  import.data = levelmedia:-1, slide
  import.listNum = 0
  height = 200
  altText = Beschreibung des Bildes
}
schimanski99 ·

In Deinem TS-Schnipsel sagst Du via "lib.logo = TEXT", dass Du mit Text arbeiten willst - obwohl Du aber doch ein Bild/Image verarbeitest und auch als IMG im HTML haben möchtest. Warum also nicht ein IMAGE-Objekt erzeugen?

Ja, sowas ähnliches dachte ich mir auch. Aber wenn ich dies neue Schnipsel einbaue, wird gar kein Header-Image angezeigt und der Quelltext sieht folgendermaßen aus:

<div id="header"> 
 
</div>

Der div-Container ist leer. Vermutlich weil sich dort ein Subpart namens HEADER befindet.

Herrjeh, ich versteh das nicht. Mitte August nehm ich an einem Workshop teil, dann blick ich TS hoffentlich besser.

sunixzs ·

Ahoi,

glaube bei dem TS fehlt die "file"-Definition. Bei mir sieht's etwas anders aus:

page.10.marks.EYECATCHER = IMAGE
page.10.marks.EYECATCHER {
        file = fileadmin/meinStandardBildWennKeinBildInMedia.jpg
        file.maxW = 914
        file.import = uploads/media/     
        file.import.data = levelmedia:-1,slide 
        file.import.listNum = 0
        file.import.override.field = media
        wrap = <div id="eyecatcher">|</div>
}

LG sunixzs

Edith sagt: Kleiner Tipp - bei aktuellen Typo3-Versionen kann man bei den Extensions den "t3editor" aktivieren. So erhält man beim Bearbeiten der Templates direkte Hilfestellungen zum TypoScript.

schimanski99 ·
sunixzs schrieb

Edith sagt: Kleiner Tipp - bei aktuellen Typo3-Versionen kann man bei den Extensions den "t3editor" aktivieren. So erhält man beim Bearbeiten der Templates direkte Hilfestellungen zum TypoScript.

Vielen Dank ... auch an Edith. Hab ich nicht gewusst - werd ich aber gleich mal ausprobieren.

Gruß, Renate