Textpattern Forum

You are not logged in. Register | Login | Help

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

Manaus
Member
From: Turin, Italy
Registered: 2010-10-22
Posts: 210
Website

Images as grid

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

Thanks!

Offline

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

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 1,623
Website

Re: Images as grid

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

Offline

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

sacripant
Plugin Author
From: Dakar – Sénégal – Africa
Registered: 2008-06-01
Posts: 358
Website

Re: Images as grid

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

Offline

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

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 1,623
Website

Re: Images as grid

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

Offline

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

sacripant
Plugin Author
From: Dakar – Sénégal – Africa
Registered: 2008-06-01
Posts: 358
Website

Re: Images as grid

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)

Offline

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

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 1,623
Website

Re: Images as grid

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

Offline

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

sacripant
Plugin Author
From: Dakar – Sénégal – Africa
Registered: 2008-06-01
Posts: 358
Website

Re: Images as grid

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

Offline

Board footer

Powered by FluxBB