Twitter Bootstrap Image Gallery - creating automatic thumbnails

Question

I thought the thumbnail component of Bootstrap automatically took an image, and cut out a specific size thumbnail to slap on the site. Either I'm using this feature wrong or this is completely false. Everytime I create class="thumbnail", I just get a slightly smaller version of the photo.

As a photographer, my photos are huge, and the "thumbnails" are taking up half the page! Certainly I could resize everything in Photoshop to a 200X200px size and upload these as thumbnails, but I feel like there must be a beter way of doing this.

I tried in the html itself just putting width="200" and height="200" after img src, but the problem here is that instead of cutting a 200X200 square out of the image, the image was scaled down proportionally using one dimension. I.e., the image fits in a 200X200 square, but rather than filling up the entire square (since that's not the original proportions), it fills up a 200X100 type area.

Can anyone help?

Answer 1

Bootstrap won't resize your images. It is a CSS framework, it can only add styles to your web page but you can't use it to do any backend work, like thumbnails creation. Setting the dimensions in the HTML img tag doesn't resize your image neither, it is still the same image that is sent to the browser. So in order to boost your website performance, you need to think of another solution, you don't want to send huge images through the network if you're only gonna show them with thumbnail size.

What kind of website are you running?

For example, Wordpress automatically handles the thumbnails creation when you upload files through the Media Manager. I'm pretty sure most of the CMS have this functionnality.

If you have a PHP website without a CMS, you could try using a library such as phpthumb, that would require some coding though.

If you have a static HTML website, then you have no other choice but to resize the images manually in Photoshop.

By the way, do you optimize your images too? (compression with tools such as tinypng or jpeg-optimizer

Answer 2

I've got a little code to generate thumb:

public function generateThumb($pathToImage, $pathToThumb, $extension, $maxDim)
    {
        //Create a new image according to "MimeType"
        switch($extension){
            case "gif":
                $img = imagecreatefromgif("{$pathToImage}");
                break;
            case "jpeg":
                $img = imagecreatefromjpeg("{$pathToImage}");
                break;
            case "png":
                $img = imagecreatefrompng("{$pathToImage}");
                break;
        }
        // load image and get image size
        $width = imagesx($img);
        $height = imagesy($img);

        // calculate thumbnail size, vertical and horizontal orientation
        $new_width = ($width > $height) ? $maxDim : floor($width * ( $maxDim / $height ));
        $new_height = ($height > $width) ? $maxDim : floor($height * ( $maxDim / $width ));

        // create a new temporary image
        $tmp_img = imagecreatetruecolor($new_width, $new_height);

        // copy and resize old image into new image
        imagecopyresized($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
        // save thumbnail into a file
        imagejpeg($tmp_img, "{$pathToThumb}");
    }

I'm sorry, but I can't remember where I found the original script (On SO and other website). Using that you can generate a thumb each time you add a new image and then use this thumb in your thumbnail preview.

Answer 3

Nop, the Bootstrap will not resize files for You.

Even if You're the only user of the site u can make a file-upload form for yourself. Take a look at Paperclip - it's awesome. And do not forget to protect this form to disallow network users upload some ugly images on your site

Answer 4

Bookstrap is not for resizing api. You can use many of the Image Compression apps that are available. I would recommend http://shrinkjpeg.com since it does not upload the images to server and compresses them locally in browser.