Autor Zpráva
liborse
Profil
Dobrý den,

mám takový zajímavý problém k řešení. Momentálně se snažím zresponzivnit jeden web s mnoha články. Není to problém, ale redaktoři tam občas vymyslí to, že dají dva vysoké obrázky vedle sebe. Oddělí je mezerou. No a výsledek už asi tušíte, při zmenšení šířky webu se obrázek vpravo odpálí dolu vlevo. To není zrovna to, co bych chtěl. Ideální by bylo, abych mohl takové případy nějak zjistit přes css a patřičně ošetřit. Ideálně ne přes jquery atd. Ale nevím, jak to v css3 napsat a zda to vůbec lze. Mělo by to být něco ve stylu - pokud jsou v jinak prázdném odstavci 2 odkazy a v nich obrázky, pak něco... A ideálně, kdyby se to pak chovalo jako 1 obrázek a nastavil jsem tomu max-width: 100%. vím, že to zní šíleně, ale nemám možnost, jak ty tisíce článků změnit a takhle hnusné se mi to nechce nechávat. Nově na to redaktoři budou dávat pozor, ale však znáte to. ;) Kdyby někdo věděl, moc děkuji. Jen malá ukázka kódu (hodně jsem osekal):

<p style="text-align: justify;"><a href="obrazek.jpg" title="xxx" rel="lightbox"><img class="" title="" src="obrazek.jpg" alt="..." width="335" height="491"></a>&nbsp;<a href="obrazek.jpg" title="xxx" rel="lightbox"><img class="" title="" src="obrazek.jpg" alt="..." width="335" height="491"></a></p>
Kcko
Profil
liborse:
Udělej z toho živou ukázku.
liborse
Profil
Kcko:
Udělej z toho živou ukázku.

OK, je zde:

jsfiddle.net/5frabtun

A dodám, že html musí zůstat nedotčeno, ovlivnit mohu css v tomto případě.
Kcko
Profil
liborse:
Nejrychlejší řešení: jsfiddle.net/Kcko/5frabtun/2 a pozor FLEXBOX (bububu) nefunguje ve starších IE :-)
liborse
Profil
Hele, díky moc, zkusil jsem to naaplikovat na všechny odstavce a vše se srovnalo přesně, jak chci, to je ideál. :-) a že to nefunguje ve starších IE mě už tolik netrápí, tam se to prostě rozskočí či to nějak ošetřím. PS - když to takhle dám globálně na všechny odstavce, je to v pořádku? Každopádně zkoušel jsem a funguje to všude možně. Mrknu ještě na kompatibilitu. No a já už experimentoval s pluskovým operátorem. ;) Tohle vypadá lépe.


Jediný problém je asi v tom, že to nezachová procenta šířek, takže když jsou obrázky sice stejně vysoké, ale různě široké, tak to udělá zub. Není to ale nic nepřekonatelného, zkusím to nějak vyřešit. Každopádně jste mi moc pomohl a já si nadávám, že mě to nenapadlo. ;)
Kcko
Profil
liborse:
Na každý odstavec bych flexbox nedával. Pokud nemáte možnost to ovlivnit serverově (proč vlastně ne?), tak bych to upravil javascriptem (přidal třídu na odstavec, který bude mít ono chování flexboxu).

Add poslední problém, vytvořte zase demo (a jestli mohu, tak radši na jsbin /codepen / nebo zdejším kod.djpw.cz), a proč? Protože to reaguje "live" , jsfiddle ne.
liborse
Profil
Jo, o té možnosti od jpw jsem nevěděl, viz. Živá ukázka

Jde o to, že editorka přizpůsobí výšku levého či pravého obrázku tak, aby byly stejně vysoké a bylo to jako "filmový" pás.

Jinak mě taky přijde, že dávat to všem odstavcům je nesmysl, jenže... jak to vyselektovat, že jo. Serverově... nechce se mi do toho, abych řekl pravdu. Je možnost ten článek na takový výskyt projet, ale tam by byly asi nějaké regulární výrazy a dělat to při každém načítání je nesmysl. Občas přijde spousty návštěvníků a to by asi nebylo dobré. Prostě tahle část je plně v režii editorů, takže i syntaxe se může kapku lišit, generuje to editor. Jinak u článků máme obrázek, fotogalerii atd., tam to všude ovlivním a není problém. Ten systém se snažím srovnat, aby tam takové situace nevznikaly, ale ještě má dost "ale"...
Kcko
Profil
liborse:
Tvoje ukázka mi žádný zub / schod nedělá (Chrome).
Ale celkově by editor tohle dělat neměl, vložit tam obrázek a pak si ho nějak ručně pozměnšovat, aby to tvořilo "filmový" pás.
Na to bys měl vytvořit nějakou komponentu, která si to vnitřně sama pořeší a vykreslí.

Co se týká regulárů, nemusíš se bát, že jeden regexp Ti zpomalí stránky :-).
Já ve svých článcích na svém fotbalovém webu používám desítky regexpů (dovoluji totiž skrze zástupné značky vkládat různé "moduly", které pak při vykreslení přetavím na skutečné komponenty se vším všudy) a žádné zpomalení fakt nepozoruji.

Jinak můžeš tohle řešit při ukládání článku a pro úpravu všech předchozích si můžeš napsat nějaký servisní skript, který ty články upraví a zapíše do databáze.

Nebo to můžeš řešit přes JS:
jQuery verze: Živá ukázka

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:

0