Diskuze: TinyMCE a vyplivnutí responzivního obrázku

HTML a CSS HTML a CSS TinyMCE a vyplivnutí responzivního obrázku American English version English version

Avatar
Michael Kufner:

Zdravím,
dělám na svém CMS, kde vytvářím články pomocí editoru TinyMCE. Narazil jsem na 3 problémy:

1. Jak mám udělat obrázky responzivní? Co mě napadlo, tak při ukládání projet dle regulérního výrazu zda-li obrázek má width a pokud ano tak ho přepsat na max-width. Je to dost blbé řešení, napadá někoho lepší, popř. umí to tinyMCE nějakým svým pluginem nebo funkcí?
Možná by stačilo i každému obrázku dát automaticky třídu responsive, kde by byla jeho velikost v pixelech jako max-width.. Nenapadá mě nic lepšího

2. U obrázků které vkládám je úplně blbě vyřešené zalamování, to je asi holt nevýhoda editorů v prohlížeči.. Popř. existuje něco jak to zjednodušit (třeba něco jako ve wordu obtékání textu?)

3. Jak mám pořešit to, že když je obrázek zarovnán vpravo (má od tinyMCE atribut style="float: right") tak se má dát margin nahoru, dolů a doleva a když je zarovnán nalevo tak naopak? Napadá mě nějaký javascript řešení, kontroly atributu style a floatu, ale zase je to poměrně složité.

Za jakoukoli pomoc budu rád.
Ukázka:
http://readbook.cz/…ani/na_zapad

 
Odpovědět 16. července 23:40
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

1. Malo by stačiť každému obrázku hneď pridať max-width: 100%; nenapadá mi žiadna škoda, ktorú by mohla takáto deklarácia, hoci úplne všeobecná, napáchať.

2. V treťom bode o akomsi obtekaní píšeš...

3. Možno by bolo jednoduchšie pracovať v prípade obrázku s triedami:

img.left {
        float: left;
        margin: .2em .2em .2em 0;
}
img.right {
        float: right;
        margin: .2em 0 .2em .2em;
}
img.center {
        display: block;
        margin: auto;
}
img {max-width: 100%;}

Neviem aké možnosti má používaný editor a či by prípadne šlo prepísať, aby sa namiesto štýlu float: left resp. right priradila obdobná trieda.

Nahoru Odpovědět 17. července 12:36
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.