IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Michael Kufner
Člen
Avatar
Michael Kufner:16.7.2016 23:40

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.7.2016 23:40
Avatar
Tomáš123
Člen
Avatar
Tomáš123:17.7.2016 12:36

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.7.2016 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.