Directory thumbnail frame are unformatted

[olivierguillard]

Hi Clément,

nice job, thanks ;-)

Would that be possible to have an option that would allow to format the thumbnails to a fixed height when displaying the directory.

Currently when firstname / name (which are the default attributes displayed under the photo) does'nt fit on one line, then some thumbnails are higher than other which reach to an uggly page displayed.

Nothing critical but a shame.

[coudot]

Hello Olivier,

yes we could add an option.

You can fix it with a simple CSS rule in htdocs/css/white-pages.css, for example:

div.gallery img {
  width: 90px;
  height: 120px;
}

[olivierguillard]

Hi Clément, you are right ! Not sure that this is good (I'm not a web developper) but looking at it I had to add this to keep the image scale : div.gallery img img-responsive { width: 90px; height: 120px; } thanks for the trick anyway,

…

--- Olivier 2018-01-11 10:22 GMT+01:00 Clément OUDOT <notifications@github.com>:

Hello Olivier, yes we could add an option. You can fix it with a simple CSS rule in htdocs/css/white-pages.css, for example: div.gallery img { width: 90px; height: 120px; } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#10 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Af1LQ5qQ5EkKaZ2p2oY-U5cbH9fggHb0ks5tJdLEgaJpZM4RZ7Oe> .

[coudot]

Strange as "img-responsive" is a class, not an HTML element. It should be instead:

div.gallery img.img-responsive {
width: 90px;
height: 120px;
}

Forcing width and height will force the ratio. You can force only one of them to keep original ratio.

[olivierguillard]

You are probably right. However the scale is kept for thumbnails with this : div.gallery img img-responsive {width: 90px;height: 120px; } Not with this : div.gallery img img-responsive {width: 90px;height: 120px; } I also added this : .img-responsive,.thumbnail>img,.thumbnaila>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img { height:120px } As a fact, as said I humbly admit that I'm not a web dev, also I have not tested on different displays (tablets, smartphone....) so I'm really tinkering here, nothing more. At this stage I'm only trying to set up a poc for a particular use case.

…

--- Olivier 2018-01-11 11:27 GMT+01:00 Clément OUDOT <notifications@github.com>:

Strange as "img-responsive" is a class, not an HTML element. It should be instead: div.gallery img.img-responsive {width: 90px;height: 120px; } Forcing width and height will force the ratio. You can force only one of them to keep original ratio. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#10 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Af1LQ4PdZlgXpBmNSbSRvWAApdiFXA4Cks5tJeIpgaJpZM4RZ7Oe> .

[olivierguillard]

Sorry, not with this : div.gallery img.img-responsive {width: 90px;height: 120px; 2018-01-11 11:41 GMT+01:00 Olivier <github@guillard.nom.fr>:

…

You are probably right. However the scale is kept for thumbnails with this : div.gallery img img-responsive {width: 90px;height: 120px; } Not with this : div.gallery img img-responsive {width: 90px;height: 120px; } I also added this : .img-responsive,.thumbnail>img,.thumbnaila>img,.carousel- inner>.item>img,.carousel-inner>.item>a>img { height:120px } As a fact, as said I humbly admit that I'm not a web dev, also I have not tested on different displays (tablets, smartphone....) so I'm really tinkering here, nothing more. At this stage I'm only trying to set up a poc for a particular use case. --- Olivier 2018-01-11 11:27 GMT+01:00 Clément OUDOT ***@***.***>: > Strange as "img-responsive" is a class, not an HTML element. It should be > instead: > > div.gallery img.img-responsive {width: 90px;height: 120px; > } > > Forcing width and height will force the ratio. You can force only one of > them to keep original ratio. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#10 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/Af1LQ4PdZlgXpBmNSbSRvWAApdiFXA4Cks5tJeIpgaJpZM4RZ7Oe> > . >

[coudot]

I added options to truncate the title so it will not be displayed on more than one line.

We can also create an option to fix the image height.

[coudot]

Now we can also fix height and/or width. I think this is enough to close this issue.