Blog sitelerinde yazılar listelenirken genelde yazıyla ilgili bir resim de yazının yanında gösterilir. Bunu şuan bulunduğunuz sayfada görebilirsiniz. Bu resimler genelde boyutları orjinal resimden daha küçük olur.

Örneğin yazının resminin boyutları 1024x768 olsun ve bizim sayfamızda yazının resmini gösterdiğimiz boyut ise 200x200 olsun. Eğer 200x200 boyutları için 1024x768 boyutlarına sahip resimi gösterirsek daha küçük boyutlar için daha büyük boyutlardaki resimi götermek sayfamızın açılış hızının yavaşlamasına neden olur.
Bunu önlemek için büyük boyuttaki resmin bizim göstermek istdiğimiz  boyutlarda bir kopyasını oluşturup bu kopya resmi göstermeliyiz. Bu daha küçük boyutlardaki resimler gördüğüm kadarıyla thumbnail olarak adlandırılıyor dolayısıyla bu yazının başlığınu belirlerken bunu göz önüne aldım (: .

Thumbnail Oluştururken İzlenecek Adımlar

  1. Orjinal resmimizin adresi elimizde bulunuyor (upload/yazilar/resim.jpg)
  2. Orjinal resmimizin istediğimiz boyutlardaki kopyasının belirlediğimiz klasör altında adını bu boyutlardan oluşan(200x200) klasörümüzde var olup olmadığını kontrol edeceğiz. Eğer varsa bu kopya resmimizin urlsini alacağız. (upload/yazi-thumbnail/resim_200x200.jpg)
  3. Eğer bu kopya resmimiz yoksa resmin adının sonuna boyutları ekleyerek (upload/yazi-thumbnail/resim_200x200.jpg) kaydedip urlsini alacağız.

Helper

Kodumuzda yer alan thumbnail fonksiyonunu kendi istediğiniz bir helper dosyasına ekleyiniz (Ben helpers/resim_helper.php adındaki dosyama ekledim).

if(!function_exists('thumbnail'))
{
    function thumbnail($orjinal_resim='', $width = '200', $height = '200')
    {       
        if(!$orjinal_resim || !file_exists($orjinal_resim))
        {
            return '';
        }

        $CI = & get_instance();
        $CI->load->helper('string');

        //Thumbnailin yükleneceği klasör
        $yukleme_dizini = 'upload/yazi-thumbnail/' . strtolower(trim($width)) . 'x' . strtolower(trim($height));

        $path_info = pathinfo($orjinal_resim);
        $resim_adi = $path_info['filename'];
        $resim_uzantisi = $path_info['extension'];
        $thumbnail = trim_slashes($yukleme_dizini) . '/' . $resim_adi . '_' . $width . 'x' . $height . '.' . $resim_uzantisi;
        //Eğer thumbnail daha önce olşumuşsa urlsini dönder
        if(file_exists($thumbnail))
        {
            return base_url() . trim_slashes($thumbnail);
        }

        /**
         * thumbnail resmini yazi-thumbnail klasörü altında oluşturduuğumuz yeni klasör içerisine kaydedeceğiz
         * Bu klasörümün adı genişlik*yükseklik olacak.
         * Örneğin thumbnail boyutları 200*200 ise yükleme klasörümüz upload/yazi-thumbnail/200*200 klasörü olacak
         *
         * yüklenecek dizin yoksa onu oluştur
         */
        if(!is_dir($yukleme_dizini))
        {
            mkdir($yukleme_dizini, 0777);

            //resimlerimizin ziyaretçiler tarafından görünmemesi için
            //thumbnaili yüklediğimiz dizine index.html adında yeni bir dosya oluşturacağız.
            $index_file = $yukleme_dizini . "/index.html";
            if(!is_file($index_file))
            {
                $CI->load->helper('file');
                write_file($index_file, 'Görüntüleme izniniz yok');
            }
        }        

        $CI->load->library('image_lib');

        //Bizim istediğimiz boyutlar orjinal resmin boyutlarından büyükse boyutları orjinal resmin boyutu olarak değiştiriyoruz
        list($g, $y) = getimagesize($orjinal_resim);
        if($width > $g) $width = $g;
        if($height > $y) $height = $y;

        $ayar['image_library'] = 'gd2';
        $ayar['source_image'] = $orjinal_resim;
        $ayar['new_image'] = $thumbnail;
        $ayar['maintain_ratio'] = TRUE;
        $ayar['height'] = $height;
        $ayar['width'] = $width;
        $ayar['master_dim'] = 'width';
        $ayar['quality'] = '100';

        $width_height_orani = $width/$height;
        $height_width_orani = $height/$width;

        /**
         * Eğer resmimizin width veya heigth 500 den büyükse resmi kırparak küçülteceğiz
         * Diğer bir senaryo ise bizim istediğimiz width ve heigth oranı
         * orjinal resmin width ve height oranından büyükse (0.1 tölerans tanıyoruz) resmi kırpıyoruz
         */
        if( $g>500 || $y>500 || ($g/$y)>($width_height_orani+0.1) || ($y/$g)>($height_width_orani+0.1) )
        {
            $ayar['maintain_ratio'] = FALSE;

            //Resmin ortasından kırpılması için x_axis ve y_axis değerlerini belirliyoruz
            if($g > $width || $g != $width)
            {
                $ayar['x_axis'] = ($g / 2) - $width / 2;
            }

            if($y > $height || $y != $height)
            {
                $ayar['y_axis'] = ($y / 2) - $height / 2;
            }

            $CI->image_lib->initialize($ayar);
            $CI->image_lib->crop();
        }
        else
        {
            $CI->image_lib->initialize($ayar);
            $CI->image_lib->resize();
        }
        $CI->image_lib->clear();

        return base_url() . trim_slashes($thumbnail);
    }

}

Controller İçerisinde Kullanımı

class Thumbnail extends CI_Controller
{

    public function __construct()
    {
        parent::__construct();
    }

    public function resim()
    {
        //Burada siz kendi helper dosyanızı yüklemelisiniz
        $this->load->helper('resim');
   
        echo '<img src="'.  thumbnail('upload/yazilar/resim.jpg', 200, 200).'"/>';
    }
}