Preload Images for better CSS performance

I use a lot of CSS enhancements for things like hover: images, where the image changes slightly as your mouse moves over it. Great little trick to help focus the user’s attention on specific elements on the page. But if you don’t preload the images, you will have a slight (or not so slight) pause when you hover the first time – a sort of flicker. Preloading isn’t hard but in the Drupal world there are a couple of extra things that I did.

I have a custom content type called HTML text. Any sort of HTML can be added in this type as a specific node and placed where ever I want. In my case placement is done by using Panels. So what I did was to create one node that references all the images that I want to preload.

<span>

<img src=”/sites/images/icons/F-chat-lg.png” alt=”DOCResource.org Chat”>
<img src=”/sites/images/icons/F-forums-lg.png” alt=”DOCResource.org forums”>
<img src=”/sites/images/icons/F-research-lg.png” alt=”DOCResource.org research”>
<img src=”/sites/images/icons/F-services-lg.png” alt=”DOCResource.org Serives”>
<img src=”/sites/images/icons/F-top-lg.png” alt=”DOCResource.org”>
<img src=”/sites/images/icons/F-Courts-lg.png” alt=”DOCResource.org Research Courts”>
<img src=”/sites/images/buttons/more-btn-blk.png” alt=”DOCResource.org More”>
<img src=”/sites/images/buttons/more-btn-ylw.png” alt=”DOCResource.org Research”>
<img src=”/sites/images/buttons/more-btn-ylw.png” alt=”DOCResource.org Research”>
<img src=”/sites/default/files/u1/GreenFlg.png” alt=”DOCResource.org Research”>
<img src=”/sites/default/files/u1/GreenFlg-Blk.png” alt=”DOCResource.org Research”>
</span>

easy as pie. i added the class ‘preload-images-class” so I can manipulate the node using CSS. I added this class from within the panel with the node.

Then, I added the node to the front page of my site and set the class in my CSS to have a couple of different styles.

