Contao-Camp 2024
Ergebnis 1 bis 7 von 7

Thema: Bild asymmetrisch trennen

  1. #1
    Contao-Nutzer
    Registriert seit
    29.09.2010.
    Ort
    Oberstdorf
    Beiträge
    78

    Standard Bild asymmetrisch trennen

    Ich versuche ein Bild an einer Stelle zu trennen und dazwischen einen Text-Box zu platzieren. Jetzt wäre es durchaus sinnvoll wenn ich im Template die auch die Ausrichtung bestimmen kann.

    Hier gibt es ja bei der Bildgröße die Möglichkeit "Links | Mitte" und "Rechts | Mitte".
    Ziel wäre eine Bildausgabe mit der Bildgröße (Screenshot im Anhang):

    {{picture::<?= $file->path ?>?size=6&pos=left_center}} <div class="ce_text">Bla bla bla</div> {{picture::<?= $file->path ?>?size=4&pos=right_center}}

    Ich nutze Contao 4.11 bei diesem Projekt.

    Wichtiger Bereich nutzt hier leider auch nichts, da ja immer "Mitte | Mitte" zugeschnitten wird wenn der Wichtige Bereich nicht beachtet werden soll.
    Hat mir jemand einen Tipp, gerne auch per PHP, Bildprozessor, …
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo,

    ungetestet würde ich versuchen, von einem ce_text.html5 ausgehend das Template mit einem zweiten Bild anzupassen
    PHP-Code:
    <?php $this->extend('block_searchable'); ?>

    <?php $this->block('content'); ?>

      <?php if (!$this->addBefore): ?>
        <?= $this->text ?>
      <?php endif; ?>

      <?php if ($this->addImage): ?>
        <?php $this->insert('image'$this->arrData); ?>
        <?php $this->insert('image'$this->arrData); ?>
      <?php endif; ?>

      <?php if ($this->addBefore): ?>
        <?= $this->text ?>
      <?php endif; ?>

    <?php $this->endblock(); ?>
    und danach mit CSS stylen
    Vorrangig mit clip-path: polygon() und flexbox
    Die Reihenfolge der tags neu via CSS ordnen

    oder du passt das Template gleich entsprechend der Reihenfolge an

    PHP-Code:
    <?php $this->extend('block_searchable'); ?>

    <?php $this->block('content'); ?>

      <?php if ($this->addImage): ?>
        <?php $this->insert('image'$this->arrData); ?>
      <?php endif; ?>

        <?= $this->text ?>

      <?php if ($this->addImage): ?>
        <?php $this->insert('image'$this->arrData); ?>
      <?php endif; ?>

    <?php $this->endblock(); ?>
    Grüsse
    Bernhard


  3. #3
    Contao-Fan Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    264

    Standard

    Für mich wäre das ein Bild , über dem eine Textbox absolut positioniert ist. Der mittlere Teil ist einfach verdeckt. Damit kann man dann auch andere responsive Varianten bilden.

  4. #4
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Nein, nicht ganz - wenn ich die Anforderung korrekt verstanden habe und mir das Bild ansehe, so ist das Bild 2-geteilt.
    Rechter Rand des linken Bildes = linker Rand des rechten Bildes. Als auseinander geschnitten, der Textblock mittig eingefügt
    Grüsse
    Bernhard


  5. #5
    Contao-Nutzer Avatar von BennyBorn
    Registriert seit
    10.06.2011.
    Ort
    Edenkoben
    Beiträge
    239
    Partner-ID
    6916

    Standard

    Das Bild aus dem Anhang ist aber nicht auseinandergeschnitten sondern der Text überlagert einfach nur einen Teil. Ich würde es in dem Fall einfach mit CSS lösen. Im Textelement noch ein Container um den eigentlichen Text herum und das Bild absolut im Hintergrund positionieren.

  6. #6
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    Hallo, ich würde dafür das Hero-Modul von Erdmann&Freunde benutzen und ansonsten mich @BennyBorn Ausführungen anschließen.

  7. #7
    Contao-Nutzer
    Registriert seit
    29.09.2010.
    Ort
    Oberstdorf
    Beiträge
    78

    Standard

    Danke für den Vorschlag mit dem Clip-Path. Daran hatte ich garnicht gedacht. So kann man dem Thema auch entgehen. Ich hatte es mit background-image und background-size:cover versucht. Dabei ist das heraus gekommen wie im Screen-Shot. Spätestens responsive bekommt man hier schnell Probleme.

    Es ist, um es vielleicht besser mit Worten zu beschreiben ein Bild, das durchgeschnitten wird und dann dazwischen eine Text-Box. Der Screenshot war etwas verfälscht. Es soll theretisch ohne Text nahtlos ein Gesamtbild aus den beiden Teilen entstehen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •