Emanuele Tessore

Slideshow in WordPress

If you’re planning to build a showcase website with WordPress you’d probably insert at least in the home page some images with a sliding effect.
By using jQuery make them slide is pretty easy, but I had some trouble to choose a way to manage the images in the cms.
My goal was to use the fewest number of plugins possible, because i want something usable on most of website I have to develop.

WordPress put at our disposal a gallery tool which is reachable by clicking on the “Add Media” button on top of the body article.

By using this we have a big pro: WordPress takes care of re-sizing and cropping the images.
The con is that by default this system will show only a list of thumbnails linking to the fullsized image.

Continue reading →

Google Maps balloon position error

If you’re working on a website which needs a map wrapped in a really low element, you’ll probably have some issue with the Google Maps balloon position over a pinpoint.
It will be cut by the top border: if you open it by clicking on the pinpoint the map scrolls down, but if you let the popup open on page loaded it will be cut out by the map limit.

This is because the library doesn’t know how high the pinpoint image will be when the event containing ‘infowindow.open()’ is fired.

Here’s a reference screenshot of the Google Maps popup positioning error I’m talking about:

Google Maps balloon position error

The solution is pretty easy: you can workaround this issue by opening the balloon when the gmaps library fires the ‘tilesloaded‘ event.
At this time the pinpoint image is fully loaded and the library can make the map scroll as far as needed to the balloon to be showed.
Continue reading →

Slideshow: one big image for all

Most of website I’ve set up weight is given by the images of the slideshow.

Here’s a simple PHP function that can be usefull to reduce both weight and number of connection for this element.

The concept behind this function is pretty simple:

  1. take an array of images (jpg/png/gif)
  2. merge them in a unique big jpeg image
  3. return the url to this one.
  4. using css sprite tecnique, set this big image as the background of every <div> of the slideshow with a different background-position.

Continue reading →