|
|
Sometimes when running a content managed website, you need to make thumbnails for and/or just completely resize uploaded images. So that users don’t break the site layout, maximum dimension constraints must be used. This tutorial will explain why and show you how to use a PHP image thumbnailer to resize images.
Example: Here
PHP Source (as text file): Here
Doing this resizing in the HTML or CSS seems like a reasonable idea, but the resized images are still the full file size of the original, and so take way more time to download than necessary. For instance, let’s say there were 100 vacation pictures on a photo gallery you’ve created. Also let’s pretend that each picture is only 1 MB (this is very conservative). If the links to the pictures we links, most users wouldn’t mind the second or two download to view each picture. But if the links were “thumbnails” where you used the full image but resized it with HTML or CSS, then all 100 MB of images would have to load on the page all at once just to see the thumbnails. Of course, after the page had loaded, the full images would be cached and be ready for instant viewing, but most users would have navigated away by then. Plus, if the user was interested in only one picture, all 100 would still need to be downloaded on the thumbnails page, increasing your bandwidth usage immensely.
This is a pretty well-known problem and is easily solvable by just making thumbnails of the correct size for each picture. The problem is that with a content-managed website, the user would usually need to make their own thumbnails and upload it along with the full image.
Another problem that arises is that sometimes the user will just upload a raw image they got directly from their camera, which may be way too huge than would ever be viewed normally.
The solution is to create thumbnails and resize images server-side automatically. The example shows a 500×500 image being resized into different “boxes.” The reason why the use of maximum width and height and bounding boxes is because aspect ratio is preserved, and if the image is smaller than the bounds, it is not resized.
The way to use the thumbnailer is to pass it several variables in the query string. These variables are:
- src – The file to resize. This is relative to the currently running script.
- maxW – The maximum width the resized image will be.
- maxH – The maximum height the resized image will be.
- out optional – The path to the file to write to. If null or unspecified, will output to browser.
- quality optional – The quality of the JPEG output. Usage is the same as the quality variable Here, including the default value.
Another way to use the thumbnailer is to class within your own code. include_once the thumbnailer.php script and use the thumbnailer class. This will not execute the same path as above because the script checks whether it was the requested script or just an included script. If requested directly, the resizing is expected to happen based on the query string passed with it, just as in the example. However, if included in another PHP script, this will not happen and the below API is usable.
Below is the API for that class (should look similar to the parameters above):
- Constructor
- Usage:
new thumbnailer($src)
- Parameters
- $src – The file to resize. This is relative to the currently running script.
- Description: – This constructs a new thumbnailer object, ready to be resized.
- makeThumbnail
- Usage:
$thumbnailerObj->makeThumbnail($maxW, $maxH, $out, $quality)
- Parameters
- $maxW – The maximum width the resized image will be.
- $maxH – The maximum height the resized image will be.
- $out optional – The path to the file to write to. If null or unspecified, will output to browser.
- $quality optional – The quality of the JPEG output. Usage is the same as the quality variable Here, including the default value.
- Description: – This creates and either saves or outputs the new JPEG image.
Internet radio is becoming more and more popular, and one of the more popular ones is Grooveshark. These free websites are ad-supported, but sometimes you want to maximize your screen real estate and only see the radio player UI. This is a quick tutorial of how to hide the ads on the right side of the screen on Grooveshark.
Update 6/20/2010: Grooveshark seems to have made some updates and the original script does not work. I’ve updated my script to reflect their changes and it works again.
Below is what Grooveshark looks like by default. I’ve highlighted the area on the right dedicated to ads.
 Standard Grooveshark We are going to hide the ads by running a bit of Javascript to manipulate the page’s DOM. The script we are going to run is:
