Hey guys,

I have modified the headerimage.module to make use of file attachments on a node if they are jpegs.

This allows me to create a header image, upload 5 images, and jquery's cycle.js will cycle through them giving a fading banner effect.

For example, sites like this:

http://www.visitsoutherndelaware.com
http://www.downtownrehoboth.com
http://www.geolyn.com
http://www.blue-waterfront.com

If you wait a few seconds on the homepage, the images at the top fade transition.

What I have done is modified the .module on line(s) 285 near ' // mimic node_view ' and added this simple set of code:

$query = "SELECT fid, nid, filename, filepath, filemime FROM {files} WHERE nid = $node->nid AND filemime = 'image/jpeg'";
				$result = db_query($query);
				
				$iPhoto = 0;
				
					
				if (mysql_num_rows($result) > 1) {
										
					while ($iPhoto < mysql_num_rows($result)) {
						
						$oneRow = db_fetch_array($result);
						
						if ( strlen($oneRow["filepath"]) ) {
							$output .= '<img src="/'.$oneRow["filepath"].'"  alt="'.$oneRow["filename"].'" />';
						}
						
						$iPhoto++;
					}
				
				} else {
					$oneRow = db_fetch_array($result);
						
					if ( strlen($oneRow["filepath"]) ) {
						$output .= '<img src="/'.$oneRow["filepath"].'"  alt="'.$oneRow["filename"].'" />';
					}
				}

This grabs all the file attachments of type jpeg related to the node that will be put into the header image block for the given met condition. Then, I use jquery cycle.js plugin to add the desired effect.

I would like to see that this becomes a standard part of Header Image options in a future release. It's really simple and gives clients/users a lot more mileage out of Header Image, where they can add multiple images into a banner for particular pages instead of just one (and weighting it).

CommentFileSizeAuthor
#13 headerimage_add_hook2008_08_06.patch647 bytesppblaauw
#11 headerimage_2008_Jul_26_1.patch838 bytesppblaauw
#11 ddblock.zip19.22 KBppblaauw
#8 jcycleblock.zip12.61 KBppblaauw

Comments

kevinquillen’s picture

kevinquillen commented

Sorry, here is the full snippet from line 285:


// mimic node_view
          $node = node_build_content($node, $teaser, false);
          $content = drupal_render($node->content);
          if ($teaser) {
              $node->teaser = $content;
              unset($node->body);
            }
            else {
			  
			  	$query = "SELECT fid, nid, filename, filepath, filemime FROM {files} WHERE nid = $node->nid AND filemime = 'image/jpeg'";
				$result = db_query($query);
				
				$iPhoto = 0;
				
					
				if (mysql_num_rows($result) > 1) {
										
					while ($iPhoto < mysql_num_rows($result)) {
						
						$oneRow = db_fetch_array($result);
						
						if ( strlen($oneRow["filepath"]) ) {
							$output .= '<img src="/'.$oneRow["filepath"].'"  alt="'.$oneRow["filename"].'" />';
						}
						
						$iPhoto++;
					}
				
				} else {
					$oneRow = db_fetch_array($result);
						
					if ( strlen($oneRow["filepath"]) ) {
						$output .= '<img src="/'.$oneRow["filepath"].'"  alt="'.$oneRow["filename"].'" />';
					}
				}
				
				
			  
              $node->body = $output;
              unset($node->teaser);
           }
ryo’s picture

ryo commented

Wow, this is really great modification!
I also hope this becomes a standard part of Header Image options in a future release.
By the way, how did you implement jquery cycle.js plugin?
Further instruction would be appreciated.
Thanks a lot.

sutharsan’s picture

sutharsan commented
Status: Active » Postponed (maintainer needs more info)

This same output can be achieved by overriding the output in headerimage-block.tpl.php instead of changing the module code. This is the preferred method.
If you can rewrite the code using headerimage-block.tpl.php and answer ryo's question, you can include this in the module documentation page.

kevinquillen’s picture

kevinquillen commented

Yes, but the goal for me to make it super simple for the end-client that are not technical at all was to only have to make a single node and put all the images into it that they want to cycle through.

This way, when the header image URL condition is met, the extra query will grab all the images it needs. Then the output adds all the images to it and is returned. I couldn't see any other way of doing this.

ryo, using cycle.js is pretty straight forward. Since I am only returning the images, in this instance I did this in my page.tpl.php where the banner/header images show up:

<div id='banner'><?php print $banner ?></div>

From that point, its just some CSS to get them to stack up, and a javascript call to make them fade transition through each one. A very basic example would be:

$(document).ready(function(){ $("div#banner").cycle('fade'); });

This would fire the cycle plugin on the banner div which is encapsulating our images.

The CSS is very simple, too:

#banner {  
    height: (container height)px;  
    width:   (container width)px;  
    padding: 0;  
    margin:  0;
    overflow: hidden;  (this prevents an exceptionally tall image from bleeding over the container)
} 
 
#banner img {  
    width:  (preferred width of image)px; 
    height: (preferred height of image)px;  
    top:  0; 
    left: 0; 
}

Of course this is a very basic implementation, I also wrote additional logic to account for no banners, a single banner, or pages that won't have banners. I also am including the newest jquery when not in the backend of Drupal (ie node/ user/ admin/ etc) so it remains stable. This is also additional code that goes in the header, and if you like I can share that too (the file is at my office though I can get it tomorrow). I found it quite useful to do that, since I use the 5.x core. All the modules I like are not up to speed with 6.x yet.

