Foto und Text Responsive

    Hallo an alle :)


    ich stehe vor folgendem Rätsel:


    Beim einfügen eines Fotos im Text Editor wähle ich "Float Left" aus. Nun wird das Foto links angezeigt und der Text passt sich beim Verkleinern des Bildschirms an.


    Was mich stört ist, dass bei einer gewissen Größe des Bildschirms nur noch wenige Worte neben dem Fotos stehen (siehe Foto1).


    Besser wäre es, wenn der Text ab einer gewissen Größe des Bildschirms unter das Foto rutschen würde und sich das Foto an die Bildschirmgröße anpasst (ähnlich wie in Foto2).


    Hat jemand eine Ahnung wie man dies auf dem üblichsten Wege hinbekommt?


    Besten Dank und viele Grüße,


    Stefan

    Hallo Christian,


    vielen Dank für Deine schnelle Antwort.


    Leider kann ich hier im Forum keinen Link posten, da ich die Seite vor dem Relaunch nicht im Netz haben möchte. Zudem ist die Seite Passwort geschützt (per PN teile ich Dir aber gerne alles mit).


    Mit der Bearbeitung des Quellcodes und einfügen von


    <div class="row">

    <div class="col-md-6"><img src="images/surfer-1838958_1920.jpg" alt="" /></div>

    <div class="col-md-6">Ein Test ist ein methodischer Versuch, mit dem festgestellt werden soll, ob Eigenschaften oder Leistung einer Sache, einer Person oder einer Hypothese den Erwartungen entsprechen.[1][2] Der Test unterscheidet sich vom Experiment dadurch, dass es beim Test eine Erwartung gibt, die belegt oder widerlegt werden soll, während das Ergebnis beim Experiment offen ist oder nur vermutet werden kann.[3]<br /><br />Mit Testung wird das Testen, das Getestetwerden bezeichnet,[4] die Untersuchung eines Gegenstandes oder Sachverhaltes, zum Beispiel auf Richtigkeit oder Funktionsfähigkeit. Verschiedene Bereiche der Technik und Wirtschaft verwenden abweichende Definitionen. So steht Test teilweise als Synonym für die Qualitäts- oder Endprüfung, Erprobung oder Messung. Die Standardisierungsorganisationen ISO und IEC definieren den Test im Sinne einer Ermittlung.[2] Die DIN 1319 verwendet hingegen die Bezeichnung Prüfen, bei dem festgestellt wird, wie weit ein Prüfobjekt die Forderungen erfüllt.[5]</div>

    </div>


    funktioniert es schon.


    Das blöde ist, dass im Editor die Änderungen nicht zu sehen sind und man immer im Quellcode "rumwursteln" muss.


    Deswegen habe ich die Vermutung, dass es eine einfachere Lösung geben könnte?


    Besten Dank und viele Gruesse


    Stefan

    Hier wurde bereits Ähnliches diskutiert: Bedingtes Floating möglich?


    Ab einer gewissen Bildschirmbreite (hier 769px) werden Bild und Text nebeneinander dargestellt, darunter wird das Bild mit 100% angezeigt (bzw. 90% mittig).


    Ähnliches kann man das auch mit float: left; machen.


    Vielleicht gibt es in deinem Fall weitere Möglichkeiten. Müsste man wirklich die Seite kennen.


    Ich hatte meinen css-Code in der custom.css letztendlich folgendermaßen erweitert:


    Das Bild bekommt dann je nachdem, ob links oder rechts, folgendes mit:


    Hallo an alle :)


    vielen Dank für Eure schnelle Antworten und die Infos. Dank Euren Tipp's habe ich nun sogar mehrere Möglichkeiten das Problem zu lösen :)


    Ich denke letztendlich werde ich die Klasse col-md-6 verwenden, das passt in meine Falle recht gut:


    https://getbootstrap.com/docs/3.4/css/#grid-example-basic


    Vielen Dank auch für den Verweis auf Bedingtes Floating möglich? .


    Hier schreibt Indigo66 "Du kannst Bilder "grundsätzlich" ab einem bestimmten Breakpoint das Floating entziehen und die Breite auf 100%, Höhe AUTO setzen."


    Wisst Ihr was damit gemeint ist?


    Besten Dank und viele Gruesse


    Stefan

    Wenn du Bootstraps grid layout verwendest (col-md-6), dann sollten diese breakpoints und mediaquerys bereits von Bootstrap gesetzt sein.


    Musst du also nicht mehr selber hinzufügen.

    JoomGallery::friends ist aktuell noch auf der Suche nach Helfern für die JoomGallery 4 Entwicklung!

    Gesucht sind Leute für die PHP-Entwicklung, zum Testen, Übersetzen und Dokumentieren.

    Bei Interesse melde dich per PM oder Mail bei mir (Elfangor93).

    Hallo an alle :)

    Zitat von chr-hl

    Hallo,

    m.E. CSS mit mediaqueries usw.


    Christian

    Müsste man dann in diesem Falle immer noch im Html-Code des Artikels bei jedem Bild etwas dazu schreiben oder besteht die Möglichkeit im CSS etwas einzutragen, dass dann allen Bildern ab eine gewissen Bildschirmgröße das Floating entzogen wird?


    Besten Dank und viele Gruesse, Stefan

    Zitat von Stefan0280

    Müsste man dann in diesem Falle immer noch im Html-Code des Artikels bei jedem Bild etwas dazu schreiben oder besteht die Möglichkeit im CSS etwas einzutragen, dass dann allen Bildern ab eine gewissen Bildschirmgröße das Floating entzogen wird?

    CSS-Anweisungen, die sich auf alle Bilder beziehen, sind nicht unbedingt von Vorteil, da sie sich wirklich auf alle Bilder auswirken.
    Stell dir vor, du hast ein kleines Bild (z.B 100px), wo der Text auch auf kleineren Bildschirmen (<769px) locker daneben passt und es auch vernünftig ausschaut. Nun verzichtest du aufgrund der allgemeinen Anweisung auf das Floating und das Bild wird auf 100% verbreitert und dadurch möglicherweise unscharf.

    Welches die optimale Vorgehensweise ist, hängt letztendlich von deiner Seite ab.


    Sind die Bilder ungefähr gleich groß, ist das Ganze mit einem Grid-Layout oder ähnlichem meist unproblematisch. Ansonsten steuere ich das meist "manuell", also so wie in #5 angegeben.

    Muss man halt ausprobieren.

    Hallo an alle :)


    und vielen Dank für die zahlreichen Tipps. Wenn ich alles richtig verstanden habe gibt es also zwei Möglichkeiten:


    a) Über das Grid System (in meinem Falle https://getbootstrap.com/docs/3.4/css/#grid-example-basic)


    oder


    b) in den Eigenschaften des eingefügten Bildes eine Klasse hinzufügen (welche im Css stehen muss).


    Ich denke ich werde es dann erst einmal über das Grid System lösen, aber auch noch einmal schauen, ob bei Bootstrap 3 ggf. sogar schon solche Klassen (@media / .no-float ) vorhanden sind.


    Vielen Dank für Eure Hilfe und viele Gruesse, Stefan

    Du kannst dich ja auch am neuen Bootstrap inspirieren: https://getbootstrap.com/docs/5.0/utilities/float/ da ist das float responsive...

    Für das zuweisen gibt es die Möglichkeit eine editor.css einzulegen (zu ergänzen), dann kann die klasse einfach aus dem Dropdown gewählt werden oder mit eigenen Code-Snippets arbeiten ( https://github.com/joomla/joom…editors/tinymce/templates ).

    Dann muss niemand im Quellcode rumpfuschen.

    Nur als Ergänzung wegen

    Zitat von Stefan0280

    man immer im Quellcode "rumwursteln" muss

    und

    Zitat von bembelimen

    dann muss niemand im Quellcode rumpfuschen.

    Will man solche Konstrukte identisch öfter verwenden bzw. auch ungeübteren Benutzern die Möglichkeit geben, so DIV-Gebastel und vieles anderes per Mausklick in Editor einzusetzen, damit sie nicht zu kreativ werden ;) ist der "Content Templater" ein gutes Tool. "Template" meint dabei schlicht ein Code-Schnipsel, vielleicht mit Platzhaltern [HIER DAS BILD EINSETZEN] oder [HIER DEN TEXT EINSETZEN], das halt auf Klick eingesetzt wird und man füllt es dann nur noch mit Bild sowie Text.

    https://regularlabs.com/contenttemplater

    Dafür gibt es dann auch einen Editor-Button mit Dropdown.

    Servus,

    ich war gerade erstaunt dieses Symbol noch nie gesehen zu haben. Dachte einfach komplett übersehen, schaue mir gerade mal den JCE an - ich finde dieses Symbol nicht.

    Wie kommt man an diese Funktion?

    Bei mir in der Konfig schaut es so aus:


    weit und breit dieses Symbol nirgends zu sehen search