Log in

View Full Version : Thumbnail default size



theremotedr
12-31-2017, 02:26 PM
Afternoon all.
I am making another site but stuck on an issue & looking for some advice please.

Here is the page in question http://www.theatticbanwell.co.uk/index.html
On the right we have thumbnails of which when selected loads the larger sized image.

I would like please some help with making the thumbnails a default size of 360x225
I would also like to restrict the larger size to a default of 1200x800

What i am finding is that i am having to resize each image for when i save them in the thumbs folder because it pushes other images out of sync etc otherwsie.
I would like to just put then photo in the thumbs folder but when shown on the site it would only be a thumb of 360x225.
Please could you assist.


Have a great new year.

simonf
01-05-2018, 12:52 PM
Hi

I find the best way is to do it in my css file

Try this in your css file


.thumb{border-radius:10px;border:2px solid #748178;float:left;width:360px;height:225px;padding:2px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25);margin: 10px 10px 10px 10px;}
.thumb:hover{border-radius:10px;border:2px solid #FF0000;float:left;width:360px;height:225px;padding:2px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25);margin: 10px 10px 10px 10px;}

HTML:


<div><img class="thumb" src="img/1.jpg" alt="" ></div>
<div><img class="thumb" src="img/2.jpg" alt="" ></div>
<div><img class="thumb" src="img/3.jpg" alt="" ></div>
<div><img class="thumb" src="img/4.jpg" alt="" ></div>
<div><img class="thumb" src="img/5.jpg" alt="" ></div>
<div><img class="thumb" src="img/6.jpg" alt="" ></div>

If you look on a website i did http://www.silvertreeestates.co.za/#stelisting abd scroll down a little you will see the featured has a smaller imag then further down on the actual listing etc.

and the above is how I do that...

rgds,Simon

p.s I'm sure there are other ways to do it.... this is my way, use it or loose it up to you guys....