I’ve simplified this app a lot, with focus on efficiency and usability. As I’ve mentioned in the last update post, I was going for Deviantart portfolio-like thingy, because of efficiency of that layout, but of course with my own functionality.

Functionality

The core functionality is still same. You don’t need any database, everything is generated by the content of the main “galleries/” folder, so you don’t have to upload your images only through the web interface, if you don’t wan to (even though it is really comfortable with integrated Uploadify).

Screens

New features

The new things are:

• The new layout, with focus on efficiency of browsing. All galleries are listed on left side menu, which is always on the same position while you are scrolling, so you have always access to it (Except if the menu height is bigger than height of the window. Than it stays on the top of a page for obvious reasons.) Everything is black/dark, so only colors are those from the images, so the rest of site is not stealing your focus from the important content.
• Everything is based on AJAX, which means that by clicking on any link, or option, there will be no page reload (exept login and logout).
• Thumbnails are all stored in same thumbnails cache folder in the main system directory, so they will not pollute the original galleries folders.
• The feature for changing backgrounds was removed, because that is just thing that you’ll do maybe once in the existence of gallery, so it was just useless code. You can still add your custom backgrounds though, just add

  body { background: url('path-to-background.jpg') no-repeat left top #111; }

  in style.css (“system/style/style.css”) and you are done. As menu and all UI components are transparent, it will work beautifully.

• Except background feature, many other useless things were removed to not bother visitor with something that he do not care about. I’m talking about info about picture size, resolution, name, bunch of useless buttons, everything is simplified, and hidden now.
• How hidden you may ask? Well thats the another new feature.
  Keyboard shortcuts:
  • “« »” (keyboard arrows): Left and right navigation in image viewer.
  • “A“: Opens admin login if you are not logged, otherwise settings panel.
  • “U“: Upload box toggle.
  • “D“: Toggle of Click delete mode (if this is triggered, clicking on images will delete them).

Compatibility

Works 100% in: FireFox, Chrome, Safari, IE 8

Works 110% in Opera, as there could be removed vertical scrollbar, which is disturbing element in simply application like this, when the screen is jumping for those few pixels while browsing through shorter and longer galleries.

Demo and download

Demo presentation

1.09KB 185x

MyGallery 1.2

33x

Snippet

Functionality is straight forward. You’ll bind this snippet to input type=”text”, and after every keyup event, it’ll take the value of this input, and it’ll hide the table rows, so only the ones with this value/string in them will remain visible.

Here is the snippet with comments:

// Bind the keyup event triggering our
// snippet to text input with class .selector
$("input:text.selector").keyup( function(){

    // define variables needed in snippet
    var keyWord = $(this).attr("value").toLowerCase(), // our text string we are searching for
        tableSelector = "#target", // selector of target table (one/unique table)
        tempMesh = ""; // variable for storing temporary tr content to search in

    // at least 2 letters long string
    if( keyWord.length > 1 ) {

        // cycle through all table rows to filter them
        $(tableID + " tr").each( function(i,e){

            // select the td elements of each tr, as we can't
            // manipulate with visibility of tr
            var myChildren = $(this).children("td");

            // get the text of all td elements
            tempMesh = $(this).text().toLowerCase();

            // and search in them for our keyword
            if( tempMesh.indexOf(keyWord) == -1 ){

                // if there is no match, hide tr childrens
                myChildren.hide();

            }else{

                // if there is match, make sure they will be visible
                myChildren.show();

            }

        } );

    }else{

        // in case of less than 2 letters long keyword,
        // return the table into default state
        $(tableID + " td").show();

    }

});

Table search plugin

Plugin is a little bit more complex with a few options and effects. Usage is simple:

-
$("triggerSelector").tableSearch("tableSelector", {options});
-

Explanation:

• triggerSelector: Could be any object, or array of the objects. According to the object type, it is bonded with the corresponding even type (text input = keyup, radio,checkbox = change, button = click).
  In case of inputs, selects, input buttons, or textareas, it is getting their value as a keyword. In case of custom buttons it is getting their text() (what is between tags = <div class=”button”>Keyword</div>) as a keyword.
• tableSelector: Navigate plugin to which table you want filter.
• options: There are 3:
  • effect: fade, slide, highlight (default = no effect, plain hiding and showing)
  • speed: milliseconds (default: 200)
  • fadeto: in case of Highlight, this is the opacity into which the not matching rows will fade to [0-1] (default: 0.2)

Example:

-
var tsOptions = {
	'effect' : 'highlight',
	'speed' : 100,
	'fadeto' : 0.1
}
$("input:text.selector").tableSearch("#myTable", tsOptions);
-

Now just start typing in this input and it will filter the table as you are touching the keyboard :) Here is the demo and plugin download.

