Ankündigung

**Tim** · 07.08.2020, 11:20

https://forum.premium-contao-themes....-umr%C3%BCsten

**Orpheus** · 07.08.2020, 14:34

Hallo Tim, super, danke f�r die Info. Habe es eben versucht - hat aber leider nicht funktioniert. Ich habe das Template "revoslider_resp_images.html5" in Templates/Layout gelegt und dann beim Revolution Slider ausgew�hlt ... funktioniert leider nicht. Der Slider zeigt dann kein Bild mehr an ... Hm, habe ich was vergessen bzw. muss ich sonst noch was beachten?

**Tim** · 10.08.2020, 07:10

Du musst Media Queries definieren f�r die Bildgr��en-Datens�tze

**Orpheus** · 10.08.2020, 10:46

Hallo Tom,

vielen Dank f�r deine Antwort – ich sch�tze es sehr, dass du immer versuchst zu helfen.

Ich habe es mir eben nochmals angesehen… ja, die Media Queries f�r die Bildgr��en habe ich definiert laut https://help.premium-contao-themes.c...ve-images.html

Ansonsten bin folgenderma�en vorgegangen:

Dein Template "revoslider_resp_images.html5" in Templates/Layout gelegt

Das Template "revoslider_resp_images.html5" bei meinem angelegten Revolution Slider ausgew�hlt

Beim Slider dann bei Bildgr��e das Background-Image ausgew�hlt

-> Auf der Seite wird dann aber leider kein Bild mehr angezeigt. Hier der Quelltext:

HTML-Code:

 <li class=" slide slide_0 even first rs_mq_image_2_0" data-transition="fade" data-slotamount="4" data-masterspeed="30" data-title="Slide 1">  <img loading="auto" src="system/modules/pct_revolutionslider/assets/img/dummy.png" width="240" height="240" alt="" class="slideimage" data-lazyload="files/cto_layout/img/slider/testbild.jpg" title="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"> </li>     <li class=" slide slide_1 last rs_mq_image_2_1" data-transition="fade" data-slotamount="4" data-masterspeed="30" data-title="Slide 2">  <img src="system/modules/pct_revolutionslider/assets/img/dummy.png" width="240" height="240" alt="" class="slideimage" data-lazyload="assets/images/c/testbild-2-5698824b.jpg" title="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"> </li>

Habe ich noch was vergessen oder falsch gemacht?

Herzliche Gr��e

Angeh�ngte Dateien

**Tim** · 10.08.2020, 10:55

Ich weiss es nicht mehr genau. Definiert den Media Query mal schnell ohne Klammern zum Test.

**Orpheus** · 11.08.2020, 19:45

Hm, also ich habe eben alles nochmals durchgetestet ... bekomme es leider nicht zum laufen. Ich werde jetzt einfach den Slider in ein separates Layout packen (Layout f�r mobile Seiten). Ist zwar nicht wirklich elegant aber funktioniert.

Sollte jemand den Slider als MediaQuery-gesteuerten Bildslider zum laufen bekommen freue ich mich sehr �ber Infos WIE.

**mariop3** · 10.03.2021, 08:38

gibt es denn hier nun eine L�sung? Es funktioniert ja nach wie vor nicht richtig und ich frage mich ob das nicht in das richtige Template geh�rt. Die Verlinkte Version weiter oben habe ich auch getestet und die funktioniert nicht. Es kommt keine Bilder mehr raus.

**mariop3** · 10.03.2021, 08:47

Na gut das ging schnell die Templates zu vergleichen und festzustellen das da noch was im Template fehlt. Warum kann man nicht einfach das ganze Template posten? Ich mache das eben dann w�re das mit dem Slider auch gel�st.

PHP-Code:


<?php
/**
* Revolution Slider html template
*/
?>

<?php // load scripts and css
global $objPage;
if(!$objPage->hasJQuery)
{
$GLOBALS['TL_JAVASCRIPT'][] = 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
}
$GLOBALS['TL_JAVASCRIPT'][] = 'files/cto_layout/scripts/rs-plugin/js/jquery.themepunch.revolution.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/cto_layout/scripts/rs-plugin/js/jquery.themepunch.tools.min.js';
$GLOBALS['TL_CSS'][] = 'files/cto_layout/scripts/rs-plugin/css/settings.css|static';
$GLOBALS['TL_CSS'][] = REVOLUTIONSLIDER_PATH.'/assets/css/styles.css|static';
$GLOBALS['TL_JQUERY'][] = $this->javascript; // js_revoslider_xxx template
?>

