New book on WordPress Theme Development: WordPress Themes In Depth
images
Tag Archive

CSS Throwdown: Preload Images without JavaScript

Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how.. (only two steps!) Step 1 — Place this in your CSS file: div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } Step 2 — Place this at the bottom of your (X)HTML document: <div id=”preloaded-images”> <img src=”http://perishablepress.com/image-01.png” width=”1″ height=”1″ alt=”” /> <img src=”http://perishablepress.com/image-02.png” width=”1″ height=”1″ alt=”” /> <img src=”http://perishablepress.com/image-03.png” width=”1″ height=”1″ alt=”” /> </div> ..and that’s a wrap! All images are preloaded and ready for calling as you please. Completely valid, […] Read more »

Allow Google Reader Access to Hotlink-Protected Images

In our previous article, we explain the process of allowing Feedburner to access your hotlink-protected images. The article details the entire process, which covers the basics of hotlink protection and involves adding several lines of code to your htaccess file. In this article, we skip the detailed explanations and present only the main points. The discussion is very similar for both Feedburner and Google Reader, and may be extrapolated to serve virtually any purpose. If you are using htaccess to protect your images from hotlinking and have yet to check your feeds in Google Reader, you may be in for […] Read more »

Allow Feedburner Access to Hotlink-Protected Images

Recently, we installed and configured the excellent WordPress Feedburner plugin by the venerable Steve Smith 1. The plugin basically redirects our various WordPress-powered content feeds to Feedburner, which then delivers them to subscribers. This method enables us to take advantage of Feedburner’s excellent statistical tools. Further, all of the action happens silently, beneath the surface, and without the subscriber even realizing it. After a few weeks running the plugin with great success, we began hearing reports of broken and missing images messing up our feeds. After some investigating, we realized that our tried-and-true anti-hotlinking htaccess rules were doing their job […] Read more »

Digging the Ditch Witch

Ditch Witch, I think I love you.. On my never-ending quest for fresh graphical chunks, many a ridiculous warning sticker have caught my eye. Upon encountering such gems, I immediately slip into stealth mode and plan for attack. Once the stage is set and the time is prime, I move in for the kill — another ripe chunk cold plucked from the vine. Of course, only the nonsensical, pointless, redundant or otherwise ridiculous labels are snatched from existence — anything even legitimately informative requires a more compassionate approach.. Read more »

Flash-Detection Triple-Threat

In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro. Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows. This article explores the generalization of the previously defined method for providing alternate JavaScript content when Flash support is not detected. Using skyzyx.com’s excellent Flash-detection script, Flash Detect 3, we will outline a general approach for supporting the following browser configurations: Browser supports the required version of Flash Excellent. This is the ideal situation. Your Flash-based content will be […] Read more »

Alternate JavaScript Slideshow for SlideshowPro

For the unenlightened, SlideshowPro (SP) is a Flash-based slideshow-authoring system that delivers full-featured, high-end, Flash-based slideshows. Websites featuring SP slideshows present content in sophisticated fashion, inspiring users with elegant captions, beautiful transitions, and intuitive navigation. However, many visitors are unable to experience SP slideshows because they lack the requisite Flash support. SlideshowPro-based slideshows currently require Flash 7 or better to function. And, although Flash 7 is quite common, it is far from ubiquitous. In the "worst-case" scenario, Flash-challenged visitors will see a broken webpage or missing content. Unfortunately, the typical "best-case" scenario is not much better, as non-Flash users typically […] Read more »

Dazzle, Marvel and Wonder

One of our favorite command-line screensavers, DAZZLE is a two-dimensional kaleidoscopic program featuring a timeless display of perpetually evolving psychedelic viewscapes. Users may interactively manipulate over thirty image-creation algorithms, or set the program to automatically generate hours of dynamically morphing displays of colorful patterns and geometrically complex graphics. Read more »

Feed your Image via Atom or RSS

This quick tutorial explains how to add images to both Atom and RSS feeds. Although both formats allow for image-inclusion, feed-reader support for image-display is currently quite limited. Hopefully, that will change in the near future.. Images for Atom Feeds Images included within Atom feeds must have a ratio of either 1:1 or 2:1. There are no other restrictions as to file type or size. Use the < icon> XML element for URL’s targeting 1:1 images. Otherwise, use the < logo> XML element for URL’s targeting 2:1 images. Either element should be placed in the < feed> element: <feed> <icon>http://domain.tld/path/icon.ico</icon> […] Read more »