Live demo

76x

Plugin download

4.20KB 43x

Valid XHTML/HTML/CSS/LOLCAT/… badges

You know what I’m talking about:

Your visitors either don’t know what it is, they do not care, or – in my case – they are laughing for a first few years, and than it is just silly.
It really was laughable to want a valid web from webdevelopers in time, where the most widely used browser was not supporting the web standards.
And now, there is not much meaning in it either. 100% result in W3C validator does not mean the right usage of web standards. It does not mean, that your website will render exactly how you want, or even that it’ll render in every browser the same.
For example, I can have a website with nice, clean code, working and looking exactly how I want in every major browser, with error-free JavaScript, but:

• I’ve used a custom HTML tag attribute for better comfort in JavaScript (as “data-” attribute is not supported yet): BAM! Code is not valid.
• I’ve declared a CSS opacity value, which is working in almost every browser by now, but it is not officially “out” yet: BAM! Code is not valid.
• etcetera…

Validation badges are used only for e-penis enlargement, or ripping off the customers for “additional services” – yes, I’ve seen a webdesigners, that are persuading their clients that they NEEED that badge, so they can charge more.

And of course, they look awful, and they do not fit anywhere :)

Horizontal scrollbars

I have a 1920 pixels wide screen resolution. If I see a horizontal scrollbar, I get annoyed.

• badly coded JavaScript horizontal sliders
• designers that think that horizontally based pages are cool (seriously, this is not what “accessibility” means)
• bad cascading styles

These are just few of the problems that causes this issue.

Advertisements

Oh, how much i hate them… ALL of them. There is not one ad on my personal webpages, and I’ll do whatever I could to preserve it that way. I hate when I have to scroll through 2 pages of ads to get to the content. I hate when blinking ads are trying to kill me with epileptic seizure. I hate when flash ads are moving, sliding, popping, animating, and stealing my focus from things that I want really read, or watch. I hate when flash ads are removing my cursor from screen.

In spite of my hatred against ads, I understand the business model based on them. So, people, if you like some website, you are grateful for services provided by it, click on the ads there. It doesn’t cost you anything, website will get some money, and the best part is: those bastards that created that awful blinking ads will pay for it :)

Flash abbusing

Already mentioned ads, flash menus, flash buttons, or other unnecessary flash components. Most of what I’m seeing in flash could be done with few lines of JavaScript. Things in flash are often not much accessible for users (copy&paste of text), and I just hate when I have to click before activating flash controls. Not mentioning overlapping HTML elements, or whole flash blocks disappearing when coder is trying to prevent overlapping.

Yes, I’m not a huge fan of flash, but I’m not totally against it. I’m just marked by webdevelopers, that are doing Flash components on their website only because they know Flash, not because Flash is the good choice, and that is just fundamentally bad behavior. On the other hand, whole interactive websites completely done in flash are often looking really good (checkout this great list of awesome flash sites), but such approach can not be used for other than purely presentational purposes (like main pages of movies, etc).
Flash video players are another example of the right choice for Flash (even though SilverLight is better, presence of Flash plugin is more common).

JavaScript abusing

There are MANY ways how JavaScript is abused. For example:

• words replaced for advertisement links that pops up advert bubble on hover event
• links that will show you the thumbnail of page they are referring to if you will hover them (what is the point of that!?)
• share “supper” buttons
• etcetera…

These things are truly the plague of the websites.

Java applets

Seriously, websites are not the place for Java. Nuff said.

Donate spam

In every WordPress plugin, under every article post, on every tutorial demo presentation, there is some PayPal icon. Please, choose one place on your website, and leave it there. Make the user interface of your apps clean, and do not spam with that everywhere.

Web 2.0 bullshit talk

I can’t explain it better than Andy Budd and Jeremy Keith on their How to Bluff Your Way In Web 2.0 presentation. Must see!!

Click here to view the embedded video.

Register or GTFO

You had to encounter that. Website is offering you some download, presentation, or tutorial, but only if you’ll register there. No fees, or other requirements, just register……. WHY?! Why the holy fuck are you bothering people with registration, if you are offering that for free? Why do you need that useless account?

FireFox users, there is a big helper for you against fuckers like this. It is called the BugMeNot plugin, and it’ll log you in on every website that is requiring useless registration.

Apophysis

Website: Apophysis.org
Documentation: Apophysis@wikispaces
Download: Sourceforge.net

Apophysis is a freeware Windows program for designing and rendering fractal flames . It was created by Mark Townsend and has since been improved and updated by Peter Sdobnov, Piotr Borys and Ronald Hordijk.

Apophysis UI & few renders:

ContextFree

Website: ContextFreeArt.org
Documentation: ContextFree HOWTO
Download: ContextFree download page

Context Free is a program that generates vector like images from written instructions called a grammar. The program follows the instructions in a few seconds to create images that can contain millions of shapes.

ContextFree UI & few renders:

In every of those cases it is highly dangerous for users, since lack of security in here can cause the new owner of their private data to crack their passwords, thus be able to steal their identity on other places of teh interwebz. Good, strong, and different passwords for any website could solve this problem, but who would be able to memorize that… That’s why I have created this little web app, called Password generator.

Application can be found on this permanent URL: password.darsain.net

What problem is this solving

The functionality is simple. You need only one master password, and the domain name of a website you want to get your new password for, and it will generate you a 64 letters long unbreakable hash, which you can use as a password (for funny webs with max password length requirements, there are 40, and 16 letters long versions). If password like this will be again hashed into random website database, it is not important if they are salting or not, hash from such password can not be broken (I reserve 10 years long expiration date for this statement :P ).

Of course, when hacker have already got the access to database, you can’t do anything about protecting your account from being hacked on this hypothetical website. But you can minimize the damage from such event. Imagine, that he would get to your password you are using on every place on the Internet. Pretty awesome situation, isn’t it? :) And exactly the damage out of the boundaries of this hypothetical website is the issue that this Password generator is solving.

How is it working

I would like to think, that the UI of this little application is self explanatory :) The background, however, is not.

That is why you should always beware such websites, as they are pretty often used for phishing. To ensure the security, the whole generation and algorithms are done in your browser by JavaScript. No data whatsoever are send to any server, or simply everywhere else except your monitor screen.

The only disadvantage is, that – from some reason – I could shut this web application down, and you will be unable to regenerate your passwords. For issue like this, as everything is done with JavaScript and HTML (+ a little bit of unimportant flash), you can just simply save the whole website to your hard drive and run it from there without any problems. Well, there is one little issue with flash player permissions when running on localhost, so Copy to clipboard button may not work, unless you’ll set this flash player setting to Always allow.

If you don’t know hot to save whole website so it will be actually working, here are the downloads for you.

Single mht file for Opera and IE

255.77KB 77x

Archive with all application files

121.28KB 81x

Update:

Guys, do not use this. This password system idea is great, convenient, but in real world highly counter-productive, even useless. The security of websites on the internets is so bad, that they will simply not let you to have secure passwords like this. Almost every website out there have some restrictions, like having short passwords (max 16~ chars long), consisting only from alphanumeric characters, etcetera… From everywhere I’ve tried this, the only place where it worked was Google!

The best thing to do right now, is not to have any account anywhere at all… if a website is forcing you to register to download or view something they are offering for free, than just flip the finger, and either close the tab, register with some one time account, or in case of Firefox users -> download the spectacular BugMeNot plugin.

- – - – - – - – - – - – - – - – - – - – - – - – - – -

I, Michael “Monty” Widenius, the creator of MySQL, is asking you urgently to help save MySQL from Oracle’s clutches. Without your immediate help Oracle might get to own MySQL any day now. By writing to the European Commission (EC) you can support this cause and help secure the future development of the product MySQL as an Open Source project.

What this text is about:
- Summary of what is happening
- What Oracle has not promised
- Oracles past behavior with Open Source
- Help spread this information (Jump to ‘What I want to ask you to do’)
- Example of email to send to the commission (Jump to ’send this to:’)

