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, …

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(); ?>

---

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.

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

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.

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

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.