MetaModels Workshop in Berlin
Ergebnis 1 bis 14 von 14

Thema: Bildgrößen / Fehler im Markup

  1. #1
    Contao-Nutzer
    Registriert seit
    28.02.2011.
    Beiträge
    197

    Standard Bildgrößen / Fehler im Markup

    Hallo zusammen,

    ich habe eine Bildgröße eingestellt.

    bildgroesse.png

    und dann als ce_image eingebunden

    ce_image.png

    Ich habe das eigentlich schon x-mal gemacht, aber dieses Mal erzeugt das HTML mehrere Fehler:

    Code:
    Error: No space between attributes.
    
    Error: Element img is missing required attribute src.
    HTML-Code:
    <div id="image-wrapper-1863914535" class="image-wrapper content__bild">
    <img data-wrapper="#image-wrapper-1863914535" data-wrapper-style="#image-wrapper-1863914535:not(.loaded){height:141px}" class="tns-lazy-image image" data-lazy="http://m3.heise-homepage.de/assets/images/1/ibg-schweisstechnik-01-ef0ae632.jpg" data-src="http://m3.heise-homepage.de/assets/images/1/ibg-schweisstechnik-01-ef0ae632.jpg" data-srcset="http://m3.heise-homepage.de/assets/images/1/ibg-schweisstechnik-01-ef0ae632.jpg 272w, assets/images/e/ibg-schweisstechnik-01-ccca48ab.jpg 544w, assets/images/d/ibg-schweisstechnik-01-201be09a.jpg 816w, assets/images/f/ibg-schweisstechnik-01-8bcc61fd.jpg 1088w" sizes="(max-width: 600px) 100vw, 70vw"alt="Alttext"itemprop="image">
    Ich habe keine Templates angepasst (welches wird hier überhaupt genutzt?)

    Hat jemand ne Idee, woher der Fehler kommt?

    Viele Grüße,
    conter

  2. #2
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.208

    Standard

    Wenn Du die Seite mit der app_dev.php aufrufst, bekommst Du die verwendetn Templates im Quelltext angezeigt.

    Z.B. so:

    Code:
    <!-- TEMPLATE START: vendor/contao/core-bundle/src/Resources/contao/templates/elements/ce_image.html5 -->
    <div class="ce_image last block">
      <figure class="image_container">
    <!-- TEMPLATE START: vendor/contao/core-bundle/src/Resources/contao/templates/picture/picture_default.html5 -->
    <img src="assets/images/f/testchart-2-eb73f123.png" width="200" height="200" alt="" itemprop="image">
    <!-- TEMPLATE END: vendor/contao/core-bundle/src/Resources/contao/templates/picture/picture_default.html5 -->
      </figure>
    </div>
    <!-- TEMPLATE END: vendor/contao/core-bundle/src/Resources/contao/templates/elements/ce_image.html5 -->
    Stammtisch Contao Bayern: http://www.contao-bayern.de

  3. #3
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Beiträge
    1.769
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Läuft da irgendeine Lazy-Image-Erweiterung mit? Die Ausgabe sieht nicht nach Contao-Standard aus.

  4. #4
    Contao-Nutzer
    Registriert seit
    28.02.2011.
    Beiträge
    197

    Standard

    Hallo,

    danke schon mal

    Ja und wahrscheinlich hängt damit auch mein Trouble zusammen.

    Ich hatte zunächst lazyload vom Häuptling installiert, dann wieder deinstalliert und das heimrichhannot-contao-components/lazyload genommen.

    Offensichtlich sind noch Reste von lazy-images übriggeblieben.

    Die /app_dev.php sagt:Warning: include(/home/goeke-group/public_html/v1/system/modules/lazy-images/src/DerHaeuptling/classes/LazySizes.php): failed to open stream: No such file or directory

    Die Composer.json sieht so aus:
    Code:
    {
        "name": "contao/managed-edition",
        "type": "project",
        "description": "Contao Open Source CMS",
        "license": "LGPL-3.0-or-later",
        "authors": [
            {
                "name": "Leo Feyer",
                "homepage": "https://github.com/leofeyer"
            }
        ],
        "require": {
            "php": "^5.6 || ^7.0",
            "codefog/contao-cookiebar": "^2.1",
            "codefog/contao-mobile_menu": "^2.7",
            "codefog/contao-news_categories": "^3.0",
            "codefog/tags-bundle": "^2.1",
            "contao/calendar-bundle": "^4.4",
            "contao/comments-bundle": "^4.4",
            "contao/faq-bundle": "^4.4",
            "contao/listing-bundle": "^4.4",
            "contao/manager-bundle": "4.4.*",
            "contao/news-bundle": "^4.4",
            "contao/newsletter-bundle": "^4.4",
            "derhaeuptling/contao-mega-menu": "^1.0",
            "heimrichhannot-contao-components/lazyload": "^1.2",
            "heimrichhannot/contao-speed-bundle": "^1.7",
            "madeyourday/contao-rocksolid-custom-elements": "^2.2",
            "wangaz/contao-jquery-ui-tabs": "^1.1"
        },
        "conflict": {
            "contao-components/installer": "<1.3",
            "contao/core-bundle": "<4.4.8"
        },
        "extra": {
            "branch-alias": {
                "dev-4.4": "4.4.x-dev"
            },
            "contao-component-dir": "assets"
        },
        "scripts": {
            "post-install-cmd": [
                "Contao\\ManagerBundle\\Composer\\ScriptHandler::initializeApplication"
            ],
            "post-update-cmd": [
                "Contao\\ManagerBundle\\Composer\\ScriptHandler::initializeApplication"
            ]
        }
    }
    Habe jetzt den dev cache gelöscht und dieser Fehler ist verschwunden.

    Der HTML-Fehler ist leider nach wie vor da

    Viele Grüße,
    conter
    Geändert von conter (11.03.2019 um 16:27 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    28.02.2011.
    Beiträge
    197

    Standard

    Als Template wird picture_lazyload.html5 verwendet.

    HTML-Code:
    <!-- TEMPLATE START: templates/ibg/picture_lazyload.html5 -->
    <div id="image-wrapper-35058562" class="image-wrapper content__bild">
    
    [......]
    
        <script>
            window.respimage && window.respimage({
                elements: [document.images[document.images.length - 1]]
            });
        </script>
    
    <!-- TEMPLATE END: templates/ibg/picture_lazyload.html5 -->
    Habe jetzt im Template die fehlenden Leerzeichen ersetzt, also das ist jetzt ok.

    Aber mit diesen Fehlern hier komme ich nicht klar und bräuchte noch mal Hilfe:

    Code:
    Error: Element img is missing required attribute src.
    
    t__bild">?<img data-wrapper="#image-wrapper-402503669" data-wrapper-style="#image-wrapper-402503669:not(.loade…nik-01-ad3ac935.jpg 1200w" sizes="(max-width: 600px) 100vw, 70vw" alt="Alttext"    itemprop="image">?</div
    und

    Code:
    Error: The sizes attribute may be specified only if the srcset attribute is also present.
    
    t__bild">?<img data-wrapper="#image-wrapper-402503669" data-wrapper-style="#image-wrapper-402503669:not(.loade…nik-01-ad3ac935.jpg 1200w" sizes="(max-width: 600px) 100vw, 70vw" alt="Alttext"    itemprop="image">?</div
    Viele Grüße,
    conter

  6. #6
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.705

    Standard

    Die Leerzeichen scheinen im picture_lazyload.html5 tatsächlich zu fehlen. Du könntest auf GitHub ein Ticket dafür aufmachen.

    Ist die Erweiterung denn ansonsten auch tatsächlich bei dir aktiv?

    Und dann fällt mir in deiner Composer.json auf: warum lässt du noch PHP 5.6 zu und fixierst die Contao Core-Version auf <4.4.8?
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  7. #7
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.032
    Partner-ID
    7421

    Standard

    Zitat Zitat von folkfreund Beitrag anzeigen
    ... und fixierst die Contao Core-Version auf <4.4.8?
    Da ist nichts fixiert. <4.48 ist nur als Konflikt eingetragen.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  8. #8
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.705

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    Da ist nichts fixiert.
    Sorry, schief geguckt
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  9. #9
    Contao-Nutzer
    Registriert seit
    28.02.2011.
    Beiträge
    197

    Standard

    Hallo Folkfreund,
    was meinst du mit "überhaupt eingebunden".
    Ist es das nicht automatisch?
    Habe eigentlich nur die Erweiterung installiert, die Bildgröße angelegt und meinem ce_image zugewiesen.
    Contao hat dann von sich aus das dazugehörige lazyload Template verwendet.
    Muss ich noch was tun?
    Viele Grüße
    conter

    Gesendet von meinem Mi A1 mit Tapatalk

  10. #10
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.705

    Standard

    Ich meinte, dass die Erweiterung evtl. deaktiviert sein könnte.
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  11. #11
    Contao-Nutzer
    Registriert seit
    28.02.2011.
    Beiträge
    197

    Standard

    Hallo nochmal,

    es ist tatsächlich die Erweiterung heimrichhannot/contao-speed-bundle, die die Fehler erzeugt.

    Habe das aus meinem Projekt erstmal rausgeschmissen, die ist jetzt wieder sauber nur leider ohne lazyloading.

    Habe heimrichhannot/contao-speed-bundle in eine Testumgebung eingebunden, wo sie die einzige Erweiterung ist.
    Nur eine einzige Seite mit Text, einem Bild mit der in #1 gezeigten Bildgröße und es werden die oben genannten HTML-Fehler erzeugt.


    HTML-Code:
    <!-- TEMPLATE START: vendor/contao/core-bundle/src/Resources/contao/templates/elements/ce_image.html5 -->
    <div class="ce_image last block">
        <figure class="image_container">
            
            
            <!-- TEMPLATE START: vendor/heimrichhannot/contao-speed-bundle/src/Resources/contao/templates/picture/picture_lazyload.html5 -->
            <div id="image-wrapper-666272267" class="image-wrapper">
                <div class="image-aspect-ratio">
                    <noscript>
                        <img src="assets/images/f/testbild-d18a30e2.jpg" srcset="assets/images/f/testbild-d18a30e2.jpg 400w, assets/images/1/testbild-ff80777a.jpg 800w, assets/images/1/testbild-c6f56e1c.jpg 1200w, assets/images/5/testbild-a52e4b58.jpg 1600w, assets/images/d/testbild-7e500f9b.jpg 2000w" sizes="(max-width: 600px) 100vw, 50vw" alt="test 1" title="test 1" itemprop="image">
                    </noscript>
                    <img data-wrapper="#image-wrapper-666272267" data-wrapper-style="#image-wrapper-666272267:not(.loaded){max-width:400px;max-height:250px}#image-wrapper-666272267:not(.loaded) .image-aspect-ratio{padding-bottom:62.50%}" class="tns-lazy-image image lazy-img" data-lazy="http://m11.heise-homepage.de/assets/images/f/testbild-d18a30e2.jpg" data-src="http://m11.heise-homepage.de/assets/images/f/testbild-d18a30e2.jpg" data-srcset="http://m11.heise-homepage.de/assets/images/f/testbild-d18a30e2.jpg 400w, assets/images/1/testbild-ff80777a.jpg 800w, assets/images/1/testbild-c6f56e1c.jpg 1200w, assets/images/5/testbild-a52e4b58.jpg 1600w, assets/images/d/testbild-7e500f9b.jpg 2000w" sizes="(max-width: 600px) 100vw, 50vw"alt="test 1" title="test 1"itemprop="image">
                </div>
            </div>
            <script>
                window.respimage && window.respimage({
                    elements: [document.images[document.images.length - 1]]
                });
                </script>
    
        <!-- TEMPLATE END: vendor/heimrichhannot/contao-speed-bundle/src/Resources/contao/templates/picture/picture_lazyload.html5 -->
    
        </figure>
    </div>
    <!-- TEMPLATE END: vendor/contao/core-bundle/src/Resources/contao/templates/elements/ce_image.html5 -->
    Hier noch mal die Fehlermeldung als Screenshot:

    htmlcheck.png

    Soll ich das mit Verweis auf diesen Thread dann bei heimrichhannot oder wie würdet ihr vorgehen?

    Der Fehler bezüglich sizes/src kann das auch mein Fehler sein (Bildgröße falsch angelegt?)

    Viele Grüße,
    conter
    Angehängte Grafiken Angehängte Grafiken
    Geändert von conter (12.03.2019 um 11:34 Uhr)

  12. #12
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.705

    Standard

    Wie sieht denn dein HTML ohne die Erweiterung aus. Stehen da die verschiedenen Bildgrößen drin?
    Wenn da alles gut ist, dann kann es nicht an dir liegen

    Edit:
    der noscript-Teil in deinem Ausschnitt sieht ja formal auch gut aus. Ich vermute, dass es sich um ein Problem mit der Erweiterung handelt.
    Geändert von folkfreund (12.03.2019 um 11:44 Uhr)
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  13. #13
    Contao-Nutzer
    Registriert seit
    28.02.2011.
    Beiträge
    197

    Standard

    ja ich finde es soweit ok

    HTML-Code:
    <div class="ce_image block">
        <figure class="image_container">
            <a href="files/ibg/img/content/test-01.jpg" title="Bildtitel" data-lightbox="7ce058">
                <img src="assets/images/1/test-01-ef0ae632.jpg" srcset="assets/images/1/test-01-ef0ae632.jpg 272w, assets/images/e/test-01-ccca48ab.jpg 544w, assets/images/d/test-01-201be09a.jpg 816w, assets/images/f/test-01-8bcc61fd.jpg 1088w, assets/images/9/test-01-ad3ac935.jpg 1200w" sizes="(max-width: 600px) 100vw, 70vw" alt="Alttext" class="content__bild" itemprop="image">
                <script>window.respimage&&window.respimage({elements:[document.images[document.images.length-1]]})</script>
            </a>
            <figcaption class="caption">Bildunterschrift 2</figcaption>
        </figure>
    </div>
    Ok dann nehm ich mal Kontakt auf zu huh.

    Danke euch allen!

  14. #14
    Contao-Nutzer
    Registriert seit
    28.02.2011.
    Beiträge
    197

    Standard

    Die Antwort von huh hatte ich schon ne Weile, aber noch keine Zeit, mich mit dem Thema zu beschäftigen.

    HTML-Code:
    Die fehlenden Leerzeichen zwischen alt und itemprop haben wir in Version 1.8.1 behoben. Das Markup ist nur invalide, weil der W3C Validator vor dem Test kein Javascript ausführt.
    
    Diesbezüglich gibt es vom Author des JS-Plugins verlok/lazyload einen Hinweis:
    
    We do not recommend to use a placeholder image (like a transparent pixel GIF) in your HTML.
    
    For best perceived performance, leave the src and srcset attributes blank. Doing so, the image will be shown as soon as LazyLoad starts loading the image. See this video or [this pen](https://> codepen.io/verlok/pen/bKYggE?editors=0110) to test the difference (remember to disable the cache and to set a slower connection speed if you have a very fast one).
    If you put anything in the src (like a transparent GIF), then LazyLoad starts loading the image but it won't be shown by browsers until the new image is loaded, leading to a worse perceived performance.
    It's safe not to put any value in the src nor srcset attributes, even if your HTML won't validate by a static code analyzer. The reason is that once JavaScript is executed, those values will be set by LazyLoad. For SEO, if the client is a crawler like Googlebot, it will be detected by LazyLoad which will fix the HTML.
    
    Der W3C Validator sollte in der heutigen Zeit Javascript unterstützen, bzw. die <noscript> Tag Alternative verwenden.
    
    Sollte es dich dennoch stören, so kannst du das Template picture_lazyload.html5 gern überschreiben und Platzhalter bei src und srcset einsetzen.
    Die Leerzeichen sind drin und mit dem anderen Fehler leb ich dann halt, Performance ist mir wichtiger.

    Viele Grüße,
    conter

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •