Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive Images

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

  • Responsive Images

    Hallo,

    kann es sein der "Revolution Slider" nicht mit "Responsive Images" -> meine er lädt auch unter 767px das "große" Bild ... hm, bevor ich da nun ewig rummache - vielleicht kann mir da kurz jemand eine Info geben - also nur ob der Slider kompatibel mit "Responsive Images" ist - also ob er das "kleiner Bild" bei unter 767px laden müsste. Vorab herzlichen Dank und viele Grüße

  • #2
    https://forum.premium-contao-themes....-umr%C3%BCsten
    http://www.premium-contao-themes.com

    Kommentar


    • #3
      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?

      Kommentar


      • #4
        Du musst Media Queries definieren für die Bildgrößen-Datensätze
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          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:
          1. Dein Template "revoslider_resp_images.html5" in Templates/Layout gelegt
          1. Das Template "revoslider_resp_images.html5" bei meinem angelegten Revolution Slider ausgewählt
            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: screen template.jpg
Ansichten: 3
Größe: 24,8 KB
ID: 2519
          1. Beim Slider dann bei Bildgröße das Background-Image ausgewählt
            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: screen bildgröße.jpg
Ansichten: 1
Größe: 26,1 KB
ID: 2523
          -> 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
          Zuletzt geändert von Orpheus; 10.08.2020, 18:15.

          Kommentar


          • #6
            Ich weiss es nicht mehr genau. Definiert den Media Query mal schnell ohne Klammern zum Test.
            http://www.premium-contao-themes.com

            Kommentar


            • #7
              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.

              Kommentar


              • #8
                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.

                Kommentar


                • #9
                  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?

                  Kommentar

                  Lädt...
                  X