Tip na drobnou optimalizaci editačního formuláře v Drupalu

Na Maxiorlovi jsem před pár dny upravoval administrační prostředí a mimo jiné jsem mírně optimalizoval rozložení prvků u políček s obrázky. Dle mého názoru výrazně plýtvaly místem. Stačila však troška CSS a modul CSS Injector.
reklama

Administrační prostředí na Maxiorlovi nemám postaveno s výchozí kombinací modulu Overlay pro překryvné dialogy a administračního vzhledu Seven. Místo toho využívám téma vzhledu Rubik. Kromě toho mám formulář pro editaci obsahu rozdělen do dvou sloupců pomocí modulu Node form columns. Na pravé straně mám umístěny prvky pro vkládání ikonek článků, souborových příloh a hlavně hromadný upload obrázků a s možností jejich vložení do obsahu pomocí modulu Insert.

A právě vzhled této pravé části byl tím, co mě při práci s větším množstvím obrázků trápilo. Když jsem totiž v editoru našel místo, kam chci vložit obrázek, musel jsem u článků s větším počtem obrázků rolovat hodně dolů, abych se dostal k tlačítku Insert (Vložit). Potom zpátky do editoru, kliknout do místa pro další obrázek a rolovat k dalšímu obrázku a jeho vkládacímu tlačítku.

Začalo to postupem času být krajně nepohodlné. Rozhodl jsem se tedy poskládat jednotlivá formulářová políčka s nahranými obrázky tak, aby zabírala co nejmenší prostor.

Jak na úpravu CSS pro administrační stránku

Změny rozložení prvků v editačním formuláři v administračním vzhledu můžete provést několika způsoby. V mém případě stačilo několik nových CSS pravidel. Protože se mi nechtělo vytvářet nové téma vzhledu odvozené od Rubiku a stejně tak jsem nechtěl psát změny přímo do něj (nechci o ně při nejbližší aktualizaci přijít), použil jsem modul CSS Injector.

Modul CSS Injector je praktický nástroj, pomocí kterého můžete do Drupalu doplnit přímo z administračního prostředí nová CSS pravidla. Přitom si určujete, zda se vloží na všech stránkách nebo jen na některých. Já se samozřejmě rozhodl tyto své úpravy vkládat jen u editačních formulářů, tedy na stránkách node/*/edit a node/add/*.

Výhodou je, že si v CSS Inspectoru můžete připravit podobných pravidel několik a pro jejich různé sady definovat různé stránky, kam je chcete vložit.

Když jsem měl před očima původní vzhled formulářového políčka s obrázkem, vadilo mi následující:

  • Klikací název obrázku a jeho velikost zbytečně zabírají jeden řádek, místo toho, aby se umístily do prázdného prostoru nad nimi, tedy mezi náhled a tlačítko Odebrat.
  • Stejně tak rozbalovačka a tlačítko modulu Insert by mohly být vedle obrázku, pod tlačítkem Odebrat.
  • Popisek alternativního textu je zbytečně dlouhý, redaktoři jej stejně nečtou a já vím, co do políčka psát i bez popisku. Stejně tak u políčka pro zadání atributu title.

Pustil jsem se tedy do úprav s pomocí Firebugu, kde jsem testoval různé hodnoty nastavení pro výše popsané prvky formuláře. Brzy jsem zjistil, že název souboru se spolu s velikostí na jeden řádek mezi náhled a tlačítko Odebrat nevejde. Alespoň jsem je tedy posunul nahoru. Rozbalovačka a tlačítko modulu Insert tedy zůstaly na svém místě. Políčka s alternativním textem a Nadpisem jsem ale zbavil popisků a umístil je vedle sebe.

Výsledek? Porovnejte sami. Vlevo je formulářový prvek v původní podobě, vpravo pak po aplikaci několika nových pravidel CSS.

Před úpravou Po úpravě

Zde je použité CSS:

{syntaxhighlighter brush: css;fontsize: 100; first-line: 1; } #edit-field-obrazek .image-widget .file{ left: 135px; position: relative; top: -40px; } #edit-field-obrazek .image-widget .file-size{ left: -25px; position: relative; top: -70px; } #edit-field-obrazek .image-widget .insert{ margin-top: -30px !important; } #edit-field-obrazek .image-widget .form-item .description{ display: none !important; } #edit-field-obrazek .image-widget .form-type-textfield{ margin-right: 10px; } #edit-field-obrazek .image-widget .form-type-textfield{ width: 46% !important; float: left; } #edit-field-obrazek input.form-submit{ font-size: 9px; } {/syntaxhighlighter}

K ideálu to má ještě daleko. Tím, jak jsou obrázky v náhledu jinak vysoké a široké, tak velikost s názvem obrázku docela skáče. Vyřeším to zřejmě tím, že v administraci Drupalu upravím styl obrázku (Média > Styly obrázků) pro zobrazování náhledu a nechám jej zmenšovat a ořezávat na přesnou velikost.

Co se týče použitelnosti modulu Insert u článků s dlouhým seznamem obrázků... Editační stránku roluji sice stále, ale už o poznání méně. Uvažuji o tom, že celé pole pro vložení obrázků nastavím na pevnou výšku s atributy overflow. Pokud bude obrázků více, budou rolovat v pevně ohraničené oblasti a budu je tak mít stále vedle editoru.

Editace článku a vkládání obrázků

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

Co používáte za php editor podle těch obrázků - Comodo?

návštěvník

Dobře, tak já tomu říkám editor, správně je to tedy "vývojové prostředí!. To přece není Tinymce.

Profile picture for user Jan Polzer

Proč na mě křičíte? Asi si nerozumíme, to ale není důvod křičet. Nevím asi, na co se ptáte. Předpokládal jsem, že se ptáte na poslední screenshot, co je na něm zobrazeno za editor. Vývojové prostředí tu v článku na žádném screenshotu není.

návštěvník

Pardon já nekřičel, místo toho vykřičníku měla být ukončující uvozovka. :-) Myslel jsem ten screen kde je css kód.

Profile picture for user Jan Polzer

Aha. To není screenshot, je to prostě vložené CSS a zformátované pomocí SyntaxHighlighteru. Používám to, když si na stránkách zobrazit nějaký kód v přehledné podobě, třeba CSS, PHP, HTML, XML atd.

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Novinka listopad 2020

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru