Twitter Bootstrap Галерея изображений - создание автоматических миниатюр

Question

Я подумал, что компонент миниатюр Bootstrap автоматически взял изображение и вырезал миниатюру определенного размера, чтобы нанести удар по сайту. Либо я использую эту функцию неправильно, либо это полностью ложно. Каждый раз, когда я создаю class = "thumbnail", я просто получаю немного меньшую версию фотографии.

Как фотограф, мои фотографии огромны, а «миниатюры» занимают половину страницы! Разумеется, я мог бы изменить размер всего в Photoshop до размера 200X200px и загрузить их в виде миниатюр, но я чувствую, что это должно быть сделано с помощью beter.

Я попытался в самом html просто положить width = "200" и height = "200" после img src, но проблема здесь в том, что вместо того, чтобы вырезать квадрат 200X200 из изображения, изображение было уменьшено пропорционально используя один размер. Я., изображение подходит к квадрату 200X200, но вместо заполнения всего квадрата (так как это не оригинальные пропорции), он заполняет область типа 200X100.

Может ли кто-нибудь помочь?

Answer 1

Bootstrap не будет изменять размер ваших изображений. Это CSS-структура, она может добавлять стили только на вашу веб-страницу, но вы не можете использовать ее для выполнения каких-либо операций с бэкэнд, например создания миниатюр. Установка размеров в теге HTML img не изменяет размер вашего изображения, это все равно тот же образ, который отправляется в браузер. Поэтому, чтобы повысить производительность вашего сайта, вам нужно подумать о другом решении, вы не хотите отправлять огромные изображения через сеть, если вы только покажете им размер эскиза.

На каком веб-сайте вы работаете?

Например, Wordpress автоматически обрабатывает создание миниатюр при загрузке файлов через Media Manager. Я почти уверен, что у большинства CMS есть эта функциональность.

Если у вас есть сайт PHP без CMS, вы можете попробовать использовать библиотеку, такую ​​как phpthumb, что потребует некоторого кодирования.

Если у вас есть статический HTML-сайт, у вас нет другого выбора, кроме как изменить размер изображений вручную в Photoshop.

Кстати, вы также оптимизируете свои изображения? (Сжатие с помощью таких инструментов, как tinypng или jpeg-optimizer

Answer 2

Nop, бутстрап не будет изменять размеры файлов для вас.

Даже если Вы являетесь единственным пользователем сайта и может сделать форму файла загрузки для себя. Посмотрите на Paperclip - это потрясающе. И не забудьте защитить эту форму, чтобы запретить пользователям сети загружать некоторые уродливые изображения на ваш сайт.

Answer 3

Bookstrap не предназначен для изменения размера api. Вы можете использовать многие приложения для сжатия изображений, которые Я бы порекомендовал http://shrinkjpeg.com, так как он не загружает изображения на сервер и не сжимает их locall y в браузере.

Answer 4

У меня есть немного кода, чтобы генерировать большой палец:

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}"); 
    } 

Мне очень жаль, но я не могу вспомнить, где я нашел оригинальный сценарий (на SO и другой веб-сайт). Используя это, вы можете генерировать большой палец при каждом добавлении нового изображения, а затем использовать этот палец в своем предварительном просмотре миниатюр.