images

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>

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.

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

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

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

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 {

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.

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.

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….

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.

CSS – Gradients and Images together

I really wanted to get the effect that you often see on nice looking sites like CNN where you have a gradient with a button in the corner of said gradient. Like the More buttons that you see.

This is a great tutorial on gradients.

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_gradients

Here is the actual syntax that I used to make this work:

.pane-plain-box-bs1 h2 {
background: url(‘/sites/images/more-btn1.png’) no-repeat top right, linear-gradient(to bottom,rgba(161,161,161,0) 0,rgba(82,81,80,1) 100%);}

Note that I am doing this in the subthemed CSS file from Panels. One important thing to note is that you have to have the image listed BEFORE the gradient in the line. Otherwise the gradient will cover it up.

CSS and Custom Content Types

I have a Custom Content Type for Images. I uploaded my logo to the site using this CCT and I also uploaded three images that I am using for my image slideshow that I posted about earlier today. Tonight I went to style the slideshow using some CSS to make a border. And lo and behold, when I make the test CSS changes in Chrome’s analyzer (I use it and Firebug) it changes the other image as well. No surprise really. I believe the easiest thing to do is to maybe create a new content type for things that will serve different purposes. I may be wrong, but I’m gonna try that out.

Views Slideshow and Ticker Modules

These are two really cool modules. The slide show will allow you to carousel between several different items. Pictures, text, a combination. Lots of cool options. I have a slideshow of four pics that are relevant to my audience. I can see some options for adding some text to the show for instructional purposes. Very cool.

The ticker module will allow you to have a scrolling marquee of sorts. I have implemented it on a View of agreggator items. This allows me to have a scrolling marquee of the latest news stories. and I don’t have to do anything to get them to update because they are a part of the same View that I use for the TN24.

There are a couple of things that I had to do to get it styled right. When I first set it up, the headlines were spaced way too broadly. They had a lot of empty space between them. So, I tried looking at the code of the library for the mod first. I didn’t find anything. So I started poking around with the View itself. And the way I made it format properly, without touching the CSS, was to “trim” the post to a max number of characters. I chose 65 because that gave me the result I wanted without adding ellipses to too many of the stories. great module though.