How to Create Responsive Thumbnails in Bootstrap

Authors: CodeToday | Bootstrap | Views: 174 | Posted: 04 AM: 09/19/2017

If you have multiple images and want to display at the same time on a web page, this will slow down your website. 

In order for the website to load quickly, you need to optimize the image before being requested to display it. First you have to create thumbnails for all the images, then use the bootstrap to make the images compatible on all display devices.

To create a thumbnail for an image we will use the GD library of php.

Build the image resize function with GD Library

This function will automatically create a new image from the old image with a smaller size, you can change this size by parameter $thumb_width, $thumb_height

<?
function resizeImage($root_folder,$file_name, $thumb_folder, $thumb_width, $thumb_height){
    
    $arrayFileName = explode(".",$file_name);
    $ext = $arrayFileName[count($arrayFileName)-1];
	
    $image     = $root_folder.$file_name;
    $thumbnail = $thumb_folder.$file_name;
	
    list($width,$height) = getimagesize($image);
    $thumb_create = imagecreatetruecolor($thumb_width,$thumb_height);
    switch($ext){
    	case 'jpg':
            $source = imagecreatefromjpeg($image);
            break;
        case 'jpeg':
            $source = imagecreatefromjpeg($image);
            break;
	case 'png':
            $source = imagecreatefrompng($image);
            break;
        case 'gif':
            $source = imagecreatefromgif($image);
            break;
        default:
            $source = imagecreatefromjpeg($image);
    }

    imagecopyresized($thumb_create,$source,0,0,0,0,$thumb_width,$thumb_height,$width,$height);
    switch($ext){
    	case 'jpg' || 'jpeg':
            imagejpeg($thumb_create,$thumbnail,100);
            break;
        case 'png':
            imagepng($thumb_create,$thumbnail,100);
            break;
	case 'gif':
            imagegif($thumb_create,$thumbnail,100);
            break;
        default:
            imagejpeg($thumb_create,$thumbnail,100);
     }
	return $fileName;
}
?>

Bootsrap Source Code

Below, i used the bootstrap code to format the image after create thumbnails for images class = "img-rounded", class = "img-circle", class = "img-thumbnail".

<?
// Call resizeImage() function to create thumbnail
$resizeImage = resizeImage('image/','big-responsive-thumbnails-in-bootstrap.png','image/thumb/','100','100');

echo '<div class = "row" style = "border:1px solid #CCC; padding:10px">';
echo '<div class="col-md-4"><img src = "image/big-responsive-thumbnails-in-bootstrap.png" class = "img-rounded"><div class="caption"><p>class = "img-rounded"</p></div></div>';
echo '<div class="col-md-4"><img src = "image/big-responsive-thumbnails-in-bootstrap.png" class = "img-circle"><div class="caption"><p>class = "img-circle"</p></div></div>';
echo '<div class="col-md-4"><img src = "image/big-responsive-thumbnails-in-bootstrap.png" class = "img-thumbnail"><div class="caption"><p>class = "img-thumbnail"</p></div></div>';
echo '<div class="col-md-4"><img src = "image/thumb/big-responsive-thumbnails-in-bootstrap.png" class = "img-rounded"><div class="caption"><p>class = "img-rounded"</p></div></div>';
echo '<div class="col-md-4"><img src = "image/thumb/big-responsive-thumbnails-in-bootstrap.png" class = "img-circle"><div class="caption"><p>class = "img-circle"</p></div></div>';
echo '<div class="col-md-4"><img src = "image/thumb/big-responsive-thumbnails-in-bootstrap.png" class = "img-thumbnail"><div class="caption"><p>class = "img-thumbnail"</p></div></div>';
echo '</div>';
?>

Note: You can use this function to create thumbnails directly when you upload images so you just need to change the parameter $file_name = $_FILES [$field_name] ['name']

After performing the above steps you will get the results as below

How to Create Responsive Thumbnails in Bootstrap


If you have any questions, please leave a message below