the_post_thumbnail('thumbnail') ve více velikostech

Úvodní stránka Fórum podpory WordPressu Problémy s WordPressem the_post_thumbnail('thumbnail') ve více velikostech

Zvolené téma neobsahuje zatím 2žádnou odpověď. Do diskuze (5 účastníků) se naposledy zapojil uživatel  Andres a poslední změna je stará 12 let, 8 měsíců.

Aktuálně je na stránce zobrazeno 20 příspěvků - 1. až 20. (z celkem 21)
  • Autor
    Příspěvky
  • #1124

    Andres
    Participant

    Zdravím,

    chtěl bych používat výřez obrázku, který si ve wordpressovém editoru udělám pro náhled, ve více velikostech než jen v té, kterou si můžu nastavit v Nastavení-Média. Je to nějak možné?

    Pro ten thumbnail používám funkci the_post_thumbnail(‘thumbnail’). Mám tři velikosti, v jakých bych ho chtěl používat. 400x266px do slideru, 200x133px jako klasický náhledový obrázek a 90x60px jako náhledy článků ve slideru.

    Chtěl jsem nastavit v Nastavení-Média tu největší velikost s tím, že css za mne udělá zbytek, ale narazil jsem. Když mám některý obrázek jen 350px široký, tak mi to nepovolí udělat ten výřez, ten výřez musí být alespoň tak velký, jako je nastavená hodnota. Nejde tohle nějak vypnout, s tím, že by se ten obrázek trochu proporcionálně roztáhl?

    Ještě druhá věc. Mám dojem, že některé prohlížeče mají problém s vykreslováním obrázků, čili stejně pokud bych měl výřez 400x266px, tak by v 90x60px zmenšeném jen pomocí css vypadal špatně.

    Proto sem si říkal, jestli by nešlo nějak ve wordpressu nadefinovat, aby ty velikosti thumbnailů byly tři. Znám funkci add_image_size, ale mám dojem, že ta nepracuje s tím výřezem, ale jen s celým obrázkem, který je použit jako “náhledový obrázek”, proto se nemusí zobrazovat vůbec to, co chci.

    Navíc bych potřeboval, aby tlačítko “ořezat” fungovali, i když mám vybráno míň než je zadefinováno.

    Dalo by se to vyřešit nějakým pluginem nebo nějakou úpravou ve wordpressu? Díky

    #9037

    n3s4
    Participant

    Co já mám zkušenost, tak nejlepší řešení na miniatury na stránkách je script timthumb.php.

    Pak se obrázek vykresluje pomocí kódu jako je např.:

    <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&h=145&w=200&zc=1" width="200" height="145" alt="<?php the_title(); ?>" /> kde h je výška, w šířka a zc=1 je typ ořezu (popsáno v dokumentaci scriptu)

    Ale jak funkci přímo zavést do šablony, to nevím.

    #9038

    neteyescz
    Participant
    #9039

    Andres
    Participant

    Díky moc, prozkoumám to a dám kdyžtak vědět. :)

    #9040

    n3s4
    Participant

    Ta chyba se v nejnovějších verzích timthumb.php už nevyskytuje..

    #9041

    Andres
    Participant

    No tak pokusil jsem se to integrovat, ale <img src=”<?php bloginfo(‘template_directory’); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>&h=200&w=133&zc=1″ alt=”<?php the_title(); ?>” width=”200″ height=”133″ /> mi vezme ten obrázek a dá mu jen tu výšku a šířku, takže to úplně ztratí proporce.

    Jde nějak udělat, aby to bralo v potaz ten wordpressový výřez pro náhled? Nebo nějaký custom crop prostě?

    #9042

    n3s4
    Participant

    nepřidávat tam width="200" height="133"

    to už v skriptu je definováo pomocí h= a w= kde h je výška a w šířka.

    #9043

    neteyescz
    Participant

    n3s4> Máte pravdu, děkuji za doplnění.

    Andres> Jinak od WP 3 je ve WP integrovaná funkce náhledových obrázků, stačí pouze na požadované místo do souboru loop.php vložit kód na vyvolání funkce, natavit velikost a pak obrázky pohodlně vkládat z administrace.

    Články

    https://www.separatista.net/wordpress/novinky/wordpress-2-9-a-chystane-novinky-1-nahledove-obrazky

    https://www.separatista.net/wordpress/tipy-a-triky/pokrocile-upravy-zobrazovani-nahledovych-obrazku-v-sablone

    http://www.neteyes.cz/clanky/zacatky-s-wordpressem-nahledove-obrazky-a-strucne-vypisy/

    #9044

    n3s4
    Participant

    Já se zde v prvním příspěvku také spletl a uvedl jsem tam omylem i width= a height= :)

    #9045

    neteyescz
    Participant

    n3s4> To se mě stává taky :-D

    #9046

    Andres
    Participant

    neteyescz: No já jsem právě používal klasické náhledové obrázky, které jsou integrované ve wordpressu a volal je funkcí the_post_thumbnail()…jenže právě ten ořez, který si udělám v editoru, jde vyvolat jen pomocí the_post_thumbnail(‘thumbnail’), ne? když napíšu něco jiného do té závorky, tak to vezme celý ten náhledový obrázek a dá mu to nějakou velikost, ale nerespektuje to ten ořez, který já si uložím pro “náhled”. Nebo se mýlím?

    K tomu timthumbu – to zc=1 je co? V žádné dokumentaci to nějak nemůžu právě najít. A taky to nerespektuje ten ořez, i když to vypadá, že je to blízko…

    #9047

    Andres
    Participant

    Aha, tak jsem zkusil těch obrázků víc a není to blízko, vypadá to že to z toho obrázku vybere prostě prostředek. Já potřebuju, aby byla pokaždé pozice toho ořezaného náhledu jiná, takže mi vyhovuje to ruční ořezávání pro “náhled” v editoru, ale tam mám zase problémy s tím, co jsem jmenoval v prvním příspěvku…

    #9048

    Andres
    Participant

    Jako docela z toho začínám být nešťastný a mám dojem, že kdybych si ten obrázek ořezal v irfanu, tak to bude jednodušší, ale nemůžu uvěřit, že by byl wordpress “tak hloupý”

    Ukázka místo slov:

    http://www.atleticomadrid.cz/ – nahoře ve slideru je obrázek 200×133 roztažený na dvojnásobnou velikost, protože tlačítko crop mě prostě nepustí na větší velikosti kvůli tomu, co jsem popsal v prvním příspěvku. Pak jsou ve slideru ty náhledy, to je zase obrázek 200×133 který je pomocí css zmenšený, takže ho například Firefox divně vykresluje.

    V té sekci “nepřehlédněte” je ten obrázek v normální velikosti 200×133, to je jediné co funguje dobře

    http://www.atleticomadrid.cz/category/spekulace/ – tady je zase použitý ten timthumb – výsek zobrazeného obrázku naprosto špatný :(

    #9049

    neteyescz
    Participant

    Zdravím,

    Našel jsem pěkný plugin s touto funkcí:

    http://wordpress.org/extend/plugins/vivtiger-image-resizer/

    #9050

    BorgMcz
    Participant
    Web

    Prosímtě co je to za widget to “Plkátko”?

    #9052

    n3s4
    Participant

    K tomuto je ale opravdu nejlepší skript timthumb. Ty obrázky na hlavní stránce http://www.atleticomadrid.cz/ jsou ve špatné kvalitě, jelikož jsou natažené na danou velikost z velikosti menší. Kdybyste použil timthumb i u tohoto obrázku a nastavil skriptu správnou velikost 400×266) zobrazil by se výřez ve slušné kvalitě viz příklad na onom obrázku. Pokud se nahraje obrázek velký, sám se do té cílové velikosti ořízne. A ořezává se podle možností uvedených zde: http://www.binarymoon.co.uk/demo/timthumb-zoom-crop/. Nevím proč píšete “naprosto špatný” – obrázek je ve slušné kvalitě.

    Také jsem si všiml, že původní obrázky jsou na výšku a u takovýchto se ořezává opravdu krkolomně. Jinak pokud chcete jako náhled mít tedy celý obrázek vidět doporučuji vyzkoušet do skriptu místo zc=1 zc=2. Ta “2” ořízne tak, že původní obrázek celý zmenší a podle cílového rozměru přidá bílé pruhy (buď horizontálně nebo vertikálně). Příklad na vašem obrázku zde.

    Já timthumb používám a naprostá spokojenost. Nemusím řešit nějaké rozměry – dělá se to automaticky…

    #9053

    n3s4
    Participant

    BorgMcz: Jedná se o plugin Schreikasten

    #9054

    Andres
    Participant

    n3s4: jenže u toho druhého obrázku byli zas ti lidi bez hlavy, protože to vždycky ořeže střed obrázku. To mi přijde bohužel naprosto nevyhovující.

    neteyescz: díky za návrh pluginu, ale moc nechápu, co přesně má dělat. Vidím jenom, že si můžu stanovit poměr stran a maximální rozměry uploadovaného souboru a pár dalších funkcí. To můj problém moc neřeší:(

    Přemýšlel jsem, jak by se to dalo vyřešit a napadly mě dvě věci. Buď nějaký tweak, aby se to, co si oříznu pro náhled ukládalo v maximální kvalitě a ne jen v té velikosti, co mám nastavenou v nastavení-média, anebo zrušení toho zašedávání tlačítka, pokud je vybraná oblast pro ořez menší než rozměry nastavené v nastavení-média. Nebo fakt nevim, jak jinak vyřešit můj problém.

    Jako ono není problém nastavit ty rozměry v nastavení-média na 400×266, ale je blbé, že když mám třeba pár obrázků, které ty rozměry nemají, tak je nemůžu použít, protože mi je wordpress nedovolí ořezat…

    #9055

    n3s4
    Participant

    Více asi neporadím. Hlavně to chce mít fotky focené standartně na šířku – v tom je jediný hlavní problém. Tam pak není problém s automatickým ořezem… Nestandartní fotky na výšku bohužel oříznout jako standartní nejdou.

    #9056

    admin
    Keymaster
    Web

    Zatím jsem neměl čas sepsat podrobnější odpověď, ale dnes to už konečně zkusím.

    Skript TimThumb nepoužívám a většinou se snažím najít řešení přímo v rámci WordPressu. I zde jsou možnosti, jak generovat náhledy až během jejich zobrazení na webu a různě modifikovat velikost obrázků. TimThumb nedávno dost utrpěl poměrně závažnou bezpečnostní chybou, v tomto případě ale objevená chyba akcelerovala další vývoj a tak byl celý skript výrazně přepsán, chyby byly odstraněny a následně vyšla nová verze TimThumb 2.0. Takže bezpečnosti bych se už asi příliš neobával.

    Celé vlákno už se také trochu promíchalo různými podružnými tématy, takže se pokusím držet pouze základního dotazu. I když už si občas myslím, že mě některé dotazy nepřekvapí, tak tento byl velmi zajímavý, protože obsahuje poměrně logický požadavek, který však není nějak jednoduše proveditelný. Samozřejmě ideálním způsobem je nahrávat již připravené (upravené) obrázky…

    Myslím, že je určitě lepší nadefinovat si nové vlastní velikosti náhledu pomocí funkce add_image_size(). Jedna velikost bude slider, druhá klasický thumbnail a třetí třeba slider_thumbnail. Pokud bude definovaná jen jedna velikost, která bude uváděna s různými rozměry (ať v HTML či CSS), tak může docházet k problémům s vykreslováním a hlavně budete načítat větší obrázek (zbytečně), ale zobrazovat ho v menší podobě.

    Pokud mám obrázek široký 350px a definovanou velikost 400px, tak je podle mě vcelku logické, že nebude možné tuto velikost ořezávat, protože to bude vlastně originální velikost. V tomto případě bych doporučil jeho zobrazení nastylovat tak, aby byl ve středu a po jeho okrajích byly nějaké barevné okraje, které by doplnily požadované rozměry.

    A pokud jde o výřezy jiných velikostí, tak existuje jeden povedený plugin Post Thumbnail Editor. Umožňuje totiž jednoduše oříznout původní obrázek (aneb nahraný originál) a aplikovat změny na vybrané velikosti obrázků (tedy např. na slider, thumbnail a slider_thumbnail). Po jeho instalaci a aktivaci stačí přejít do Knihovny médií, vybrat obrázek a kliknout na Upravit. Pod náhledem se zobrazí další tlačítko Upravit obrázek, čímž se dostanete do online editoru obrázků. Přibyl tam nový malý odkaz Post Thumbnail Editor, kde můžete online ořezávat původní velikost obrázku a aplikovat ji na zvolené velikosti. Myslím, že by to mělo být přesně to, co hledáte…

    Celá problematika ořezávání obrázků je ale ještě složitější. Probírá se např. v oficiálním fóru (anglicky) a existuje i nahlášená chyba, kdy vlastní velikosti obrázků nejsou ovlivněny ručním oříznutím, pokud ho necháte aplikovat na všechny velikosti (mělo by být opraveno ve WordPressu 3.3). Pokud byste si chtěl ale připravit ještě něco speciálního, tak můžete začít tímto návodem.

    neteyescz: Plugin WP Vivtiger Image Resizer je už velmi zastaralý a podle uživatelů asi i nefunkční.

    n3s4: Díky za ukázky využití skriptu TimThumb, někdy je to možná rychlejší, i když osobně raději externí skripty moc nepoužívám (viz problém s bezpečností). Zajímavý je také plugin s widgetem pro chatování.

Aktuálně je na stránce zobrazeno 20 příspěvků - 1. až 20. (z celkem 21)

Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.

WordPress – novinky, návody a zajímavosti