Support Forum

Manaus · Tweet

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

Thanks!

philwareham · Tweet

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 · Tweet

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 · Tweet

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 · Tweet

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 · Tweet

@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 · Tweet

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

Txp Network Links

Textpattern Support Forum

2012-04-12 08:30:24

Images as grid

2012-04-12 12:59:26

Re: Images as grid

2012-04-12 14:00:17

Re: Images as grid

2012-04-12 14:19:14

Re: Images as grid

2012-04-12 14:57:45

Re: Images as grid

2012-04-12 15:38:37

Re: Images as grid

2012-04-12 16:00:41

Re: Images as grid