Jeder Artikel mit eigenem Hintergrundbild

[danielm]

Hi,

ich würde gerne mehrere Artikel auf einer Seite mit je einem eigenen Hintergrundbild versehen. So, dass die Hintergrundbilder mitscrollen.
Mit Caroufredsel scheint es nicht zu klappen, da wird immer nur das zu oberst angelegte Hintergrundbild angezeigt

Jemand eine Idee, womit sich das umsetzen lässt?

Grüße und Danke,
Daniel

[Samuell]

Was verstehst Du unter mitscrollt?
Einen Parallax-Effekt?

[Gassi]

Wenn ich das richtig verstehe geht das am besten über CSS.
Hintergrundbild zu jedem Artikel einfügen (am besten eine eigene ID für jeden Artikel vergeben) - dann mit Hintergrundeigenschaft: cover für jeden Artikel das Bild auswählen.
https://developer.mozilla.org/de/doc...ackground-size

Ist halt nicht für den redaktionellen Bereich geeignet... sonst müsste der Kunde mit CSS arbeiten.
Zur Not für jeden Artikel ein bild in der Dateiverwaltung anlegen - das der REdakteur austauschen kann.

[gaxweb]

Ich klink' mich hier mal ein.

Gibt's dafür mittlerweile eine Lösung? Evtl. in der 4er? Es würde mir nämlich im Moment sehr helfen, wenn ich je Artikel ein Hintergrundbild über das BE zuweisen könnte.

Wenn nicht, was wäre die eleganteste Lösung, bei der das Bild auch zumutbar verwaltbar ist? Extra Modul? Eigenes Artikel- oder Text-Template, bei dem ich das bereits vorhandene Inhaltsbild einfach als Hintergrundbild zweckentfremde?

CSS-Klasse angeben und dann im CSS das Bild definieren ist leider keine Option.

[lucina]

Du könntest beispielsweise ein Artikelbild benutzen, dass Du via $GLOBALS, angereichert um ein wenig CSS, in die Seite bringst. Ist ein wenig Templating ... ;-)

[Andreas]

Wenn du wirklich Artikel meinst, dann müsstest du ein Filepickerfeld auf die Artikel aufsetzen. Dann im Template kannst du den Pfad zu diesem Bild als Inline-Style benutzen

<el style="background-image:url(path/to/selected/image.jpg);">...

Der Contao-Slider slidet allerdings keine Artikel, sondern Inhaltselemente. Dann müsstest du das Gleiche wie oben mit den Artikeln mit den Inhaltselementen machen.

Ein Workaround für die Artikelvariante wäre, wenn du ein CE Typ Bild im Artikel erstellst und dem z.B. immer die Klasse article-bg gibst. Dann mit JS dieses Bild suchen und die URL vom Bild als CSS-Hintergrund für den Artikel nehmen. Das CE selber auf display:none setzen oder mit JS entfernen.

Ein Workaround für die CE-Variante wäre über dem CE welches geslidet werden soll ein CE-Bild zu erstellen mit der Klasse next-ce-bg. Dann im FE mit JS wieder in etwa das Gleiche. Da musst du aber aufpassen, dass der Slider erst aufgesetzt wird, nachdem dieses Bild-Element per JS wieder entfernt wurde, damit es nicht mitgeslidet wird. Ich weiß nicht, ob ein display:none dort ausreichen würde, damit der Slider es ignoriert.

Ich bin mir aber nicht sicher, ob du wirklich von einem Slider sprichst, weil du einmal Caroufredsel erwähnst, aber dann von "scrollen" sprichst.

[gaxweb]

Verschiedene User. Mir geht's nur um Artikel.

Wie gesagt, es muss für "Redakteure" verwaltbar sein, was also jede Art von nachträglicher Quelltextmanipulation (das schließt CSS mit ein) beim Einpflegen der Inhalte (leider ) ausschließt. Mit anderen Worten: das Bild muss im BE auswählbar sein.

Ich hab es für den Moment per eigenem ce_text Template gelöst:

