• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

[8wayRun.Com] Ultimate Random Header

Status
Not open for further replies.

Jaxel

Well-known member
#1
Remember, I am unemployed programmer and this mod is free! If you appreciate the work here, please donate.

You guys would not believe how many messages and emails I get from people asking how I do the random header background I have on 8WayRun.Com. Well as it turns out, this is actually I script I wrote several years ago, and have been reusing since vBulletin3, vBulletin4 and now XenForo.

Features:
  • Will search for matching nodes/wikis/portal when displaying images
  • Will search for matching user preferences when displaying images
  • Full support for the following image types: JPG, GIF and PNG
Demo:
Installation:
  • upload the entire contents of the attached zip to your XenForo root
Usage Notes:
  • Anywhere you want to use this, instead of a link to an image, link to the following:
/styles/header/header.php?node={$quickNavSelected}&user={$visitor.customFields.header}
  • You CAN NOT use this system in the built in XenForo CSS system. XenForo aggressively caches it's CSS files, so the whole semblance of "dynamic" or "random" is just not possible. If you want to use this, such as I have on 8WayRun.Com, you must put the property directly into the element in your templates.
  • This system has a hierarchy of how it finds images to place. NODE > USER > RANDOM

    The first thing it will check is for "node". It will take the value in this field and try to find an image matching the value from the folder /styles/header/nodes/; it will first check for a PNG, then a JPG, and finally a GIF. Nodes currently can be "node-#", "wiki-#" or "portal".

    If it can't find a valid node image, it will then search for "user". The user operation pulls the images from the /styles/header/users/ folder. In order to use this feature, XenForo 1.1 is required. You must create a new custom user field ID called "header" and add preferences options with the value being the name of your image (not including the extension).

    If after all that, it still can't find a valid image, either from nodes or user customized, it will instead search the /styles/header/random/ and find an image at random to display.
Donations:
Download:
 

Attachments

kingston

Well-known member
#3
so friggin good. you rock!

I do have a small suggestion, not sure how hard it is could you say to cache all images for a set period of time? maybe cache for 15 or 30 seconds?
 

masterchief

Well-known member
#6
It works for me... :D

I went to Style Properties->Header and Navigation->Background->Image
and inserted the following: /styles/header/header.php?node={$quickNavSelected}&user=

I uploaded my first image to folowing location: /styles/header/random/
I choose to display images rather than full banners, so here is my first simple image for display:

screengrab.png
 

Jaxel

Well-known member
#9
so friggin good. you rock!

I do have a small suggestion, not sure how hard it is could you say to cache all images for a set period of time? maybe cache for 15 or 30 seconds?
Code:
## Expires
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 seconds"
	ExpiresByType text/html "access plus 1 seconds"
	ExpiresByType image/gif "access plus 3456000 seconds"
	ExpiresByType image/jpeg "access plus 3456000 seconds"
	ExpiresByType image/png "access plus 3456000 seconds"
	ExpiresByType text/css "access plus 3456000 seconds"
	ExpiresByType text/javascript "access plus 3456000 seconds"
	ExpiresByType application/javascript "access plus 3456000 seconds"
	ExpiresByType application/x-javascript "access plus 3456000 seconds"
</IfModule>
This in your htaccess will cache your content... PERMANENTLY, until the user refreshes.
 

Jaxel

Well-known member
#11
It works for me... :D

I went to Style Properties->Header and Navigation->Background->Image
and inserted the following: /styles/header/header.php?node={$quickNavSelected}&user=

I uploaded my first image to folowing location: /styles/header/random/
I choose to display images rather than full banners, so here is my first simple image for display:

View attachment 9845
Thats all and good... but as I said in the usage notes, the "?node={$quickNavSelected}&user=" section of this mod will not function within the XenForo CSS System... you should remove the query if you don't plan on using those features.
 

masterchief

Well-known member
#14
Jaxel, do you have examples for placing this mod directly into a template. thanx
This works great for my live site, but does not function on my localhost site using Wamp.
regards
 

Jaxel

Well-known member
#15
Jaxel, do you have examples for placing this mod directly into a template. thanx
This works great for my live site, but does not function on my localhost site using Wamp.
regards
In "header" template (for header logo background)
Code:
<div id="header" style="background: url('/styles/header/header.php?node={$quickNavSelected}&user=');">
In "logo_block" template (for forum logo)
Code:
<img src="/styles/header/header.php?node={$quickNavSelected}&user=" alt="{$xenOptions.boardTitle}" />
 

Jaxel

Well-known member
#20
Jaxel, can you elaborate upon how to use nodes and users to fullest potential.
You cant use "users" right now... its there for future use...

To use nodes, place images in your /styles/header/nodes/ folder. Then when you go to a node, it will look for an image that matches that node type and id... If it finds a matching image, it will display the image; otherwise it will display a random image from the /random/ folder. So for instance...

node-25.png (will match forum, category, or page with the node id of 25)
node-67.png (will match forum, category or page with the node id of 67)
wiki-12.png (will match a XenCarta wiki page with the node id of 12)
portal.png (will match your XenPorta portal page)

(you can use PNG, JPG or GIF)

These are the BUILT in features for node IDs... you can of course add extra node tags by editing your templates. For instance, if you wanted to add a node tag for your forum root (forum_list) template. Just open up forum_list template and add the following line of code anywhere near the top:
Code:
<xen:container var="$quickNavSelected">forum</xen:container>
Then that page is defined as the nodeID of "forum", so it would match an image such as "forum.png"
 
Status
Not open for further replies.