Bildgrößen / Fehler im Markup

[conter]

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:

Error: No space between attributes.

Error: Element img is missing required attribute src.

<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

[fiedsch]

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

Z.B. so:

<!-- 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 -->

[webstar]

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

[conter]

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:

{
    "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

[conter]

Als Template wird picture_lazyload.html5 verwendet.

<!-- 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:

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

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

[folkfreund]

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?

[mlweb]

... und fixierst die Contao Core-Version auf <4.4.8?

Da ist nichts fixiert. <4.48 ist nur als Konflikt eingetragen.

[folkfreund]

Da ist nichts fixiert.

Sorry, schief geguckt

[conter]

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

[folkfreund]

Ich meinte, dass die Erweiterung evtl. deaktiviert sein könnte.

[conter]

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.

<!-- 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

[folkfreund]

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.

[conter]

ja ich finde es soweit ok

<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!

[conter]

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

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