I have spent the last 27 years creating and working on MySQL and I hope, together with my team of MySQL core developers, to work on it for many more years.

Oracle is trying to buy Sun, and since Sun bought MySQL last year, Oracle would then own MySQL. With your support, there is a good chance that the EC (from which Oracle needs approval) could prevent this from happening or demand Oracle to change the terms for MySQL or give other guarantees to the users. Without your support, it might not. The EC is our last big hope now because the US government approved the deal while Europe is still worried about the effects.

Instead of just working out this with the EC and agree on appropriate remedies to correct the situation, Oracle has instead contacted hundreds of their big customers and asked them to write to the EC and require unconditional acceptance of the deal. According to what I been told, Oracle has promised to the customers, among other things, that “they will put more money into MySQL development than what Sun did” and that “if they would ever abandon MYSQL, a fork will appear and take care of things”.

However just putting money into development is not proof that anything useful will ever be delivered or that MySQL will continue to be a competitive force in the market as it’s now.

As I already blogged before, a fork is not enough to keep MySQL alive for all future, if Oracle, as the copyright holder of MySQL, would at any point decide that they should kill MySQL or make parts of MySQL closed source.

Oracle claims that it would take good care of MySQL but let’s face the facts: Unlike ten years ago, when MySQL was mostly just used for the web, it has become very functional, scalable and credible. Now it’s used in many of the world’s largest companies and they use it for an increasing number of purposes. This not only scares but actually hurts Oracle every day. Oracle have to lower prices all the time to compete with MySQL when companies start new projects. Some companies even migrate existing projects from Oracle to MySQL to save money. Of course Oracle has a lot more features, but MySQL can already do a lot of things for which Oracle is often used and helps people save a lot of money. Over time MySQL can do to Oracle what the originally belittled Linux did to commercial Unix (roughly speaking).

So I just don’t buy it that Oracle will be a good home for MySQL. A weak MySQL is worth about one billion dollars per year to Oracle, maybe more. A strong MySQL could never generate enough income for Oracle that they would want to cannibalize their real cash cow. I don’t think any company has ever done anything like that. That’s why the EC is skeptic and formalized its objections about a month ago.

Richard Stallman agrees that it’s very important which company owns MySQL, that Oracle should not be allowed to buy it under present terms and that it can’t just be taken care of by a community of volunteers. http://keionline.org/ec-mysql

Oracle has NOT promised (as far as I know and certainly not in a legally binding manner):

- To keep (all of) MySQL under an open source license
- Not to add closed source parts, modules or required tools.
- To not raise MySQL license or MySQL support prices
- To release new MySQL versions in a regular and timely manner.
- To continue with dual licensing and always provide affordable commercial licenses to MySQL to those who needs them (to storage vendors and application vendors) or provide MySQL under a more permissive license
- To develop MySQL as an Open Source project
- To actively work with the community
- Apply submitted patches in a timely manner
- To not discriminate patches that make MySQL compete more with Oracles other products
- To ensure that MySQL is improved also in manners that make it compete even more with Oracles’ main offering.

From looking at how Oracle handled the InnoDB acquisition, I don’t have high hopes that Oracle will do the above right if not required to do so:

For InnoDB:
- Bug fixes where done (but this was done under a contractual obligation)
- New features, like compression that was announced before acquisition, took 3 years to implement
- No time tables or insight into development
- The community where not allowed to participate in development
- Patches from users (like Google) that would have increased performance was not implemented/released until after Oracle announced it was acquiring Sun.
- Oracle started working on InnoDB+, a better ‘closed source’ version of InnoDB
- In the end Sun had to fork InnoDB, just to be able to improve performance.

It’s true that development did continue, but this was more to be able to continue using InnoDB as a pressure on MySQL Ab.

Note that Oracle’s development on the Linux kernel is not comparable with MySQL, because:
- Oracle is using Linux as the main platform for their primary database product (and thus a better Linux makes Oracles platform better)
- The GPL code in the kernel is not affecting what is running on top on it (because of an exception in Linux).

Because we don’t have access to a database of MySQL customers and users the only way we can get the word out is to use the MySQL and Open Source community. I would never have resorted to this if Oracle would not have broken the established rules in anticompetitive merger cases and try to influence the EC by actively mobilising the customers.

