Autor Zpráva
hellboy80
Profil
Prosím o pomoc. Dělám si web ve Wordpressu, kde chci použít tuto šablonu:
andrewrubtsov.com
Všiml jsem si, že náhledy obrázků jsou ve Firefoxu krásně ostré, zatímco v Chromu jsou lehce neostré.
Pravděpodobně půjde o nějaký problém v CSS? Při zobrazení plných fotek je vše ostré ve všech prohlížečích. Problém je pouze v těch náhledech.
Nevědel by někdo, co s tím?
Díky za případnou pomoc.
Trejpa
Profil
hellboy80:
Řekl bych, že se díváš na různé obrázky (dvě rozdílné zmenšeniny stejného obrázku). Stránka zobrazuje jiný soubor obrázku dle velikosti okna, v různých prohlížečích trochu jinak. Podívej se do vývojářských nástrojů prohlížeče, jakou adresu má obrázek.

V Chrome stejný obrázek používá adresy (a fyzické rozměry):
AndrewRubtsov-Architecture21-347x240.jpg
AndrewRubtsov-Architecture21-867x600.jpg

Ve Firefoxu:
AndrewRubtsov-Architecture21-578x400.jpg
AndrewRubtsov-Architecture21-867x600.jpg

Zaměř se na značku <img> a její vlastnosti data-sizes a data-srcset. Zřejmě tvé nastavení berou prohlížeče trochu jinak. S vlastnostmi CSS tohle nesouvisí.
hellboy80
Profil
Díky za info. A dá se s tím něco dělat?
Trejpa
Profil
hellboy80:
Třeba nastavit jen jeden (větší = asi ostřejší) z náhledových obrázků.
hellboy80
Profil
Je fakt, že Wordpress automaticky vytváří různé velikosti všech nahraných obrázků. Takže těžko říct, co s tim dělat. Netušil jsem, že prohlížeče si můžou samy vybírat, které z nich zobrazí. Na to asi musí být nějaký kód, ne?
No, můžu zkusit všechny zmenšeniny ručne překopírovat většími obrázky. :-)
Trejpa
Profil
hellboy80:
Na to asi musí být nějaký kód, ne?
Ano.
<img src="" data-sizes="" data-srcset="">

No, můžu zkusit všechny zmenšeniny ručne překopírovat většími obrázky. :-)
Možná bych zkusil nejdříve upravit šablonu nebo plugin ve Wordpressu, který ten kód (výše ↑) generuje.
hellboy80
Profil
Tohle je v šabloně ve třech souborech:
gallery-cyclereact.php
gallery-vertscroll.php
lazysizes.js

V prvním php souboru je tohle:

function solofolio_cyclereact_thumbs($attachments, $thumbs, $i) {
    $out = "<ul class='solofolio-cyclereact-thumbs' style='". solofolio_cyclereact_thumbs_style($thumbs) ."'>";

    foreach ( $attachments as $id => $attachment ) {
        $i++;

        $thumb = wp_get_attachment_image_src($id, 'thumbnail');
        $medium = wp_get_attachment_image_src($id, 'medium');
        $caption = solofolio_attachment_caption($attachment);

        $out .= "
        <li class='thumb'><a href='#" . $i . "'>
                <img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
                         data-sizes='auto'
                         data-srcset='
                         " . $thumb[0] . " 1x,
                     " . $medium[0] . " 2x'
                     class='lazyload'>
        </a></li>
        ";
    }

    $out .="
    </ul>";

    return $out;
}

V druhém tohle:

foreach ( $attachments as $id => $attachment ) {
    $large = wp_get_attachment_image_src($id, 'large');
    $xlarge = wp_get_attachment_image_src($id, 'xlarge');
    $caption = solofolio_attachment_caption($attachment);

    $output .= "<div class='" . solofolio_vertscroll_container_classes($size) . "' style='max-width:" . $xlarge[1] . "px' id='" . $i . "'>";

    $output .= "
        <img
    data-sizes='auto'
    data-srcset='
    " . $large[0] . " " . $large[1]. "w,
    " . $xlarge[0] . " " . $xlarge[1]. "w'
    class='lazyload'
    width=" . $xlarge[1] . "
    height=" . $xlarge[2] . "/>
    ";

    if ($captions != "false" && !empty($caption)) {
        $output .= "<p class='wp-caption-text'>" .  $caption . "</p>";
    }

    $output .= "</div>";
    $i += 1;
}

A v tom js souboru tohle:

  (function(){
    var prop;
    var lazySizesDefaults = {
      lazyClass: 'lazyload',
      loadedClass: 'lazyloaded',
      loadingClass: 'lazyloading',
      preloadClass: 'lazypreload',
      errorClass: 'lazyerror',
      autosizesClass: 'lazyautosizes',
      srcAttr: 'data-src',
      srcsetAttr: 'data-srcset',
      sizesAttr: 'data-sizes',
      //preloadAfterLoad: false,
      minSize: 50,
      customMedia: {},
      init: true,
      expFactor: 2,
      expand: 300,
      loadMode: 2
    };

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: