Přihlásit se

image resize v perexu

22. úno 2019 16:57 #139086
image resize v perexu od ivan
Začátečník
Zdravím pánové, vždycky jste mi tu dobře poradili a věřím že tomu bude tak i teď. Na webu www.iskraholic.sk nemám responzivní šablonu tak zkouším na subdoméně info.iskraholic.sk šablonu JA purity III. Trochu se dostávám do podoby ale mám problém s autmatickou úpravou velikosti obrázku v perexu článku. Nainstaloval jsem resize image content fly and cache plugin , ten mi obrázky upraví na nastavenou velikost třeba teď 300x300, ale udělá to i pro mobily a tam je to problém. Poraďte jak to vyřešit?

22. úno 2019 18:21 - 22. úno 2019 18:24 #139090
Odpověď od Ernst
Joomla Expert
ten plugin prosím raději odinstalujte.
Tohle lehce uděláte v CSS souboru, kde doplníte například:
Code:
.blog .pull-left.item-image img { width: 60%; }

Dnes jsem k CSS vydal nový článek, tak se podívejte na něj až bude zveřejněn nebo se mrkněte zde

22. úno 2019 18:54 #139094
Odpověď od ivan
Začátečník
no jo , děkuji za radu, ale do kterého souboru to mám vložit? template.css ? bude mi to na 60% zobrazovat obrázky všechny? i ty co sa zadáaj v perexu článku?

22. úno 2019 19:10 #139095
Odpověď od Pavel [byPV]
Začátečník
Zdravím,

upřímně, Ernste, rád bych si půjčil Vaší věšteckou kouli ;-)...

Já bohužel z dotazu vůbec nepochopil konkrétní požadavek :-(. Sice jste zmínil obrázky v perexu a velikost "třeba" 300x300 px, ale perex je pro mě libovolný úvodník (tedy nevím jestli to řešíte na homepage nebo např. v detailu článku či někde v modulech), ten rozměr u obrázku nikde nevidím (asi to rozšíření nemáte zapnuté a nebo jste ho jen testoval) a hlavně jste nenapsal, čeho přesně chcete dosáhnout v zobrazení na desktopu a mobilu ;-).

Pokud napíšete, které přesně obrázky, na jakých konkrétních stránkách a v jakém zobrazení (desktop, resposive) chcete jak zmenšit, tak lze něco vymyslet, ale takhle je to jen teoretická debata...

22. úno 2019 19:22 - 22. úno 2019 19:24 #139096
Odpověď od Ernst
Joomla Expert

upřímně, Ernste, rád bych si půjčil Vaší věšteckou kouli ;-)...

Ono když tady člověk odpovídá více let, získá už určitý odhad.
Perex je úvodník (zjednodušeně) a ten je na webu jen v blogu.
Jiné obrázky na webu zatím nejsou, nejsou ani uvnitř článků.

To ivan

ano, to změní všechny obrázky v tom blogu. tedy ne uvnitř článků ale na této uváděné stránce.

Nejlépe je to změnit s souborech custom.css, override.css atd, jak píšu v www.joomlaportal.cz/jak-zacit/649-styly-pro-uplne-zacatecniky

Ale pokud je nemůžete použít, přidejte to na konec template.css

PS tu velikost v procentech si můžete dát jakou chcete, ale píšu ji v procentech kvůli responzivitě, protože předpokládám, že ty kontejnery ve kterých jsou, jsou responzivní

22. úno 2019 19:23 - 22. úno 2019 19:27 #139097
Odpověď od ivan
Začátečník
no když se podíváte na první web bez responzivní šablony www.iskraholic.sk je vidět že obázky v úvodníku,co se zobrazují na homepage ne v tele článku mají upravenou velikost, zmenšenou všechny stejně, hlavní článek vždy větší, další články menší ale všechny stejné, dělá to asi upravená šablona, neřeším fotky v tele článku ale co se vkládaj v článku jako "obrázek úvodníku" kdyby mi to ale upravilo na stejnou velikost i obrázky v tele článku bylo by to super, ale to je vedlejší, jdde mi o vzhlad úvodní stránky, plugin obrázky zmenšil na mnou nastavenou velikost třeba 300x300 ale tak to bylo i při přehlédáni v mobilu a to je špatně, chtěl bych docílit vzhled podobní púvodní stránce ale s jinou responsivní šablonou, v tomto případě JA Purity III, lepší jsem nesehnal :(

ten web info.iskraholic.sk je jenom cvičnej, kvuli responzivní šabloně, aby původní nedo.....nerozhodil

22. úno 2019 19:29 #139098
Odpověď od Ernst
Joomla Expert
na prvním webu máte taky tři sloupce, ale v mnohem užším pruhu.
v každém sloupci ja na 100% sloupce obrázek a pod ním text.
Na testovacím webu máte ty sloupce výrazně širší, proto je širší obrázek.
Tak musíte ty sloupce zúžit (dát jich víc, dát něco po stranách, konkrétně si to musíte říct vy)
Nebo zmenšit ten obrázek, tak že ve sloupci je ten menší obrázek a text bude začínat již vedle něj.

22. úno 2019 19:34 #139100
Odpověď od ivan
Začátečník

Ernst napsal: na prvním webu máte taky tři sloupce, ale v mnohem užším pruhu.
v každém sloupci ja na 100% sloupce obrázek a pod ním text.
Na testovacím webu máte ty sloupce výrazně širší, proto je širší obrázek.
Tak musíte ty sloupce zúžit (dát jich víc, dát něco po stranách, konkrétně si to musíte říct vy)
Nebo zmenšit ten obrázek, tak že ve sloupci je ten menší obrázek a text bude začínat již vedle něj.


dal jsem váš kód na konec souboru template.css a ubral na 20% a nic to nedělá

22. úno 2019 19:49 #139101
Odpověď od Ernst
Joomla Expert
já ale netuším, jaká css používá vaše šablona. Dokumentace je zde , tak si najděte, která CSS používá a jak se to nastaví.

Vím, že v tuto chváli se načítá soubor /t3-assets/dev/9/templates.purity_iii.less.bootstrap.less.css, tak si to doplňte tam.
Nebo vám poradí někdo, kdo šablony joomlaart zná, já to bohužel nejsem.
Návod na custom.css jsem našel zde , ale nemohu to vyzkoušet

22. úno 2019 20:07 #139103
Odpověď od Pavel [byPV]
Začátečník

Ono když tady člověk odpovídá více let, získá už určitý odhad.
Perex je úvodník (zjednodušeně) a ten je na webu jen v blogu.
Jiné obrázky na webu zatím nejsou, nejsou ani uvnitř článků.


Věřte mi, že odpovídám už mnoho let, ale fakt bych nedokázal z dotazu odhadnout, že tam někdo chce nastavit pro všechny obrázky zrovna 60% šířky ;-)... To je fuk, to bylo jen takové rýpnutí ;-)...

Co je úvodník vím, ale musím se přiznat, že jsem úplně přehlédl tu subdoménu INFO (HTML odkaz je jen na tu hlavní a ta druhá je v textu trošku zapadlá, tak jsem ji nějak minul při druhém čtení) a hodnotil jsem tedy dotaz jen oproti ostrému webu, tak pardón :-(...

Pokud to chcete mít roztažené podle těch sloupců jako na původním webu, tak bych doporučil spíše něco takového:

Code:
.blog .item-image img { max-width: 100%; }

Tu třídu "pull-left" bych tam nedával, protože si myslím, že jak si s tím ještě budete hrát (je to přeci jen na začátku), tak tam pak také v budoucnu nemusí být po nějaké změně.

Osobně bych nejprve dodělal hlavní rozvržení stránky, všech možných modulů, atd. a pak až ladil detaily v CSS. Předpokládám, že většinu věcí si naklikáte někde v šabloně a pak kdo ví jaké tam právě budou třídy.

Který CSS skript zvolit záleží na šabloně, ale nejprve ho samozřejmě musíte vidět v HEAD na webu a tam template.css není ;-). Žádný z těch co tam je, se mi nezdá vhodný a tak bych mrknul do šablony, jestli tam nelze někde zapnout nějaký ten custom.css nebo něco podobného. Případně nahlédněte do dokumentace šablony na webu vývojáře, jak se mají řešit vlastní úpravy v CSS.

22. úno 2019 20:42 #139107
Odpověď od Ernst
Joomla Expert
ano, ten pull-left jsem zapomněl umazat
Code:
.blog .item-image img { width: 60%; }

Na těch 100% je to roztažený automaticky, jemu se podle mě nelíbí právě to, že je to tak moc velký.

Osobně bych nejprve dodělal hlavní rozvržení stránky, všech možných modulů, atd. a pak až ladil detaily v CSS. Předpokládám, že většinu věcí si naklikáte někde v šabloně a pak kdo ví jaké tam právě budou třídy.

pod to se mohu podepsat :)

ale hlavně na takovéto zmenšení nepoužívejte žádné pluginy, ty jsou na něco jiného

22. úno 2019 20:52 #139108
Odpověď od Pavel [byPV]
Začátečník

Na těch 100% je to roztažený automaticky, jemu se podle mě nelíbí právě to, že je to tak moc velký.

Já mám v Chrome ty obrázky roztažený na jejich originální velikost (800x600 px), ale tento zápis je stáhne max. na 100% šířky nadřazených elementů, což zde určuje pravděpodobně nadřazený element div.span4, který má šířku 33.33333333%.

Přikládám screeny před a po úpravě...
Přílohy:

22. úno 2019 22:31 - 22. úno 2019 22:36 #139110
Odpověď od Rudolf
Joomla Expert
Šablony od Joomlart pracují s less soubory (pokud máte zapnutý debug mód). Je to lepší, protože můžete lépe pracovat s proměnnými.
Základem je mít v šabloně toto nastavení zapnuté (viz dokumentace k šabloně).

Pokud tedy potřebujete svůj vlastní styl a nechcete postupovat dle návodu od Joomlart k šabloně a vytvářet vlastní theme, vytvořte soubor
Code:
com_content.less

a ten vložte do složky extras v
Code:
templates/ja_xxx/extras/com_content.less

V záložce Adds-on se vám tento soubor objeví a Vy nastavíte kde ho chcete připojit.

A nebo to udělejte jak to dělají naši kodéři a natvrdo vloží svoji úpravu do nějakého less souboru na ftp v šabloně, aby se v tom nikdo nevyznal :D.

/templates/ja_xxx/less/components.less
/templates/ja_xxx/less/style.less
/templates/ja_xxx/less/template.less

Pozor, je třeba použít less konvenci.

css nikam nevkládejte, při každém generování se přepíše.

Co se týká jaké styly tam máte vytvořit, aby jste neměl obrázky přelézající mimo definovaný sloupec (na testu je to nastavení 3 sloupce na výpise článků typu blog == třída span4 pro jeden sloupec):

Do vytvořeného less souboru vložíte tohle:
Code:
.com_content { &.view-category { &.layout-blog { .item, .items-leading { .item-image { img { width:100%; } } } } } }

Uložíte, nastavíte v šabloně připojení na kterých stránkách chcete použít, přegenerujete less soubory (pokud máte zapnutý debug, generují se samy nebo dáte ručně tlačítkem less to css a máte hotovo.

Tohle řešení Vám upraví jen výpis článků typu blog.

MiniJoomla! - www.minijoomla.cz - eshop s rozšířením Joomla/VM
Email Manager - aplikace na správu šablon emailů pro VirtueMart
Easy Feeder - aplikace na generování XML/CSV feedů a napojení na ERP pro VM
PragueClassicconcert - portál pro prodej vstupenek na systému Joomla
Poděkovali: ivan

22. úno 2019 22:44 - 22. úno 2019 22:45 #139111
Odpověď od Rudolf
Joomla Expert
Mimochodem

něco jste musel udělat se šablonou.

Já v šabloně vidím pro obrázek ve výpise článků typu blog nebo blog featured definovaný styl od výrobce, který automaticky zmenšuje obrázek na šířku sloupce.

Takže žádnou úpravu vlastně nepotřebujete :D

No a když už nevíte, Joomlart má fórum pro tuto šablonu zdarma, kde Vám výrobce přímo poradí.

MiniJoomla! - www.minijoomla.cz - eshop s rozšířením Joomla/VM
Email Manager - aplikace na správu šablon emailů pro VirtueMart
Easy Feeder - aplikace na generování XML/CSV feedů a napojení na ERP pro VM
PragueClassicconcert - portál pro prodej vstupenek na systému Joomla
Přílohy:
Poděkovali: ivan

22. úno 2019 22:45 #139112
Odpověď od Ernst
Joomla Expert
to Pavel
on tam měl dřív ten plugin, tak to dávalo 100%. Ten na moji radu odinstaloval, pak byla zobrazena reálná velikost.
Alke jemu se právě těch 100% zdálo veliký.

To Rudolf
Taky jsem si v dokumentaci k šabloně našel less a je to nejlepší řešení.
Ale po pravdě, když nevysvětlíme CSS soubory, už vůbec nevysvětlíme less soubory ;)
Poděkovali: ivan

Powered by Fórum