RevIgniter - Loading Images

Thu Mar 24 16:14:20 EDT 2011

  Robert I changed the thread title since we are on now from kudos to 
implementation

On 3/23/11 11:19 PM, Robert Mann wrote:
> I too found revIGniter a fantastic working work! and pointed that out several
> time.
>
> My first site using that though has to be reworked from a speed point of
> view because I chose to view pictures with a javascript gallery module that
> loads every files at start up... and that also made the cache function of
> revIgniter out in the limbs, (does not work in that case). So I'll drop
> that.
>
> www.le-saint-claire.com

Robert, here is my simple function to drive a random selection from a 
folder of images, the image is loaded once on page load and does not 
change until next page load. this may not be what you want...

I so very rarely  share anything because I don't trust that anything I 
do is professional enough to share...but in case it helps:

I use the assets helper and cache busting and have far future headers 
set to 1 year on your server. regular viewers will gradually cache the 
images and there will be zero download.. (unless they empty their cache 
of course)

Also because the rigImageAsset delivers a fully qualified "img src=*" 
string we have to strip it back to a plain URL for use inside a CSS 
background.

As always (I keep forgetting) all functions called have to be on top.

Once I figure out how to do it, I'll probably make my own
rigImageAssetURL  helper and load these in base config and get them out 
of my controllers.

function getImageURLString pTaggedImage
    set the itemdel to quote
    return item 2 of pTaggedImage
end getImageURLString

function rotateMastheadBackground
    set the defaultFolder to 
"/home/devhap/public_html/assets/img/masthead/rotation/"
    put the files into tBackgrounds
    put line (random (the number of lines of tBackgrounds)) of 
tBackgrounds into tBackground
    put ("masthead/rotation/" & tBackground) into tBackGroundPath
    put (rigImageAsset(tBackGroundPath,,,TRUE))  into pTaggedImage
    return getImageURLString (pTaggedImage)
end rotateMastheadBackground

Then in the controller call the image into the variable

command index

  # like this:
  put rotateMastheadBackground() into gData["mastheadBackground"]

      put rigImageAsset("masthead/KHM-logo.png",,,TRUE) into 
gData["khmLogo"]
     put rigCssAsset("books.css",,,TRUE) into gData["booksCSS"]

# SET PAGE TITLE
     put "Books by Himalayan Academy" into gData["pageTitle"]

     # LOAD THE VIEW FILE
     get rigLoadView("sitewide/head")
     get rigLoadView("books/books-masthead")
     get rigLoadView("sitewide/main-nav")
     get rigLoadView("books/books-main-content")
     get rigLoadView("books/books-bottom-content")
             #get rigLoadView("sitewide/bottom-nav")
     get rigLoadView("sitewide/footer")
end index

the only caveat of this is that rigImageAsset can only poke variables in 
views, but not in CSS files. So you have to do a little hokey bit by 
putting this in the top of your view:

[[gData["booksCSS"] ]]

<style type="text/css" title="masthead" media="screen">
#masthead{
      height:100px;
     background-image: url('[[gData["mastheadBackground"] ]]');
     background-repeat: no-repeat;
     }
</style>

</head>
<body>
<div id="page-container">

  # Use this to poke a top div if you want to run a big announcement
# across the top of the page; where you push a view as data in your 
controller:

[[gData["siteWideBanner"] ]]

<div id="masthead">
<div id="khm-logo">
             [[gData["khmLogo"] ]]
</div>
</div><!-- masthead -->

This actually turned out to be a serendipity advantage because it forced 
me to close the head of the document in the masthead view. I normally 
don't like to break the DOM like this, (<head> opens in one view and 
closes in another) but in the end I realized it didn't matter since by 
design the masthead div will always lead the page. This sudden lead me 
to realize I could separate the core CSS for the site and the 
dynamically load an override CSS for a particular area that used a 
particular masthead view.  So, one masthead view could call a different 
CSS: magically, then  the head of the web pages for

/books

can be different from

/children

etc.  and you just keep your logo the same throughout.

I plan move away from the random selection and set up different folders 
with series of like images   e.g. all flowers, in one, all people in 
another, all "kids cool images" in another  and order them by file name, 
then the function will write a "session" var to a file indicating what 
header image is currently loading. All viewers will then see the same 
image at the same time, and the function will steps thru, e.g. a whole 
series of rainbow pix.

And if I want to insert things on top of the masthead you can just put 
vars in the mast head and fill them with views. fantastic!

I'm blabbering  on and on here.

POINT: this is just way too much fun, way too easy with LiveCode.. 
imagine doing this in PHP.
Well I can't, because I don't know PHP...

10 minutes of cut and paste lines and controller handlers and magically 
now we get:

http://dev.himalayanacademy.com/books
http://dev.himalayanacademy.com/books/two
http://dev.himalayanacademy.com/books/three # design 1 with top video 
(HTML5) banner
http://dev.himalayanacademy.com/books/four   # design 2 with top video 
banner

and I did not have to touch html even once to get  #3 and #4.

skts

>