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.

Advertisements

Drupal and Media – Great new book

One of the biggest challenges Drupal presents is dealing with media files. Because of the open nature of the product, there is usually a lot of time needed to make something as simple as an image gallery. I spent many hours designing one myself using different image handlers, a custom content type, views and HTML entities that present

Image

editing controls.

Packtpub.com has a great resource for those who are dealing with media files. I just picked it up but it looks like it is going to be a great resource for me. I specifically plan to use it for a video based help system for the website that I am currently working on. But check out the book at the link below.

http://www.packtpub.com/drupal-7-media/book?utm_source=blog&utm_medium=link&utm_campaign=bookmention

create many nodes from one upload

If you ever need to upload a bunch of images and you want to be able to deal with them as separate nodes, the bulk media bulk media upload mod is for you. all of the nodes below were created in one simple upload. the mods use tokens for replacement patterns for the titles so that you have a lot of simplicity in regards to the naming of the nodes. this is a great way to get a lot of work done quickly.

Bulk Media Upload 7.x-1.x-dev With Bulk Media Upload you can upload a bunch of media files and a new node will be created for every file.

Requires: Entity API (enabled), Plupload integration module (enabled), Token (enabled)
Help Pe

Image

CSS to move an Image by Node ID

I have a way that I want to be able to show users help. I have a nice ? icon for this purpose and I have

Image

added a title to the image itself which will display as a hover. I have added the image to a Panel Page via a Panel Pane by the Node ID assigned by Drupal, in this case 960. But I want it to overlay a different pane. So, I place the Pane with the image at the bottom and then I use a CSS rule that affects only the node 960. See the screen shots. I simply add the position of absolute and the proper margin spacing to get the image where I want it to be.

Since the CSS is based on a specific node, which is presented by Drupal as an ID, the CSS rule is formatted like this. Done and done.

#node-960 {

Image

position:absolute

margin:-69em 0 0 47em;

}

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

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