Also, see the Cycle website: http://www.malsup.com/jquery/cycle/begin.html

The purpose of this was so a client could create their own 'Banners' per page, without having to create multiple nodes and weights to get the same effect. This way, they can do it easily and quickly. Drupal can be daunting for the uninitiated and this definately makes training easier for me. The simpler the better.

ryo’s picture

ryo commented

gh0st25,
Thanks for the quick reply.
Unfortunately I'm a non-teck guy myself, so even your instruction above is difficult for me. But I have a friend who is a programmer and who is familier with Drupal, so I'll consult with him as to the implementation.

Thanks for your kindness anyway.

kevinquillen’s picture

kevinquillen commented

Once you do it for a few sites, you'll see the correlation. But, the result is the same as those links I posted in my original post, where the images fade in and out and can be controlled with header-image's URL Condition.

sutharsan’s picture

sutharsan commented
Status: Postponed (maintainer needs more info) » Closed (won't fix)

Which ever way you include the images in the node, as attachment, image field, image node, etc., the proper place to control the theming is the theming layer. Attachments, images, etc. are all available there as part of the node array and can be manipulated in any way.
If anyone comes with a snippet to include this functionality the proper way (in the theming) I will include this in the documentation. I do not support 'hacking' the module code and will therefore not include the above solution.

ppblaauw’s picture

ppblaauw commented
StatusFileSize
new jcycleblock.zip12.61 KB

Note: this is for drupal 6

We are learning how to make modules in drupal and wanted to make a simple block module using the block hook.
We found an unfinished module cycleblock with uses the jQuery plugin cycle to show content(images) as a slideshow in a block.

We changed the code of that module and here we share the result with you. (see attached file)

We also wanted to extend the module further with the following features:

Make it possible to add and configure more blocks.
Make more input possibilties like nodes in a taxonomy.
Let users choose what to see (teaser, body, title, links etc)
add better cycle plug in settings
etc.

After we thought about this new features we looked at the existing drupal modules and found your module: the Header image module, which has a lot of these functionalities. Only not the cycle (slide show) effects.

Although it is very easy (for a programmer) to add the cycle functionality to your module by adjusting the template of your module it would be nice to incorporate the cycleblock module with your module to make it also user friendly. We think this is a better option then to extend the cycleblock module further.

Your module would not only be usable for different static header images on different pages but also for changeable header images; blocks in sidebars, with changing content like a news ticker; changing advertisements etc. So not only images but also other content, with nice jQuery cycle plug-in effects.

We contacted the original author of the cycle block module and he has no objections to incorporate his module into your module.

What is your opinion about integrating the jcycleblock module in your header image module?

sutharsan’s picture

sutharsan commented
Status: Closed (won't fix) » Active

Your suggestion is interesting. I need to find some time to try the module out.
My first response is that cooperation is better than integration. As stand alone module jcycleblock could use various inputs to cycle (headerimage, views, etc.) while as a part of headerimage in can only be used with one.

ppblaauw’s picture

ppblaauw commented

Thanks for your suggestion of cooperating instead of integrating.
We will look into this option and let you know when we come up with a solution.

ppblaauw’s picture

ppblaauw commented
StatusFileSize
new ddblock.zip19.22 KB
new headerimage_2008_Jul_26_1.patch838 bytes

Sutharsan,

New name and version of the module and a website to see it working.

New name: Dynamic display block.
Web site: http://ddblock.myalbums.biz

To let the dynamic display block module work together with the header image module your module needs a small patch to view a header image block as a dynamic display block.

It would be nice if this patch is added to the header image module so users don't have to apply it when they want to use the header image module together with the dynamic display block.

Please let me know if you are going to patch the header image module or know another way to override the view option in a block.

sutharsan’s picture

sutharsan commented
Assigned: Unassigned » sutharsan
Status: Active » Needs work

Creating a hook instead would make block content available for modification by other modules too.
If I have time I will look into it.

ppblaauw’s picture

ppblaauw commented
StatusFileSize
new headerimage_add_hook2008_08_06.patch647 bytes

Thanks for your suggestion of making a hook in the headerimage module for other modules to use.

Here is a patch to add the hook.

We named the hook headerimage_show_block,
another name for the hook could be headerimage_view_block.

It's of course your decision to name the hook.

Hope this patch will help to make the hook available.

ppblaauw’s picture

ppblaauw commented

We use another method to collaborate with other modules, so this patch is not needed anymore.

Thanks anyway for your suggestions

sutharsan’s picture

sutharsan commented
Status: Needs work » Closed (won't fix)
HansBKK’s picture

HansBKK commented
Assigned: sutharsan » Unassigned
Category: feature » support
Status: Closed (won't fix) » Active

so now what is the proper way to implement this functionality?

ppblaauw’s picture

ppblaauw commented

Hi,

You can still use the dynamic display block (ddblock) module and the headerimage module together to make feading headerimages.

Have a look at the ddblock module at http://ddblock.myalbums.biz

Let me know if you have problems implementing it.

(ddblock module maintainer)

ppblaauw

HansBKK’s picture

HansBKK commented

Looks like an excellent module, lots of features I'd like to check out.

However I'm on D5, and policy won't allow use of dev version, need stable.

Any other ideas?

sutharsan’s picture

sutharsan commented
Category: support » feature
Status: Active » Closed (won't fix)

The original issue is out of the scope of Header Image: Won't fix
ppblaauw's hook request is not required any more: won't fix.