Images as grid

Manaus · 2012-04-12 08:30:24

Hello,
is there any plugin showing the admin images page as a grid, instead of a list?

Thanks!

philwareham · 2012-04-12 12:59:26

Not that I know of. This topic does come up time and again and I know the layout display of images in the admin area will be the target of improvements at some point in the future (because I’ll probably be doing it).

sacripant · 2012-04-12 14:00:17

I did a quick test with the Classic theme.
With a little css is possible.

I add a grid-display class with jquery :

$('#images_form >#list').addClass('grid-display');

and then add the CSS in the theme (classic / textpattern.css)

#list.grid-display thead      { display: none; }
#list.grid-display tbody      { width: 95%; text-align: center; }
#list.grid-display tbody tr   {
   display: inline-block;
   width: 22%;
   padding: 1%;
   overflow: hidden;
   text-align: left;
}
#list.grid-display td         {
   display: inline-block;
   width: 98%;
   padding: 1%;
}
#list.grid-display td.actions,
#list.grid-display td.tag-build,
#list.grid-display td.date    
                              { display: none; }
#list.grid-display td.id,     
#list.grid-display td.name    { width: auto; }
#list.grid-display td.image   { text-align: center; }

to you to improve

philwareham · 2012-04-12 14:19:14

Whilst the above might work as a band-aid (I’ve not tested it), the whole structure of the images listing page needs to be redesigned really from the ground up. That is something I’m looking into for inclusion in Textpattern 4.6 (if there is such a thing, i.e. not 4.5) or Textpattern 5 (if that happens sooner).

sacripant · 2012-04-12 14:57:45

Small patch of code :
For the CSS work, you must remove width attribute associated to td.
And at that, I also remove width and height attribute of the img for flexible width.

Jquery code :

$(function() { 
   $('#images_form > #list').addClass('grid-display').find('td').removeAttr('width').find('img').removeAttr('width').removeAttr('height');
});

CSS code :

#list.grid-display thead      { display: none; }
#list.grid-display tbody      { width: 95%; text-align: center; }
#list.grid-display tbody tr   {
   display: inline-block;
   width: 22%;
   padding: 1%;
   overflow: hidden;
   text-align: left;
}
#list.grid-display td         {
   display: inline-block;
   width: 98%;
   padding: 1%;
}
#list.grid-display td.actions,
#list.grid-display td.tag-build,
#list.grid-display td.date    
                              { display: none; }
#list.grid-display td.id,     
#list.grid-display td.name    { width: auto; }
#list.grid-display td.image   { text-align: center; }
#list.grid-display img        { max-width: 100%; }

I tested under gecko and webkit

@ philwareham
Are the width attributes associated to td will be deleted in txp 4.5?

Last edited by sacripant (2012-04-12 15:05:18)

philwareham · 2012-04-12 15:38:37

@sacripant

The td widths are currently still there in 4.5 SVN. I’m in two minds about whether to get them taken out at this point in time and let the content dictate the cell width instead, or add CSS rules, or leave the implicit widths in place. I’m creating a UI doc for the admin area soon so that may give me a clearer picture of what needs to change.

sacripant · 2012-04-12 16:00:41

OK,
and thank you for all the cleaning job you did.

Textpattern CMS

Textpattern CMS support forum

#1 2012-04-12 08:30:24

Images as grid

#2 2012-04-12 12:59:26

Re: Images as grid

#3 2012-04-12 14:00:17

Re: Images as grid

#4 2012-04-12 14:19:14

Re: Images as grid

#5 2012-04-12 14:57:45

Re: Images as grid

#6 2012-04-12 15:38:37

Re: Images as grid

#7 2012-04-12 16:00:41

Re: Images as grid

Board footer