---
title: "Content type image"
url: "https://www.typo3.net/d/71063-content-type-image"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Frage"]
created: "2007-11-29"
last_reply: "2007-12-01"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# Content type image

TYPO3 › TypoScript · 1 Antwort · gestartet 2007-11-29

## Eröffnungsbeitrag

**opaque** · 2007-11-29 · [Beitrag #1](https://www.typo3.net/d/71063-content-type-image/1)

Hallo

Ich habe ein Objekt vom Type "Image" erstellt und einige Bilder eingefügt. Leider habe ich immer Abstände um die Bilder. Der Code sieht überhaupt sehr wirr aus:

```html
<div class="csc-textpic csc-textpic-center csc-textpic-above"><div class="csc-textpic-imagewrap" style="width:100px;"><div class="csc-textpic-imagerow" style="width:100px;"><dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:50px;"><dt><img src="uploads/pics/88_01.gif" width="50" height="35" border="0" alt="" /></dt></dl></div>...
```

ein bisschen viel für ein Bild.

Kann man keinen Content vom Typ Image erstellen ohne diesen ganzen Code.

also nur:

```html
<img src="uploads/pics/88_01.gif" width="50" height="35" border="0" alt="" />
```

danke walter

## Antworten

### [#2](https://www.typo3.net/d/71063-content-type-image/2) · Jehu · 2007-12-01

Die Abstände werden durch das Typo3-Eigene CSS (css_styled_content) bestimmt. Du kannst die Werte im eigenen Stylesheet überschreiben, notfalls mit "!important".

Typo3 nutzt die verschiedenen Klassen zur Formatierung der verschiedenen Bildausrichtungen. Wenn du die rausschmeisst, gehen dir die verschiedenen Ausrichtungs-Optionen verloren.

Du kannst natürlich trotzdem die ganze Sache nach belieben beeinflussen. "Einfach" folgenden Code in dein Template einbauen und verändern:

```typoscript
tt_content.image.20 = USER
tt_content.image.20 {

  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>

  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn" style="width:{register:columnwidth}px;"> | </div>

  layout = CASE
  layout {
    key.field = imageorient
    # above-center
    default = TEXT
    default.value = <div class="csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
    # above-right
    1 = TEXT
    1.value = <div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
    # above-left
    2 = TEXT
    2.value = <div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div>
    # below-center
    8 = TEXT
    8.value = <div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
    # below-right
    9 = TEXT
    9.value = <div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
    # below-left
    10 = TEXT
    10.value = <div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div>
    # intext-right
    17 = TEXT
    17.value = <div class="csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
    # intext-left
    18 = TEXT
    18.value = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
    # intext-right-nowrap
    25 = TEXT
    25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
    25.insertData = 1
    # intext-left-nowrap
    26 = TEXT
    26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div>
    26.insertData = 1
  }

  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>      
      noRowsStdWrap.wrap =
      #oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </dl>
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:220px;"> | </dl>
      imgTagStdWrap.wrap = <dt> | </dt>
      editIconsStdWrap.wrap = <dd> | </dd>
      caption.wrap = <dd class="csc-textpic-caption"> | </dd>
    }
    ul {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"><ul> | </ul></div>
      noRowsStdWrap.wrap = <ul> | </ul>
      oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </li>
      imgTagStdWrap.wrap =
      editIconsStdWrap.wrap = <div> | </div>
      caption.wrap = <div class="csc-textpic-caption"> | </div>
    }
    div {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
      noRowsStdWrap.wrap =
      oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </div>
      imgTagStdWrap.wrap = <div> | </div>
      editIconsStdWrap.wrap = <div> | </div>
      caption.wrap = <div class="csc-textpic-caption"> | </div>
    }
  }
  renderMethod = dl
}
```

Gruß
Jehu

---

Quelle: „Content type image“, typo3.net, https://www.typo3.net/d/71063-content-type-image
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.