Create thumbnails for any size image with CSS

Today I have been trying hard to make nice thumbnails out of some full sized pictures. The main problem was that the pictures were of different orientations and the thumbnails needed to be squared and dynamically made. So in order to have nice centered thumbnails hard-coded measurements were out of question.
This solution takes every picture resizes it to fit the lowest width or height value, then crops the central area of the picture resulting in nice-looking squared thumbnails. And the plus is that they work nicely on any kind of pictures, even the odd-sized ones.

In order to pull this of one will need a container that will hold the thumbnails as background.
Here is a quick example code:
HTML:

Thumbnail:
<div class="thumb"></div>
Full image:
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Skyline_oklahoma_city.JPG/320px-Skyline_oklahoma_city.JPG" alt="">;

CSS:

.thumb {
width: 200px;
height: 200px;
background-position: center center;
background-size: cover;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Skyline_oklahoma_city.JPG/320px-Skyline_oklahoma_city.JPG');
}

Thumbnail Preview:

Original image:

A live JSFiddle can be previewed here: jsfiddle.net/XQ4mt

Setup XDebug with XAMPP and NetBeans in GNU/Linux

Here is a quick step by step guide on how to get XDebug running with NetBeans IDE.

After you have setup XAMPP and Netbeans it’s time to install XDebug.

Firstly I’ll recommend using the wizard provided by XDebug. Just open your xampp web control panel and go to the phpinfo() tab then select the whole output and copy it. Paste the information about the php setup into the wizard provided by XDebug.

Then follow the steps provided by the wizard with a slightly change. Namely whenever asked to run the phpize command you’ll have to use xampp’s phpize command:   /opt/lampp/bin/phpize

So, to sum up the required steps:

  1. download XDebug (latest version at the time of writing is 2.2.4)
  2. extract XDebug : tar -xvzf xdebug-2.2.4.tgz
  3. navigate to the XDebug folder: cd xdebug-2.2.4
  4. run  /opt/lampp/bin/phpize
  5. check if the API numbers match the ones provided by XDebug Wizard. The following applies for xdebug-2.2.4
    Configuring for:
    ...
    Zend Module Api No:      20121212
    Zend Extension Api No:   220121212
  6. Run ./configure then make in order to compile XDebug
  7. After compiling is done, copy the compiled extensions into xampp libraries folder: cp modules/xdebug.so /opt/lampp/lib/php/extensions/no-debug-non-zts-20121212
  8. Then edit the xampp’s php.ini file: /opt/lampp/etc/php.ini
  9. Append the following at the end of the file:
    [zend]
    zend_extension=”/opt/lampp/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so”
  10. Then append the XDebug configuration for working with Netbeans:
    [xdebug]
    xdebug.extended_info=1
    xdebug.max_nesting_level=1000
    xdebug.profiler_enable = 1
    xdebug.profiler_enable_trigger = 1
    xdebug.remote_enable=1
    xdebug.remote_host = "127.0.0.1"
    xdebug.idekey="netbeans-xdebug"
    xdebug.remote_port=9000
    xdebug.remote_handler="dbgp"
    xdebug.remote_mode = "req"
    xdebug.remote_log="/opt/lampp/logs/xdebug.log"
    xdebug.show_local_vars=1
    xdebug.trace_output_dir = "/opt/lampp/tmp"
    xdebug.var_display_max_data=1000
    xdebug.var_display_max_depth=-1
    

And now you can start debugging your PHP code in NetBeans. Have fun!