<?php
$objSlides = \RevolutionSlider\Models\Slides::findBy( array('pid=?','published=?'), array($this->id,1), array('order' => 'sorting') );
$arrSlides = $objSlides->getModels();
$arrMediaQueries = array();
?>
<?php if(!empty($this->slides)): ?>
<div <?php echo $this->sliderID; ?> class="banner <?php echo $this->class; ?> block">
<ul>
<?php foreach($this->slides as $i => $slide): ?>
<?php
$objSlide = $arrSlides[$i];
if( $objSlide->singleSRC && $objSlide->background == 'image' )
{
$slide['class'] .= ' rs_mq_image_'.$this->id.'_'.$i;
$objFile = \FilesModel::findByPk( $objSlide->singleSRC );
$objPicture = \Picture::create($objFile->path,deserialize( $objSlide->size) );
if( $objPicture !== null )
{
$arrPicture = $objPicture->getTemplateData();

foreach($arrPicture['sources'] ?: array() as $data)
{
if( strlen($data['media']) < 1 )
{
continue;
}
$arrMediaQueries[] = '@media ('.$data['media'].') { .rs_mq_image_'.$this->id.'_'.$i.' .tp-bgimg { background-image:url('.$data['src'].') !important; } }';
}
}
}
if( count($arrMediaQueries) > 0 )
{
$GLOBALS['TL_HEAD'][] = '<style> '.implode("\n",$arrMediaQueries).'</style>';
}
?>
<li <?php echo $slide['cssID']; ?> class="<?php echo $slide['class']; ?>" <?php echo $slide['attributes']; ?>>
<?php foreach($slide['content'] as $content): ?>
<?php echo $content; ?>
<?php endforeach; ?>
</li>
<?php endforeach; ?>
</ul>
<div class="tp-bannertimer"></div>
</div>
<?php else: ?>
<p class="info empty"><?php echo $this->emptyMsg; ?></p>
<?php endif; ?>

Meiner Meinung nach geh�rt das einfach in das finale Template. Welchen Grund gibt es das das nicht schon enthalten ist?

**D@TK** · 08.09.2021, 08:12

Hallo,

wir haben die Bildgr��en laut Doku definiert. Mit dem Revolutionslider 5 und dem Template revoslider_fullscreen_arrowdown.html5 scheint es nicht zu klappen.

Ich habe im entsprechenden Template die Ausgabe erg�nzt/ersetzt so dass es jetzt wie folgt ausschaut:

PHP-Code:


<?php // load scripts and css
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['REVOLUTIONSLIDER']['scriptPath'].'/js/jquery.themepunch.tools.min.js';
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['REVOLUTIONSLIDER']['scriptPath'].'/js/jquery.themepunch.revolution.min.js';
$GLOBALS['TL_CSS'][] = $GLOBALS['REVOLUTIONSLIDER']['scriptPath'].'/css/settings.css|static';
$GLOBALS['TL_CSS'][] = $GLOBALS['REVOLUTIONSLIDER']['scriptPath'].'/css/layers.css|static';
$GLOBALS['TL_CSS'][] = $GLOBALS['REVOLUTIONSLIDER']['scriptPath'].'/css/navigation.css|static';
$GLOBALS['TL_CSS'][] = REVOLUTIONSLIDER_PATH.'/assets/css/styles.css|static';
$GLOBALS['TL_JQUERY'][] = $this->javascript; // js_revoslider_xxx template
$GLOBALS['TL_HEAD'][] = '<style>'.implode("\n",$this->mediaqueries).'</style>';; // responsive images media queries
// set a max-width style when running in boxed mode
if($this->sliderStyle == 'boxed')
{
$GLOBALS['TL_HEAD'][] = '<style>'.$this->selector.'{max-width:'.$this->startWidth.'px;position:relative;}</style>';
}
?>
<?php
$objSlides = \RevolutionSlider\Models\Slides::findBy( array('pid=?','published=?'), array($this->id,1), array('order' => 'sorting') );
$arrSlides = $objSlides->getModels();
$arrMediaQueries = array();
?>

<?php if(!empty($this->slides)): ?>

<div <?= $this->sliderID; ?> class="banner <?= $this->class; ?> block" data-version="5.0.7">
<ul>
<?php foreach($this->slides as $i => $slide): ?>
<?php
$objSlide = $arrSlides[$i];
if( $objSlide->singleSRC && $objSlide->background == 'image' )
{
$slide['class'] .= ' rs_mq_image_'.$this->id.'_'.$i;
$objFile = \FilesModel::findByPk( $objSlide->singleSRC );
$objPicture = \Picture::create($objFile->path,deserialize( $objSlide->size) );
if( $objPicture !== null )
{
$arrPicture = $objPicture->getTemplateData();

foreach($arrPicture['sources'] ?: array() as $data)
{
if( strlen($data['media']) < 1 )
{
continue;
}
$arrMediaQueries[] = '@media ('.$data['media'].') { .rs_mq_image_'.$this->id.'_'.$i.' .tp-bgimg { background-image:url('.$data['src'].') !important; } }';
}
}
}
if( count($arrMediaQueries) > 0 )
{
$GLOBALS['TL_HEAD'][] = '<style> '.implode("\n",$arrMediaQueries).'</style>';
}
?>
<li <?php echo $slide['cssID']; ?> class="<?php echo $slide['class']; ?>" <?php echo $slide['attributes']; ?>>
<?php foreach($slide['content'] as $content): ?>
<?php echo $content; ?>
<?php endforeach; ?>
</li>
<?php endforeach; ?>
</ul>
<a href="{{env::request}}#container" id="linkToContent" ><span class="wheel"></span></a>
<div class="tp-bannertimer"></div>
</div>
<?php else: ?>
<p class="info empty"><?php echo $this->emptyMsg; ?></p>
<?php endif; ?>

