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

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.

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.