Chunks 101: Introduction to Chunkology

We are continually on the prowl for fresh chunks — whether it’s business or pleasure, day or night, scanning the immediate environment for tasty visual gems is a constant delight. Perhaps you find yourself lulling over tacky magazines at the dentist’s office, when suddenly — out of the corner of your eye — you notice it: a small triangular decal attached to the side of the waiting-room television warning people about something with an absolutely ridiculous icon to reinforce its message. Unlike the typical media fodder enslaving the likes of "People" and "Time", the TV warning chunk shows true character […] Read more »

Counterfeit Slifer Yu-Gi-Oh Card

Recently, my son traded three common Yu-Gi-Oh cards for the coveted Slifer god card. He was very excited, thinking he worked the deal of a lifetime. Indeed, Slifer cards sell for around $35.00 apiece, depending on the dealer. Nonetheless, trading three worthless cards for a Slifer god card seemed like a phenomenal deal.. What we discovered next nearly dropped us to the floor — the Slifer card was a counterfeit! Within moments of checking it out, Mom immediately recognized the unusual coloring, odd syntax, and heavy gloss on the card. Upon closer examination, many errors were discovered — spelling mistakes, […] Read more »

Preloading Images with CSS and JavaScript

Fast-loading pages reduce errors, conserve bandwidth, and please visitors. One way to decrease loading times and enhance performance involves maximizing image display efficiency. Your mantra for achieving image efficiency should be "reuse, optimize, and preload.". While each of these methods plays an important role, this article will focus on methods for preloading images. Consult your server error logs to identify web pages that may require image help. Note: preloading images does not reduce bandwidth! It only decreases apparent load time, thereby enhancing user experience. Preloading via the CSS Display Property This method is a very common method for preloading images […] Read more »

Folder Background Images in WinXP

This brief tutorial explains how to add a background image to any folder in Windows XP. First, make sure all hidden files are visible on your system. Then, open the folder for which you wish to add a background image. Within the folder, right-click and select Properties » Customize tab » Customize. There, choose any icon, click Apply and OK. That process should have created a "desktop.ini" file. Open that file with a text editor and add these lines of code: [ExtShellFolderViews] {BE098140-A513-11D0-A3A4-00C04FD706EC}={BE098140-A513-11D0-A3A4-00C04FD706EC} [{BE098140-A513-11D0-A3A4-00C04FD706EC}] IconArea_Image=C:\path\folder\background.jpg To customize this according to your needs, edit the path in the last line to […] Read more »

Press Color Archive

Our official location for dumping notable color swatches: | #1A1A1A | #383838 | #666677 | #E1E1E1 | #F0F0F0 | #F2F2F2 | #F3F3F3 | #FFFFEE | #CCDDAA Read more »

sIFR Notes Plus

Here are a few sIFR Notes for Perishable Press. Just what are we looking at here? Well, first it is important to understand the sIFR variables and the order in which they should appear: (sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode) The variable, sFlashVars consists of the following sub-variables (these should be seperated with an & sign: # Align Flash text block textalign=center # Moves text any number of pixels to the right offsetLeft=3 # Moves text any number of pixels down offsetTop=3 # Adds underline links when hovered underline=true Then, inducing from the […] Read more »

Lightbox Notes

To add Lightbox functionality to any single image: Add rel=”lightbox” to the anchor tag. Add a title=”” attribute to the anchor tag. Add an alt=”” attribute to the image tag. To add Lightbox functionality to any series of images: Add rel=”lightbox[value]” to the anchor tag of each image. Add a title=”” attribute to the anchor tag of each image. Add an alt=”” attribute to the image tag of each image. Any set of pictures with the same rel=”lightbox[value]” will display with nav buttons. Read more »

Electric Sheep and the ASCII Matrix

Electric Sheep Paying homage to Philip K. Dick’s novel Do Androids Dream of Electric Sheep? via collective screensaver morphology: electricsheep.org. Plus, be sure to experience this moving ASCII rendition of the “bullet-dodging” scene from The Matrix: ASCII Matrix Scene (I wish this idiot would quit changing the URL!). Read more »

Latest Tweets Sale on printed copies of .htaccess made easy (with free shipping): htaccessbook.com/printed-htacc…