JPGs Can’t Handle Transparency, So Save As PNG Instead

The title of this post says everything.

JPGs Can’t Handle Transparency, So Use A PNG Instead

Earlier today I got lost in the details while using The GIMP to create a couple icons for a new WordPress theme. I kept seeing this colored background for an icon that I knew just wasn’t there. I could see that the image had only one layer and no background layer in the layers dialog of The GIMP, but every time I saved the image and viewed the result in my browser I saw the colored background.

This drove me mad until I spotted the obvious mistake. I had been saving the file that I wanted to have a transparent background as a jpg file. Since jpg files can’t handle transparency The GIMP tries to accommodate by exporting the file as a .jpg. Unfortunately, the current background color is used to fill in the transparent parts of the image, so you end up with a non-transparent image.

To make a transparent image or an image with a transparent background, save the file as a png file. PNG files can handle transparency, so once I saved my image as a .png the colored background went away.

One caveat here is that image files with the extension .png are not recognized by older browsers so the colored background will show through and the image won’t be transparent.

Comment, comment, comment…but which comment code goes where?

Commented code is worth its weight in gold when it comes time to decipher it. Unfortunately, the codes for commenting in xhtml, css and php are not all the same. So, for reference sake here are the comment codes you’ll need and where to use them.

Where xxx is your comment, for

  • xhtml (html) and php (outside php code) use <!-- xxx -->
  • css use /* xxx */
  • php (inside php code or between <?php and ?>) use // xxx
  • multi-line comments inside php use /* xxx */

Comments are very helpful in troubleshooting style changes. When creating your designs take a few seconds to jot down a comment here and there.

Great uses of comments include labeling the starting and ending location of id- or class-identified divs, putting temporary holds on features that may or may not be needed in the final design — often called commenting out code, sectioning long stylesheets into more easily readable forms, and specifying the author or location of the code.

Tips For Search.php and Its Searchform Script in WordPress

The more you twiddle with WordPress the more you will learn about it. Makes sense, yes? Read on for a couple tips on coding and styling the WP search function.

Check out these search function tricks for your WP blog:

  • Use the right path in the call to the searchform.php. While you want to search all the important text on your blog, you don’t want your visitors to search your entire server. Some pages may have <?php echo $_SERVER ['PHP_SELF']; ?> as the value for the action attribute of the search form and that could enable a search of the entire server. Restrict the search to the content of your blog by using <?php bloginfo ('home'); ?> instead.
  • Modify search.php to allow for personalization or styling of the search output. Wrap a div around the output to be able to stylize the content with a new id or class. For instance, the following code assigns the value of the variable $s to the value of the search term with any special characters stripped from it. The code also specifies the leading text that appears when search results are returned to the screen. Try searching for a term in this blog to see the output.

<?php $s = wp_specialchars($s, 1); ?>
<div id="search-phrase">

<?php _e('We found the following posts that matched your search criteria: ' . "$s"); ?>

  • Target the search results in style.css with the new id or class. Applying an id to the wrapping div lets you target the leading text of the search results in your style.css stylesheet. In the example above the stylesheet could be used to style div#search-phrase to draw the reader’s attention.
  • Use wp_specialchars() when calling for variables returned by searchform.php. Echoing <?php echo $s; ?> is a bad practice because it may allow malicious code injection. When returning values from any database make sure to use wp_specialchars() to first strip any “special characters” before outputting to the screen.

Keep reading and learning!

Read, Write and Execute Permission Settings for Apache Servers

In the Unix and Apache world three settings will allow or disallow scripts from working. The right permissions must be set on any script or file that needs server help to be read, written to or executed. The files to which scripts may be writing need correct permissions to allow the script access.

Files may be readable, writable and/or executable. The permission settings are always referred to in this order, read-write-execute, or r-w-x.

Each of the three permission’s settings can be applied to three sets of users, namely owner, group and world. So, if you see a directory listing of a cgi script, for example, you will see three sets of permissions that represent the capabilities of each type of visitor — owner, group and world, in that order — with respect to that file.

For example, say that my file, test.cgi, has the following line in a directory listing:

- rwxr-xr-x 1 jen users 2134 Sep 12 9:42 test.cgi

The first set of rwx refers to the owner permissions, the second set of r-x refers to the group permissions, and the third r-x refers to the world permissions. We say that the permissions for the file test.cgi has permissions of 755.

How did we get to 755 from rwxr-xr-x ? Each permission has a number associated with it like so, r = 4, w = 2, and x = 1. In this example the owner has read-write-execute permission, and 4 + 2 + 1 = 7. The group and world settings do not include write permissions so both of those permissions add up to 5, for a file permission’s setting of 755.

Changing the permissions of a file is easy with your FTP client. Right-click on a file name and select change permissions or CHMOD, which stands for “change mode” or change file permissions. Then it is a simple matter of selecting your desired read-execute, r-x, or 755.