TYPO3-Tutorial Teil 35: Inhalte anlegen – Text mit Bild

In diesem Video zeige ich euch das Inhaltselement „Text mit Bild“.
Viel Spaß!


[youtube]https://www.youtube.com/watch?v=A0KHg-CR2Dg[/youtube]
Alle TYPO3-Tutorials kostenlos downloaden

Dieser Beitrag hat 17 Kommentare

  1. scholzi

    ich möchte in htmlArea RTE dem Text verschiedene Schriftgrößen zuweisen. dort steht z.B. Standardgröße, Extrem klein, Sehr klein, Klein, Mittel, … usw.
    aber es verändert sich nicht in diesem Editor und auch nicht in der Ausgabe, also auf der Seite. ich weiß, dass ich diese Befehle noch in meine css-Datei eingeben muss, sowie die Befehle für die Textausrichtung auch. aber wie heißen diese Befehle, ich finde dazu alles mögliche, aber nix, was mir weiterhilft.
    kannst du mir da weiter helfen?
    scholzi 😉

    1. Installier dir mal im Firefox das Add-On „Firebug“. Danach gehe mal auf deine Seite, klicke den entsprechenden Textabschnitt mit der rechten Maustaste an und dann auf „Element untersuchen“.

      Du erhältsts dann eine Ansicht des Quelltextes mit den zugehörigen CSS-Definitionen des ausgewählten Elements. Dort sind du die verwendeten KLassen-Namen und kannst diese entsprechend in deinem Stylesheet definieren.

      Alternativ suche einfach in der normalen Quelltextanzeige nach dem Text.

      Gruß
      Wolfgang

      1. scholzi

        … ich habe schon alles mögliche probiert, aber ich weiß nicht, was ich da in die css eintragen muss, damit der Inhalt weiß, ich muss jetzt „Extrem Groß“ (32px) erscheinen! und da es sich auch im text-editor in typo3, also im „backend“, nicht ändert, kann es sich auch nicht auf meiner seite „frontend“ ändern. verstehst, was ich meine?
        scholzi 🙁

        1. Kleiner Tipp: installier dir mal die Extension tinymce_rte. Dabei wird die HTMLArea deinstalliert.

          Beachte dazu aber auch folgenden Blogartikel:TYPO3: tinymce_rte wird nicht angezeigt

          Und folgenden Tipp aus meinem Wiki: http://wiki.wowa-webdesign.de/doku.php?id=typo3:tinymce_eigenes_stylesheet

          Damit kannst du entweder ein eigenes Stylesheet oder dein Standardstylesheet in den Editor einbinden, so daß du gleich im Backend auch die Änderungen sieht.

          Und du kannst dann dem Text die im TS definierten Klassen zuweisen. Ich glaube, das wäre genau das, was du suchst.

  2. Henry

    Hallo Wolfgang,
    ich habe ein Problem mit der Darstellung der Bildgrößen. Ich habe Bildinhalte (text mit bild und nur bilder) angelegt und eine Breite von 300 Pixel definiert. Aber wenn die Seite geladen wird, wird das Bild in voller größe angezeigt.
    Im generierten Quelltext wird dann im li-container eine breite von 1024px angegeben (so groß wie die Bilddatei)
    ….
    Ich weiß nicht warum, hoffe du kannst mir nen tipp geben.
    Gruß Henry

    1. Henry

      sry, der HTML code wurde leider interpertiert und nicht ausgegeben.
      (li class=“csc-textpic-image csc-textpic-firstcol“ style=“width:1024px;“)…(/li)

      1. Hi,
        hm, ich kann mich erinnern, dieses Problem auch einmal gehabt zu haben, aber ich weiss nicht mehr genau, woran es lag.
        Hast du irgendeine Lightbox-Extension installiert?
        Ist ImageMagick und die GDLib im Installtool korrekt eingestellt?

        1. Henry

          Hi,
          Ich habe die Perfect Lightbox installiert, hatte das Problem mit den Bildern aber schon vorher.
          ImageMagick habe ich nicht installiert, aber was soll dies damit zu tu haben? Die Breite, die ich im Backend angeben habe, sollte doch im CSS als breite angegeben werden oder?
          Grüße Henry

          1. Wolfgang Wagner

            Du brauchst auf jeden Fall ImageMagick!
            TYPO3 verwendet nicht die Originalbilder, die du hochgeladen hast, sondern legt Kopien davon an. Und wenn die Bildmanipulationen wie eben eine Größenänderung durchführst brauchst du zwingend ImageMagick.

  3. Henry

    So jetzt funktioniert das.
    Danke für den Tipp, ich dachte der vergrößert bzw. verkleinert die Bilder mit den HTML/CSS Attributen.
    Gruß Henry

    1. Nein, zum Glück nicht, das wäre ziemlich ineffizient. Stell dir vor, ein Kunde lädt ein Bild direkt von der Digicam hoch, die haben meistens eine Größe von 2-3 MB oder mehr. Das wäre für die Performance einer Seite eine Katastrophe. Deshalb wird für jedes im Frontend angezeigt Bild eine Kopie in der entsprechenden Größe angelegt.

  4. Reto

    Hallo Wolfgang,
    erst Mal vielen Dank für Deine super Tutorials! Mit Deiner Hilfe konnte ich mir in ein paar wenigen Tagen typo3 aneignen!
    Nun habe ich aber noch eine Frage zu Bildern. Wie kann ich ein Bild mit Breite in Prozent darstellen? Also z.B. max-width 50%? Ich möchte, dass das Bild maximal 50% des Browserfensters einnimmt, egal wie gross der Browser ist.
    In meiner Vorlage hatte ich das mit yaml und class=“float-right flexible“ width=“50%“ gelöst.
    Mir wär’s auch egal wenn die 50% fix im code wären und der Kunde nur das Bild an sich austauschen könnte…
    Vielen Dank, Reto

    1. Das geht nur per CSS. An dem Thema Reponsive Design mit TYPO3 wirst du sicherlich Freude haben 😉

      1. Reto

        Dieses Video habe ich mir natürlich auch angeschaut! 🙂
        Responsive Design funktioniert auch schön, das Bild wird nie breiter als 100% der Seite dargestellt.
        Doch wie kann ich einem bestimmten Bild mit CSS eine andere Breite zuordnen? Also nicht alle Bilder sollen 50% sein, sondern nur das eine.

        1. Du kannst ja jedem Inhaltselement einen Rahmen zuweisen, damit werden dann bestimmte CSS-Klassen vergeben. Du kannst solche Rahmen auch selber definieren, wie siehst du z.B. hier: http://wiki.wowa-webdesign.de/home/snippets/detail/eigene-rahmen-fuer-inhaltselemente/?tx_in2snippets_pi1%5Bcontroller%5D=Snippet&cHash=ca5cdf3b7f8d864f7bea3493a3c75c79
          Hier kannst du jetzt eine eigene CSS-Klasse definieren, zum Beispiel „img-small“. Dann kannst du Bilder innerhalb dieser Klasse anders ansprechen, z.B.
          .img-small img { max-width:50%; }

          1. Reto

            Vielen Dank Wolfgang. Was ich vergessen hatte zu erwähnen ist, dass das Bild in einem „Text mit Bildern“ Element liegt. Dieser Rahmen betrifft aber das ganze Inhaltselement, also auch den Text. Für das Bild alleine kann ich nur ein Häckchen setzen bei „Rahmen“, jedoch keinen spezifischen auswählen… Gibt es dafür auch eine Lösung?

  5. Reto

    Hm… wenn ich das „img“ in der css Klasse weglasse, also „.img-small { max-width:50%; }“ verändert sich logischerweise das ganze Inhaltselement, doch mit dem „img“ drin passiert gar nichts. Das sollte dann doch das property des Bildes ändern…

Schreibe einen Kommentar