.panel-pane.pane-node.preload-images-class.no-title.block {
margin-bottom: -35em;
visibility:hidden;

the visibility is the key. The images are loaded but don’t show up. But they still impact the spacing of the DIVs so I also added the margin-bottom element to account for and remove the extra space.

I also added a few other images at the same time. I have a couple of buttons that change on a hover event and they are small and don’t affect the loading of the page.

A small detail for the overall look of the site but one that gives a nice spit and polish to the UX.

Remove Title from a node – Good for image displays

I often don’t need a title for a node displaying an image. the image is the title. the text title just gets in the way. Use the Exclude Node Title module to clean this up. But be careful with the permissions – see the issue that I have copied from the drupal.org web site that I opened.

I have a Views Slideshow that shows the images titles at the top of the SH for authenticated users but not admins. I don’t believe that it is the view itself. I have tried several different methods for troubleshooting (deleted view, readded, added the image field, made sure that the title field isn’t listed anywhere in the view) All to no avail.

I have a couple of screen shots. This is bizarre. I have been troubleshooting this for hours with no success. the attached ss show the main page of the site, where the slideshow is displayed via a panel page. even the preview for the view doesn’t show the title field. of course, that is as an admin too.

https://drupal.org/node/2010204 – link to the issue with permissions on hiding the title on a node.

Gallery Formatter Module

I have been struggling for days to get an image gallery solution that will work for me and I think that I am just about there. Gallery Formatter is the latest piece of the puzzle. This post is a WIP, so here are a few bare bones details:

http://drupal.org/project/galleryformatter – module

http://drupal.org/node/1086962 – documentation

http://drupal.org/node/1271064 – readme

Overview for my approach

  • Custom Content Type for images – one for members of my site one for admins
  • Gallery Formatter – for the format at the Content Type level
  • ME Alias module for replacement patterns, like Token, uses Token, I believe
  • Views/Panels (of course)
  • Multiupload – module
  • Colorbox – module
  • Field Formatter Class mod – Module – Helps define CSS classes at the content level

That’s it for now. I hope to put this to bed today if I can.

Image Galleries in Drupal using Views

I have been back and forth with different options on how to approach building an image gallery in Drupal. And I am getting closer to really seeing what will work well and what won’t.

I use Views. For many things. Views and Panels are the backbone of my site. So I really want to use Views for my Galleries. I found this great tutorial from James Tombs on how to create galleries that will be displayed via colorbox from a custom content type AND, how to use Views to build some really cool flexibility into the galleries. Basically, his tutorial will show you how to create three (or more) galleries, then have the first image in each gallery serve as a link to the rest of the gallery from a View. So the View will give you a nice way to show a top level grouping of galleries based on content type and an image specific to that gallery.

Check this out. Follow it step by step. I learned some cool tricks about Views that I never would have figured out on my own.

http://jamestombs.co.uk/2011-05-26/create-album-based-image-gallery-drupal-7-using-fields-and-views

Colorbox and Galleries

I hate to have to go back to this. I really do. But I have tried all sorts of different ways to approach images galleries and I believe that Colorbox is the best way to go. And I have tried other ways. Lord, have I! All the modules have good points and bad points and all of them are well put together but I believe that this is the best.

I found this three part series on Colorbox on Vimeo from FRJO, (Drupal Handle) the guy who wrote Colorbox. This is a good series and he does a fine job explaining the rather cryptic subject of creating image galleries in Drupal. Check it out at:

http://vimeo.com/19122850

Also, make sure to check out part II of the series, which explains how to integrate the Insert module with Colorbox…

http://vimeo.com/19386122

Upload multiple files to multiple entities (nodes, tax. etc)

This is something that I am surprised that more people don’t seem to use.

I have modules like IMCE and Plupload to help me upload multiple files simultaneously. There is always a need for that. But I have had some trouble getting the multiple file aspect of the upload to work so I also downloaded the Multiupload Module. This is a really simple module that enables a widget in the image file or image field type of a content type. clear as mud, huh? 😉 look at the ss to see what I mean. This is the content type called Bulk Media Files that I created for this operation. And the widget that I am using is the Multiupload widget. This will allow me to upload multiple files to that content type at the same time. But, what I wind up with is one node with a bunch of images in it. I  need a way to upload multiple images to individual nodes at one time. And I found a great module called Bulk Media Upload.

Image

 

 

 

 

 

 

 

 

 

All you have to do after you install the mod is to configure where you want the files to go. You have some good options too.  You can set it to Node, Tax. Term, OG group and more. Then you can choose where to put it within that Entity. A finally, you can choose the field to place the file in. It must be an image or file field or you will get an error. So here, I have the Node, then the Bulk Media Files (a custom content type that i created for this. And then Image, which is a field in the content type that I added.

bulk media config

 

 

 

 

 

 

 

 

 

 

 

 

Go to Content, Bulk Media Upload and you will get this screen. This is the main area, where you can choose replacement patterns for the about-to-be-created nodes. Choose your files, upload and….

 

 

 

 

 

 

 

 

 

Image

You will see a summary of all the newly created nodes, each based off of an individual file. Quite helpful for me. The replacement patterns will be helpful in giving you flexibility in Views when presenting your images.

 

Image

GIMP and Images

I don’t like graphic design. Mainly because I am not good at it and it is hard. But there are a few things that you probably need to be able to do in GIMP. Don’t get me wrong; it (GIMP)  is a great program. Complicated though. Like Drupal

Being able to take an image with a white background and isolate it so that it

Image

sits on your background unobtrusively is a great thing to be able to do. Here are a few hints how to do this in GIMP to go from this on the right to the image below. And because I have integrated images using the linking feature (look it up in the earlier post, it is under LinkImage module) it is also a link to the sponsor’s site. Very nice.

Image

This is not a step by step for GIMP; these are the highlights.

  •  In Gimp create a background layer that is transparent.
  • add the JPG or whatever it is as a layer above that.
  • Use the Magic wand to isolate all the white part of the top layer, the white being what you don’t want to see in the final image.
  • as you delete it, you will see the transparency layer show through as the checkerboard. it will begin to look like the image at the bottom
  • when you have removed all the extraneous white, export the image to a png. it will now show as a float over the background that you have and will appear as seen on the left. this is a great thing to be able to do to process images. and the wand tool will work with other colors if you play with it a bit.

33