This is very critical to this AS SOON AS POSSIBLE as EC, depending on what Oracle is doing, needs to make a decision either on Monday (2009-12-14) or within two weeks. Becasue of the strict deadline, every email counts!

What I want to ask you to do (until 2009-12-19):

- Forward this email to everyone that you know is using MySQL or Open Source/free software and to all email list where you know there are people present that use or care about MySQL and open source (please check first that this email hasn’t been sent there before)
- Alternatively send emails with information about this and tell them to read http://monty-says.blogspot.com/2009/12/help-saving-mysql.html
- Add links on your web site to http://monty-says.blogspot.com/2009/12/help-saving-mysql.html with the text “We are using MySQL, help save it”, for the duration of the next two week.
- Blog about this (feel free to include this text or just link to my blog)
- Call by phone (don’t contact by email, this is urgent) your boss or VP and ask him to read this email and send a letter to the EC commission ASAP!
- If you don’t have anyone to contact above, send an email to the EC!

As we want the EC to get a correct picture of the situation, we want you to first fill in the upper part and then choose one of the proposed texts belowe that best matches your view of the situation. Feel free to supply your own text and additional information if you think this will help the EC to reach a better understanding of how MySQL is used.

Send this to: comp-merger-registry@ec.europa.eu

If you have extra time to help, fill in the following, if not, just skip to the main text.

Name:
Title:
Company:
Size of company:
How many MySQL installations:
Total data stored in MySQL (megabyte):
For what type of applications is MySQL used:
Should this email be kept confidential by EC: Yes/No

Copy or use one of the below texts as a base for your answer:

a)
I don’t trust that Oracle will take good care of MySQL and MySQL should be divested to another company or foundation that have everything to gain by developing and promoting MySQL. One should also in the future be able to combine MySQL with closed source application (either by exceptions, a more permissive license or be able to dual license MySQL under favourable terms)

b)

I think that Oracle could be a good steward of MySQL, but I would need EC to have legally binding guarantees from Oracle that:
- All of MySQL will continue to be fully Open Source/free software in the future (no closed source modules).
- Open Source version and dual-licensed version of MySQL should have same source (like today).
- That development will be done in community friendly way.
- The manual should be released under a permissive license (so that one can fork it, the same way one can fork the server)
- That MySQL should be released under a more permissive license to ensure that forks can truly compete with Oracle if Oracle is not a good steward after all.
Alternatively:
- One should be able to always buy low priced commercial licenses for MySQL.
- All of the above should be perpetual and irrevocable.

There should also be mechanism so that if Oracle is not doing what is expected of it, forks should be able to compete with Oracle

c)
I trust Oracle and I suggest that EC will approve the deal unconditionally.

——————–

Let us prove to Oracle and EC that the Open Source community is a true force and we take good care of our citizens and we prefer to work with companies that does the same!

The future of MySQL is in your hands!

Thanks for the help!
Michael Widenius
Creator of MySQL

——————–

For more informations about this issue, please visit the Monty says blog.

I know that Google webdesigners suck, and I’ve learned to live with that, but this is too much. Lucky me, I’m using Opera as a primary browser, and one of the really useful features Opera have, is using my own style sheets for any domain I want. This is a really great thing, as I’m tweaking with it many website I’m often surfing on :)

So, I’ve created this little .css file consisting of 1 line of simple css, and it is fixing exactly that issue I’m bitching about in first section.

#watch-player-div embed {
  width: 100% !important;
  height: 565px !important;
  margin: 0 !important;
}

Here is the result:

If you want this clean YouTube experience too, the Installation is pretty simple. Here are the steps:

• download the youtube-player-fix.css file
• be a person who is using Opera as a web browser
• open YouTube
• right click on some non-active background, and choose “Edit Site Preferences…”
• under the Display tab, you have a “My style sheet” option, where you can load the youtube-player-fix.css file
• click OK, and you are done

From now on, every page hosted on domain youtube.com will render with this additional css.

CSS file

99B 128x

tl;dr: checkout the Motion graphics gallery.

Just one thing concerns me, and that is the download speed limit of my provider, which may not be enough for smooth streaming without loading. But it have to be enough for a while, till I’ll make some time (and mood) for hosting provider change, which is on my to do list at least for a few months by now :)