<div class="<?= $this->class ?> block"<?= $this->cssID ?>>

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

  <?php if ($this->addImage): ?>
  <style>#<?= str_replace([' id=','"'], '', $this->cssID) ?> {
       background-image: url('<?= $this->src ?>');
       background-repeat: no-repeat;
       background-size: contain;
       height:0;
      padding-bottom: <?= round(($this->height*100) / $this->width, 1) ?>%;
  }</style>
  <?php endif; ?>
  
  <div class="textPanel" <?php if (is_string($this->margin)){ ?> style="<?= $this->margin ?>"<?php } ?>>
    <?php if ($this->headline): ?>
    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
  <?php endif; ?>
  <?= $this->text ?>
  </div>
  
<?php $this->endblock();

Dabei missbrauche ich das Zusatzbild für den Hintergrund, und die Abstandsangaben des Bildes um den Text zu positionieren.

So ist es aber natürlich nur auf das eine ce_text Inhaltselement beschränkt. Ich kann also nicht mehrere Inhaltselemente auf das HG-Bild setzen. Könnte ich ein HG-Bild für den gesamten Artikel vergeben, dann würde das gehen. :-/

Möchte das ungern mit JS lösen, aber wäre auch denkbar. Danke für den Denkanstoß, Andreas.

[Andreas]

Ich finde diese Lösung nicht gut. Wie du schon sagst, ist das dann der BG für das CE und nicht für den Artikel, außerdem musst du dann zusätzlich ein anderes Template wählen. Der STYLE-Tag im BODY sieht auch nicht gut aus, wenn, dann solltest du die dynamischen Werte direkt mit style="" auf das DIV legen und die anderen Werte über deine CSS aufsetzen. Dann kannst du dir auch dierekt dieses str_replace... sparen.

Ein Filepicker-Feld auf die Artikel aufzusetzen ist nicht sonderlich schwer, dann kannst du nachher im Template sehr einfach sowas hier benutzen.

<!-- mod_article.html5 -->
<?php
  $bgStyle = '';
  $bgClass = '';
  if($this->myBGImg)
  {
    $bgStyle = 'background-image:url('.$this->myBGImg.');';
    $bgClass = ' hasBg';
  }
?>
<div class="<?= $this->class.$bgClass ?> block"<?= $this->cssID ?><?php if ($this->style || $bgStyle): ?> style="<?= $this->style.$bgStyle ?>"<?php endif; ?>>
...

Die Lösung mit einem CE Typ Bild im Artikel ist auch nicht schlecht, alles was der User dann machen muss ist die Klasse is-bg dort einzutragen. Wenn du ein CE Typ Bild mit der Klasse is-bg in einen Artikel einfügst und mir einen Link zeigst, könnte ich dir auch das JS zeigen, wie du damit das Hintergrundbild für den Artikel setzen kannst.

[gaxweb]

Ok, überzeugt. Dann wäre ein Anhaltspunkt gut, wo ich lernen kann wie man "Ein Filepicker-Feld auf die Artikel" aufsetzt. Wüsste nämlich gerade nicht wo ich suchen sollte (von Google mal abgesehen).

Andernfalls mach ich es evtl. doch per JS. Ich könnte das dann ja theoretisch auch in einem eigenen Template (ce_bgimg oder so) regeln, das nicht viel mehr macht, als das bisschen JS einzubinden. Je mehr ich darüber nachdenke, desto besser gefällt mir das.

[Andreas]

Hier kannst du starten https://docs.contao.org/books/manual...nzufuegen.html und dir auch viel aus dem Core abschauen. Du brauchst ein gutes Tool um in Dateien nach Strings zu suchen, z.B. FileLocator Pro. Damit bekommst du auch die Fundstellen angezeigt und dein Editor öffnet die Datei dann direkt mit Scroll auf die Fundstelle.

Ja das mit z.B. ce_text-bg habe ich mir auch schon gedacht, damit würde sich der User dann die Eingabe der Klasse is-bg sparen, aber muss im Austausch dann halt das eigene Template wählen.

[gaxweb]

Danke. Das Feld hab ich der DB hinzufügen können. Allerdings ist der Rückgabewert des Dateibrowsers binär, weshalb im Template auch nur Binärdaten ankommen. Wie kann ich daraus wieder den Pfad zum Bild machen?

edit: das sieht doch interessant aus: https://community.contao.org/de/show...tselement-Bild

edit2: Hat sich erledigt.

$objModel = \Contao\FilesModel::findByUuid($this->feldname); 

war es.