Tweet
Hi Leute,
der RS ermöglicht bereits von Haus aus eine responsive Darstellung. Um den RS in ein "media query driven" Slider um zu wandeln, anbei ein kleines modifiziertes revoslider_ Template.
Mit dem Template werden die Contao-responsive-Image Bildgrößen in die Slide-Hintergründe geladen und deren MediaQuery-Definitionen dynamisch eingesetzt.
revoslider_...html5
der RS ermöglicht bereits von Haus aus eine responsive Darstellung. Um den RS in ein "media query driven" Slider um zu wandeln, anbei ein kleines modifiziertes revoslider_ Template.
Mit dem Template werden die Contao-responsive-Image Bildgrößen in die Slide-Hintergründe geladen und deren MediaQuery-Definitionen dynamisch eingesetzt.
revoslider_...html5
Code:
<?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; ?>
Kommentar