New upload feature preview

By calling files selection by flash, you can choose multiple files at once (or whole folder with Ctrl+a), which is not possible only with HTML~JS. That means, that you do not have to select all files one by one, and smash your head on keyboard after 101st image. All files are than inserted into an upload queue, which is triggered by the “Upload files” button. Everything is take care of by AJAX, so there is no need for site reloading, and you can see how you gallery is filling with images :)

Demo presentation

1.09KB 185x

Application files

7.64KB 129x

Bugs & suggestions

Report all bugs here as comments (or as comments on main MyGallery page on www.darsain.net).

If you have some suggestion, or feature requests … same way as with bugs :) just write them down here.

Future plans

In the next update I would like to jump straight to version 2.0, because I want to redesign the whole thing, and change app structure. I would love to recreate it to looks and function more like Deviantart Portfolio application.

We will write 2 functions for creating thumbnails from random image (png, jpg, gif). First function will take thumbnail width and height set by you, and cut the “most important” part from the image (I’m assuming, that you are creating thumbnails of websites, so center top is the area I’m talking about) according to thumbnail ratio, and resize it into your thumbnail in exact size that you’ve set. Second function will take max thumbnail width and height set by you, and resize the image so it will fit your max values, but with preserving its original resolution ratio.

1.) Generate thumbnail of exact size

This function will cut the biggest possible top center of image, so it can be resized into width and height you need without deforming it. The advantage of this method is, taht all thumbnails have same resolution, therefore they can be easily styled on website, and it just looks better. Disadvantage is, that sometimes, it could cut the important part of image.
For better understanding, click on the image below.

Lets define the function:

create_thumb( string $source_path, string $destination_path, int $thumb_width, int $thumb_height [, int $quality [, int $overwrite]] )

Parameters:

• $source_path: Path to source image (jpg, jpeg, png, gif).
• $destination_path: Thumbnail destination path. It has to have *.jpg extension, as all thumbnails will be generated in jpg.
• $thumb_width: Final thumbnail width.
• $thumb_height: Final thumbnail height.
• $quality: JPG compression quality (bigger: better quality,larger file). Range 0-100 (optimal 85).
• $overwrite: Set as true if you wan this function to overwrite thumbnail if it already exists.

Lets start with code. I’m lazy to comment every line, so I’ll just paste the whole function with comments in code :) Also, I was asked about cut size and coordinates calculation, but I don’t know what is there to explain. If you suck in math, than just copy paste it and live your miserable life :)

function create_thumb( $source_path, $destination_path, $thumb_width, $thumb_height, $quality=85, $overwrite=true ) {

    // If overwrite is set to FALSE and destination file allready exists, than return FALSE and quit execution
    if( file_exists( $destination_path ) && is_file( $destination_path ) && $overwrite == false ) return false;

    // Needed definitions
    $allowed_extensions = array( 'jpg', 'jpeg', 'png', 'gif' );

    $pathinfo = pathinfo( $source_path );

    // Check if source file exists, and is in array of allowed extensions.
    // Otherwise return FALSE
    if( file_exists( $source_path ) && in_array( strtolower( $pathinfo['extension'] ), $allowed_extensions ) )
    {

      // Get needed data about source image
      list( $original_width, $original_height, $type, $attr ) = getimagesize( $source_path );

      // Calculate cut size and coordinates
      $thumb_ratio = $thumb_width / $thumb_height;
      $original_ratio = $original_width / $original_height;

      if( $thumb_ratio > $original_ratio )
      {

          $cut_width  = $original_width;
          $cut_height = ( $original_width * $thumb_height ) / $thumb_width;

          $cut_x = 0;
          $cut_y = 0;

      }
      elseif( $thumb_ratio < $original_ratio )
      {

          $cut_width  = ( $original_height * $thumb_width ) / $thumb_height;
          $cut_height = $original_height;

          $cut_x = ( $original_width - $cut_width ) / 2;
          $cut_y = 0;

      }
      else
      {

          $cut_width  = $original_width;
          $cut_height = $original_height;

          $cut_x = 0;
          $cut_y = 0;

      }

      // Create final image layout
      $final_image = imagecreatetruecolor( $thumb_width, $thumb_height );

      // Is gif
      if( $pathinfo['extension'] == 'gif' )
      {
      	$source_image = imagecreatefromgif( $source_path );
      }
      // Is png
      elseif( $pathinfo['extension'] == 'png' )
      {
      	$source_image = imagecreatefrompng( $source_path );
      }
      // Is jpg, jpeg
      else
      {
      	$source_image = imagecreatefromjpeg( $source_path );
      }

      // Cut, resize source, and create final image
      imagecopyresampled( $final_image, $source_image, 0, 0, $cut_x, $cut_y, $thumb_width, $thumb_height, $cut_width, $cut_height );

      // Return TRUE if the thumbnail was created. Otherwise FALSE
      if ( imagejpeg( $final_image, $destination_path, $quality ) )
      {
        return true;
      }
      else
      {
        return false;
      }

    }
    else
    {
      return false;
    }

}

