6 replies [Last post]
jess888
jess888's picture
Offline
Regular
Last seen: 3 years 3 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

Trying to force this page to show the thumbnails at the same height. Thumbnails vary in width.

http://barbarawhiteperry.com/test.html

Thanks again!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Find this piece of code

Find this piece of code inside your elastislide.css:

.es-carousel ul li a img {
display: block;
border: none;
max-height: 100%;
max-width: 100%;
}

and change it to

.es-carousel ul li a img {
display: block;
border: none;
height: 53px;
max-width: 100%;
}

Check Maximum Webdesign for your online solutions

jess888
jess888's picture
Offline
Regular
Last seen: 3 years 3 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

helldog2004 wrote: Find this

helldog2004 wrote:

Find this piece of code inside your elastislide.css:

.es-carousel ul li a img {
display: block;
border: none;
max-height: 100%;
max-width: 100%;
}

and change it to

.es-carousel ul li a img {
display: block;
border: none;
height: 53px;
max-width: 100%;
}

Thanks! But it didn't work....

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

uhmm yes it does work, tested

uhmm yes it does work, tested it on your website...
You must have done something wrong, did you change the file online, or did you do it on computer.
If you did it on computer, did you re-uploaded the files via FTP.

If you re-uploaded the files to FTP, did you emptied your website host server cache?
Because I am 150% sure it works.

Check Maximum Webdesign for your online solutions

jess888
jess888's picture
Offline
Regular
Last seen: 3 years 3 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

Tried it again and it worked,

Tried it again and it worked, but forced the widths, so the thumbnails are squished...?

Are you seeing it with landscape orientation thumbnails and consistent heights?

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

ofcourse the images are

ofcourse the images are squashed. if you want the images to look good then I suggest you to use images with the correct dimensions.
For example you want all the thumbnails to be 50px width and 50px height, then you should use images with dimensions which has width and height as same digit.

So using images with 10 x 10 is okay, using images with 65 x 65 is okay, because both sides are the same.
But if you are using 50px in width and 35px in height, then force the images to be 50px in height will ofcourse transform the image in something not so beautiful.

Hope this helped you.

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 25 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Aspect ratio

If you want a set height and you want to maintain the aspect ration (the ratio of width to height), do not specify a width.

It would be more optimal to resize the images and save on the server. Browsers are not nearly as good as real image manipulation programs. For resizing, I'd advise GIMP or ImageMagick, as tests show that these are slightly superior to Photoshop for this purpose. I would also convert the thumbnails to gif since thumbnail reductions seldom benefit from jpg's continuous tones; the reduced palette will not be noticed and file sizes will be significantly reduced.

From the command line, in the current directory

convert *.jpg -thumbnail x90 -set filename:fname '%t_tn' +adjoin '%[filename:fname].gif'
will make a 90px high thummbnail with proportional width for each jpg in the directory. If you're stuck with a legacy OS, i.e. Windows, the command will be convert.exe. Get ImageMagick here.

As far as I'm concerned, ImageMagick belongs in every web developers toolbox. Before Photoshop, even.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.