javascript:function a(){document.getElementById('sidebar').style.display = 'none'; document.getElementById('mainContentWrapper').style.marginRight = '0px';}; a();
Depending on your screen size, the above code may be on multiple lines, but for the script to work, it needs to be one single line of code. Basically what it does is hide the div which contains the ads and then sets the right margin of the div which contains the main content to zero, making it take up the entire width of the screen.
How can you run the above Javascript on the page you ask? All modern browsers allow you to run Javascript directly from the address bar. On the page you are wanting to run it on, just replace the URL with the Javascript you wish to run, and press enter.
 Running Javascript From the Address Bar So for this particular example, these are the steps to start up Grooveshark and hide the ads:
- Open your browser
- Navigate to http://listen.grooveshark.com/
- Copy the Javascript above (make sure it’s all one line! If it’s not, paste it into notepad and take any line breaks out)
- Paste the Javascript into the address bar (make sure to REPLACE the current URL)
- Press Enter. You’re done!
You can actually run this Javascript at any point, so if you’ve been listening to Grooveshark for a while and suddenly decide you don’t want the ads anymore, just run the Javascript on the page and presto, they’re gone! There is no need to close the browser/tab and reopen it fresh.
 Grooveshark without Ads This concludes the quick tutorial of how to hide the Grooveshark ads. This concept can be used on most websites, so if you are somewhat familiar with Javascript and the DOM, you can use this technique to manipulate any website you want.
This Javascript is a pretty popular one as a lot of websites have rotating slideshows, especially on the home page.
Example: Here
Javascript: Here
The reason for the script is because when looking for something similar, I could only find IMAGE slideshows, but sometimes you need more than that, hence the Generic Javascript Slideshow. This script takes all of an HTML element’s direct children and makes them into slideshow elements. These children can be images, divs, iframes, paragraphs, tables, or a combination of anything really.
Similar to the Javascript Scroller, a json object is passed to the startSlideshow function. The properties you may configure are:
- id required – The id of the HTML element to use. This element will be the container of the slideshow and all direct children will be the slideshow items.
- width required – The width of the HTML element specified by
id.
- height required – The height of the HTML element specified by
id.
- speed Default: 1000 – This is the time it should take to transition from one slideshow item to another, in milliseconds.
- delay Default: 0 – This is the amount of time to spend on each item between transitions.
- startDelay Default: 0 – This is the amount of time to delay before any transition starts. Note that this value is in addition to
delay for the first transition. For example, with delay at 1000 and startDelay at 2000, the first transition won’t happen until 3 seconds after the page is loaded.
- dualFade Default: false – When true, the item on the bottom will fade out. This significantly adds to the CPU usage. This is explained further below.
- framerate Default: 50 – The higher the value, the faster the animation interval is. Increasing this value will make for smoother but more CPU intensive animation and reducing the value should have the inverse effect. Note that changing this value has side effects for the speed of the scroll. The default value should suffice in most situations.
Now to further explain the dualFade option. By default, the slideshow item fading in is just fading in on top of the previous item while the previous item just is hidden immediate after the fade. This is for efficiency. However, when items are of different height or have some transparency, the previous item can still be seen and so the immediate disappearance is apparent. In the example, the slideshow on the left has the dualFade turned on while the one on the rigth has it turned off. This option makes the previous item also fade out while the new one is fading in. Only turn on this option when needed, as I’ve observed most browsers struggle when rendering two overlapping fading items (even Chrome!). In most cases there shouldn’t be a problem, but especially on older computers, the processor usage when using dualFade is substantial, so again, use only when needed.
Do note that the script should be called after the page has been rendered, or at least after the container is “declared”. Because of this, the container may need some CSS is make it “pretty” while the page is still loading such as the dimensions and overflow: hidden, depending on the other styles in the document.
Also note that that example uses a lot of CSS and ids/classes on the elements which are unrelated to the script, but is used to visually show the slideshow in action. The comments in the example HTML file explain what is necessary to the scripts and what isn’t.
One last tidbit (in case you are using a drop down menu or some other elements on the page with zindex) is that the element fading in has a zindex of 200 while the previous element has a zindex of 100.
|
|