As you may notice, this function will always create a .jpg image. You can easily modify that to generate the same image type as source, but .jpg is simply the best choice for thumbnail, and it is not creating such mess on ftp as various image types. (If you are uploading animated gif, the first frame will be your thumbnail)

1.) Generate thumbnail by original image resolution ratio

This function will generate a thumbnail, which will fit into max thumbnail width and max height set by you, but also it will preserve the resolution image ratio of original, so it will be not deformed. Advantages and disadvantages of this method are exact opposite of previous one. Whole image is preserve in minified version, but on website, it could looks awful. Depends on how and where you are planning to use these thumbnails.
For better understanding, click on the image below.

Definition and parameters are exactly same, just function is called create_ratio_thumb. Differences are highlighted.

function create_ratio_thumb( $source_path, $destination_path, $thumb_width, $thumb_height, $quality=85, $overwrite=true ) {

    // If overwrite is set to FALSE and destination file allready exists, than return FALSE and quit execution
    if( file_exists( $destination_path ) && is_file( $destination_path ) && $overwrite == false ) return false;

    // Needed definitions
    $allowed_extensions = array( 'jpg', 'jpeg', 'png', 'gif' );

    $pathinfo = pathinfo( $source_path );

    // Check if source file exists, and is in array of allowed extensions.
    // Otherwise return FALSE
    if( file_exists( $source_path ) && in_array( strtolower( $pathinfo['extension'] ), $allowed_extensions ) )
    {

      // Get needed data about source image
      list( $original_width, $original_height, $type, $attr ) = getimagesize( $source_path );

      // Calculate final thumbnail resolution
      $thumb_ratio = $thumb_width / $thumb_height;
      $original_ratio = $original_width / $original_height;

      if( $thumb_ratio > $original_ratio )
      {

          $final_width  = round( ( $thumb_height * $original_width) / $original_height );
          $final_height = $thumb_height;

      }
      elseif( $thumb_ratio < $original_ratio )
      {

          $final_width  = $thumb_width;
          $final_height = round( ( $thumb_width * $original_height ) / $original_width );

      }
      else
      {

          $final_width  = $thumb_width;
          $final_height = $thumb_height;

      }

      // Create final image layout
  		$final_image = imagecreatetruecolor( $final_width, $final_height );

  		// Is gif
  		if( $pathinfo['extension'] == 'gif' )
  		{
  			$source_image = imagecreatefromgif( $source_path );
  		}
  		// Is png
  		elseif( $pathinfo['extension'] == 'png' )
  		{
  			$source_image = imagecreatefrompng( $source_path );
  		}
  		// Is jpg, jpeg
  		else
  		{
  			$source_image = imagecreatefromjpeg( $source_path );
  		}

  		// Resize source, and create the final image
  		imagecopyresampled( $final_image, $source_image, 0, 0, 0, 0, $final_width, $final_height, $original_width, $original_height );

      // Return TRUE if the thumbnail was created. Otherwise FALSE
      if ( imagejpeg( $final_image, $destination_path, $quality ) )
      {
        return true;
      }
      else
      {
        return false;
      }

    }
    else
    {
      return false;
    }

}

And that would be our tutorial on creating thumbnails :) Check out the demo, where you can try to generate thumbnail from your own image, or download the tutorial files. (and don’t forget to set chmod 0777 to destination folder)

Demo presentation

196x

Tutorial files

10.30KB 126x