Leider f�hrt das nicht zum Ergebnis, dass die Bildgr��en laut Media Queries ausgespielt werden.

Wie muss denn das Template angepasst werden um die Funktion zu erm�glichen?

**Tim** · 08.09.2021, 08:28

In aktuellen EX bzw. RS5 Versionen ist das Feature direkt im RS Kern implementiert. Template-�nderungen sind nicht n�tig.

F�r �ltere Verisonen:
ps. @media ohne die hardcodierte Klammerung schreiben. Die Klammern kommen mit $data['media']

**D@TK** · 09.09.2021, 07:33

Zitat von Tim Beitrag anzeigen

In aktuellen EX bzw. RS5 Versionen ist das Feature direkt im RS Kern implementiert. Template-�nderungen sind nicht n�tig.

F�r �ltere Verisonen:
ps. @media ohne die hardcodierte Klammerung schreiben. Die Klammern kommen mit $data['media']

Joa dann haben wir hier scheinbar noch eine �ltere Version am Start. Der Tipp @media in den Bildgr��en ohne Klammer zu schreiben f�hrt zum Ergebnis -> max-width: 2560px statt (max-width: 2560px).

Allerdings wenn ich die Seite im mobilen Modus aufrufe und im Network-Tab des Browsers gucke, l�dt er die Bilder mit den Originalgr��en trotzdem mit rein. Das f�hrt dazu, dass mobil mal eben noch �ber 9 MB nachgeladen werden.

Was muss ich denn einstellen um das zu verhindern?

Danke f�r die Unterst�tzung.

**Tim** · 09.09.2021, 08:33

Die Backend-Schreibweise ist mit Klammern, siehe Hinweistext im Backend-Feld. Daher Klammern im Template weglassen.

MediaQueries k�nnen das Laden der Originaldatei nicht unterbinden. Es ist eine reiner Bildtausch.

**sven** · 19.12.2022, 13:15

Hallo zusammen

Stehe momentan eine wenig auf dem Schlauch, da ich gerne meine Bilder im "Revolution Slider" je nach Viewport unterschiedlich ausgeben m�chte. Habe unter Bildgr�ssen z.B eine kleinere "Version" definiert > Background-Image Header 1920x900, (max-width: 767px) 767x.

In aktuellen EX bzw. RS5 Versionen ist das Feature direkt im RS Kern implementiert. Template-�nderungen sind nicht n�tig.

Habe eine Contao 4.9.9 und die die letze Eclipse_Version im Einsatz. Ohne Anpassung am Template reagieren die Einstellungen nicht. Erstellte Bildgr�sse ist zugewiesen. Das Bild bleibt aber immer gleich gross (1920x900).

revoslider_default.html5 (Ohne Anpassungen)

PHP-Code:


<?php
/**
* Revolution Slider html template
*/
?>

<?php // load scripts and css
global $objPage;
if(!$objPage->hasJQuery)
{
$GLOBALS['TL_JAVASCRIPT'][] = 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
}
$GLOBALS['TL_JAVASCRIPT'][] = 'files/cto_layout/scripts/rs-plugin/js/jquery.themepunch.revolution.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'files/cto_layout/scripts/rs-plugin/js/jquery.themepunch.tools.min.js';
$GLOBALS['TL_CSS'][] = 'files/cto_layout/scripts/rs-plugin/css/settings.css|static';
$GLOBALS['TL_CSS'][] = REVOLUTIONSLIDER_PATH.'/assets/css/styles.css|static';
$GLOBALS['TL_JQUERY'][] = $this->javascript; // js_revoslider_xxx template
?>

<?php if(!empty($this->slides)): ?>

<div <?php echo $this->sliderID; ?> class="banner <?php echo $this->class; ?> block">
<ul>
<?php foreach($this->slides as $slide): ?>
<li <?php echo $slide['cssID']; ?> class="<?php echo $slide['class']; ?>" <?php echo $slide['attributes']; ?>>
<?php foreach($slide['content'] as $content): ?>
<?php echo $content; ?>
<?php endforeach; ?>
</li>
<?php endforeach; ?>
</ul>
<div class="tp-bannertimer"></div>
</div>
<?php else: ?>
<p class="info empty"><?php echo $this->emptyMsg; ?></p>
<?php endif; ?>

Was m�sste ich da anpassen? Danke f�r die Unterst�tzung.

**Jonathan** · 16.02.2024, 17:29

Moin zusammen. Ich habe den Revolution Slider auf dem Desktop im Breitbildformat. Auf dem Handy sollte das Format dann eher quadratisch sein. Kann ich dies mit dem angepassten Template revoslider_resp_images.html5 erreichen?

Ankündigung

Responsive Images

Responsive Images

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar