| Autor | Zpráva | ||
|---|---|---|---|
| hellboy80 Profil |
#1 · Zasláno: 13. 1. 2017, 14:43:47
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 |
#3 · Zasláno: 13. 1. 2017, 16:20:16
Díky za info. A dá se s tím něco dělat?
|
||
| Trejpa Profil |
#4 · Zasláno: 13. 1. 2017, 16:22:17
hellboy80:
Třeba nastavit jen jeden (větší = asi ostřejší) z náhledových obrázků. |
||
| hellboy80 Profil |
#5 · Zasláno: 13. 1. 2017, 18:05:28
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 |
#7 · Zasláno: 13. 1. 2017, 20:00:23
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
}; |
||
|
Časová prodleva: 7 let
|
|||
0