image snippets

A simple image replacement technique for increased usability and SEO ranking

Tagged css, image, replacement, usability, seo  Languages css

This is currently my favorite image replacement technique. I don't remember where I found it... Using it can improve both your site's usability and your search engine ranking, by allowing both screen readers and search engines to find your h1 headlines. First create the h1 and the description of your page/site, for example:

<h1 id="logo">Viagra, Botox, you name it</h1>

Then create the CSS rule for the page title:

h1#logo {
  text-indent: -9000px;
  background: url(logo.gif);
  width: 200px; /* Width of image */
  height: 50px; /* Height of image */
}

People using a modern browser that support CSS will see your logo (the image), and search engines and people using less modern browsers will see the content of the h1 header tag.

Note that if you replace the text of a link then use the outline CSS property to remove the dotted border:

.text-replacement {
    text-indent: -9000px;
}

.text-replacement a {
    outline: none;
}

A Ruby script that deletes images that are not used anywhere

Tagged ruby, script, image  Languages ruby
Dir.glob("**/*.{jpg,gif,jpeg,png}").sort.each do |image|

  name   = File.basename(image)
  in_use = false
  
  Dir.glob("**/*.{erb,css,js,html,htm}").each do |file|
    contents = File.read(file)

    in_use = contents.include?(name)
    
    break if in_use
  end

  if !in_use
    puts "Deleting '#{image}'"
    File.delete(image)
  end
end

Resizing a Xen disk image partition

Tagged xen, disk, image, resize  Languages bash
# Stop & backup
xm shutdown sandbox
cp -a sandbox/ sandbox.bk

# Verify MD5 sum
md5sum sandbox/disk.img 
4976347006df34843d29c939b5fc3742  sandbox/disk.img
md5sum sandbox.bk/disk.img 
4976347006df34843d29c939b5fc3742  sandbox.bk/disk.img

# Create a 5Gb temp file
dd if=/dev/zero of=Tempfile bs=1024 count=5000000

# Append it to the existing image
cat Tempfile >> disk.img
rm Tempfile

# Resize the partition
resize2fs -f disk.img

# Check partition & start domU
fsck.ext3 disk.img
xm create -c sandbox.cfg

Rack middleware for generating thumbnails on-the-fly

Tagged image, thumbnail, rack  Languages ruby
# Rack middleware for creating image thumbnails on the fly when needed. 
# Depends on ImageMagick and https://github.com/christianhellsten/thumbnail for thumbnail creation. 
#
# Use case 1: Allow any image under /images to be resized to any size
#
#   # e.g. /images/me-1280x1024.png
#   use Rack::Thumbnail, :uri => '/images'
#
# Use case 2: Allow any image under /images to be resized to 50x50 or 150x150
#
#   # e.g. /images/me-150x150.png
#   use Rack::Thumbnail, :uri => '/images', :dimensions => ['50x50', '150x150']
#
# Use case 3: Allow any image under /images to be resized to 50x50 or 150x150. Allow padding or cutting of thumbnails to fit given dimensions.
#
#   # e.g. /images/me-50x50-cut.png
#   use Rack::Thumbnail, :uri => '/images', :dimensions => ['50x50', '150x150'], :methods => { :pad => :pad_to_fit, :cut => :cut_to_fit }
#
require 'thumbnail'
class Rack::Thumbnail
  def initialize(app, options = {})
    @app = app
    @uri = options.fetch(:uri, '/images')
    @public_dir = options.fetch(:public_dir, 'public')
    @uri_regex = options.fetch(:uri_regex, /-(\d+)x(\d+)-?(\w+)?/) # Extracts width, height, method
    @allowed_methods = options.fetch(:methods, {})
    @allowed_dimensions = options[:dimensions]
  end

  def allowed_dimension?(width, height)
    @allowed_dimensions ? @allowed_dimensions.include?([width, 'x', height].join) : true
  end

  def call(env)
    path = env["PATH_INFO"]
    destination = File.join('public', path)
    if path.match(@uri) && !File.exist?(destination)
      _, width, height, method = path.match(@uri_regex).to_a
      if allowed_dimension?(width, height)
        source = File.join(@public_dir, path.gsub(@uri_regex, ''))
        Thumbnail.create(
          :in => source,
          :out => destination,
          :method => @allowed_methods.fetch((method || '').to_sym, :pad_to_fit),
          :width => width.to_i,
          :height => height.to_i
        )
      end
    end
    status, headers, response = @app.call(env)
    [status, headers, response]
  end
end

In Sinatra, generate thumbnail URLs with this helper:

helpers do
  # Generates thumbnail URLs.
  #
  # Example: 
  #  
  #  img uri=thumbnail('/images/me.png', :width => 50, :height => 50)
  #
  # uri - URI of source image.
  # options - hash containing width and height of thumbnail.
  #
  def thumbnail(uri, options = {})
    width = options.fetch(:width, 50)
    height = options.fetch(:height, 50)
    method = options[:method]
    ext = File.extname(uri)
    base = File.basename(uri, ext)
    base_uri = File.dirname(uri)
    unless method
      "#{dir}/#{base}-#{width}x#{height}#{ext}"
    else
      "#{dir}/#{base}-#{width}x#{height}-#{method}#{ext}"
    end
  end
end