Content Slider Bildbeschreibung und anzuzeigende Bilder

[gregl]

Hallo,

ich hab soeben meinen ersten Content Slider gebastelt. Soweit so gut, nun bräuchte ich aber noch 2 Änderungen und ich weiß nicht wie ich die umsetzen soll:

Die Bildbeschreibung sollte über dem Bild sein.

Es sollten 2 statt einem Element angezeigt werden.

Weiß da jemand eine Lösung? Danke!

[marcos]

Hallo gregl

Herzlich willkommen im Contao Forum!

Also du hast einen Content-Slider erstellt und dort drin verschiedene Bilder eingefügt?
Um die Position der Bildbeschreibung zu ändern, müsstest du dann das Template "ce_image.html5" bearbeiten (Template > neues Template)

Zwei Bilder gleichzeitig zu sliden ist etwas schwieriger. Du müsstest dazu zwei Element in ein Div packen.

Es gibt aber noch das Modul caroufredsel. Ich glaube dieses Modul macht genau das, was du brauchst

Gruss
Marco

[gregl]

He, vielen Dank!

Leider bin ich zu blöd, um zu erkennen, wi ich es genau einsetzen muss.

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

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

  <figure class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>

    <?php if ($this->href): ?>
      <a href="<?php echo $this->href; ?>"<?php if ($this->linkTitle): ?> title="<?php echo $this->linkTitle; ?>"<?php endif; ?><?php echo $this->attributes; ?>>
    <?php endif; ?>

    <?php $this->insert('picture_default', $this->picture); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>

    <?php if ($this->caption): ?>
      <figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
    <?php endif; ?>

  </figure>

<?php $this->endblock(); ?>

Das mit den 2 Bildern in ein Div ist auch in dem selben Template, oder? da müsste ich dann Zeile 4 - 10 kopieren?

Ausserdem würde ich gerne den vor und zurück Text gegen Bilder austauschen, geht das auch in diesem Template?

[gregl]

Keiner eine Idee? Ich weiß, das ist sicher ganz easy, aber ich steh echt an.

[marcos]

Hallo gregl

Für die Beschreibung musst du nur den Teil 'caption' vor das Bild kopieren und speichern:

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

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

  <figure class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>

      <!-- Beschreibung -->
      <?php if ($this->caption): ?>
      <figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
    <?php endif; ?>

    <!-- Link / Bild -->
    <?php if ($this->href): ?>
      <a href="<?php echo $this->href; ?>"<?php if ($this->linkTitle): ?> title="<?php echo $this->linkTitle; ?>"<?php endif; ?><?php echo $this->attributes; ?>>
    <?php endif; ?>

    <?php $this->insert('picture_default', $this->picture); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>    

  </figure>

<?php $this->endblock(); ?>

Bzgl. sliden der Bilder ist mir soeben noch eine Idee gekommen. Du könntest das via Inhaltselemente lösen.

Content-Slider Anfang
  HTML mit <div class="content_wrapper">
      Bild 1
      Bild 2
  HTML mit </div>
  HTML mit <div class="content_wrapper">
      Bild 3
      Bild 4
  HTML mit </div>
Content-Slider Ende

Damit sollte eigentlich immer das DIV "content_wrapper" mit den beiden Bildern drin geslidet werden.

Gruss
Marco

[gregl]

So, ich hab jetzt deinen Code verwendet, aber jetzt zerreißt es das Layout.

http://goo.gl/DJOMPH

Das Komische ist, das tritt auch auf, wenn ich das ce_image Standard Template auswähle. Nur wenn ich kein individuelles Template auswähle erscheint der Teaser normal.

[gregl]

Bis jetzt rumprobiert, ich bekomms nicht hin!

[marcos]

So, ich hab jetzt deinen Code verwendet, aber jetzt zerreißt es das Layout.

Also wenn du caption oben (vor dem Bild) einfügst zerreisst es dir das Layout? Ev. musst du noch ein paar CSS Anpassungen machen?
Die Anpassung bei ce_image hat Einfuss auf alle Bilder in Contao, die via ein Inhaltselement "Bild" eingefügt wurden. Du kannst das Template aber auch umbenennen (z.B. ce_image_2) und dann z.B. nur einem bestimmten Inhaltselement via "Individuelles Template" zuweisen.

Gruss
Marco

[gregl]

Ja, leider, die Navigation ist jetzt ganz ausserhalb:

Webseite



Ich habe das Custom Template umbenannt in "ce_image_custom_slider".

[marcos]

Hmm... dein HTML Code sieht etwas komisch aus. Wie hast du es denn im Backend aufgebaut? Hast du vielleicht zu viel aus dem "ce_image_custom_slider" gelöscht? Poste dein Template doch mal kurz hier.

Der HTML Code müsste in etwa so aussehen (inkl. DIV damit zwei Bilder gleichzeitig geslidet werden (gemäss meinem Beispiel oben))

<div class="ce_sliderStart article_bottom_slide block">
	<div class="content_wrapper">
		<div class="ce_image block">...</div>
		<div class="ce_image block">...</div>
	</div>
	<div class="content_wrapper">
		<div class="ce_image block">...</div>
		<div class="ce_image block">...</div>
	</div>
</div>

[gregl]

Hm, ich weiß nicht. Leider blick ich da mit dem PHP Code nicht so durch:

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

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

  <figure class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>> 

      <!-- Beschreibung --> 
      <?php if ($this->caption): ?> 
      <figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption> 
    <?php endif; ?> 

    <!-- Link / Bild --> 
    <?php if ($this->href): ?> 
      <a href="<?php echo $this->href; ?>"<?php if ($this->linkTitle): ?> title="<?php echo $this->linkTitle; ?>"<?php endif; ?><?php echo $this->attributes; ?>> 
    <?php endif; ?> 

    <?php $this->insert('picture_default', $this->picture); ?> 

    <?php if ($this->href): ?> 
      </a> 
    <?php endif; ?>     

  </figure> 

<?php $this->endblock(); ?>

Habe deinen Code übernommen, den du gepostet hast, müsste doch passen, oder?

[marcos]

Ja, das passt so.

Komisch, dass es aber nicht korrekt dargestellt wird:

<figure class="image_container">
  <img width="255" height="153" title="Demontage der Druckmaschine" alt="Demontage der Druckmaschine" src="files/profo/bilder/slider-leistungen/demontage-der-druckmaschine.png">
  <figcaption class="caption" style="width:255px">Demontage der Druckmaschine</figcaption>
</figure>

Wird wirklich das richtige Template beim Bild ausgewählt?
Hast du bei Template einen Ordner für die Templates erstellt? Falls ja, ist dieser Ordner beim Themes ausgewählt (Templates-Ordner)
Lösche mal den Cache (vor allem Skriptcache und Internen Cache)


Gruss
Marco