Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive Images

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Jonathan
    antwortet
    Vielen Dank für deine Einschätzung.

    Einen Kommentar schreiben:


  • Tim
    antwortet
    Zitat von Jonathan Beitrag anzeigen
    Hallo Tim, kannst du hier noch mal einen Tipp geben?

    Der Revolution-Slider soll auf dem Desktop im Panorama-Format sein und auf dem Handy quadratisch.

    Gibt es einen eleganteren Weg als über die customize.css?
    Das wäre mit zwei Slidern besser gelöst. Einen für Desktop, einen fürs Handy. Die Unterschiede im Format sind zu gravierend.

    Einen Kommentar schreiben:


  • Jonathan
    antwortet
    Hallo Tim, kannst du hier noch mal einen Tipp geben?

    Der Revolution-Slider soll auf dem Desktop im Panorama-Format sein und auf dem Handy quadratisch.

    Gibt es einen eleganteren Weg als über die customize.css?

    Einen Kommentar schreiben:


  • Jonathan
    antwortet
    Danke für die Info.

    Ich bräuchte jetzt trotzdem einen Tipp wie ich das hinbekommen kann. Muss ich das dann bei "Layout -> Themes -> Eclipse -> Bildgrößen des Themes bearbeiten" eine neue Bildgröße für den Slider erstellen?

    Einen Kommentar schreiben:


  • Tim
    antwortet
    Zitat von Jonathan Beitrag anzeigen
    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?
    Hi, das Template braucht es mit aktuellen Versionen des Moduls nicht mehr.

    Einen Kommentar schreiben:


  • Jonathan
    antwortet
    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?

    Einen Kommentar schreiben:


  • sven
    antwortet
    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.

    Einen Kommentar schreiben:


  • Tim
    antwortet
    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.

    Einen Kommentar schreiben:


  • D@TK
    antwortet
    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.

    Einen Kommentar schreiben:


  • Tim
    antwortet
    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']

    Einen Kommentar schreiben:


  • D@TK
    antwortet
    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']) < )
    {
    continue;
    }
    $arrMediaQueries[] = '@media ('.$data['media'].') { .rs_mq_image_'.$this->id.'_'.$i.' .tp-bgimg { background-image:url('.$data['src'].') !important; } }';
    }
    }
    }
    if( 
    count($arrMediaQueries) > )
    {
    $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?

    Einen Kommentar schreiben:


  • mariop3
    antwortet
    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']) < )
    {
    continue;
    }
    $arrMediaQueries[] = '@media ('.$data['media'].') { .rs_mq_image_'.$this->id.'_'.$i.' .tp-bgimg { background-image:url('.$data['src'].') !important; } }';
    }
    }
    }
    if( 
    count($arrMediaQueries) > )
    {
    $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?

    Einen Kommentar schreiben:


  • mariop3
    antwortet
    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.

    Einen Kommentar schreiben:


  • Orpheus
    antwortet
    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.
    Zuletzt geändert von Orpheus; 11.08.2020, 20:00.

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:

Lädt...
X