function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
JimPDXJimPDX 

Sites Include Structures

I am trying to move an older site (table-based) with a heavy include structure (php) into my developer org as VF pages and later a full Site implementation. I am using a combination of static resources for structural images and starting to utilize VF components for the larger blocks of code such as a tradition header include, navigation include and footer. Each of these needs to be dynamic which won't be a problem with APEX, although I seem to be unable to reference Static Resources from within other resource files such as CSS and JavaScript. Obviously I don't want to hard-code image paths into CSS url attributes. Am I missing an obvious workaround to include dynamic references within other static resources?

That was not even the main question I intended to post... In creating my larger includes, I have begun getting save errors on open tags, such as a container table (did I mention this was a site from 2000?) or the BODY tag itself. Is there a way to use APEX tags in VisualForce to open the body element without it causing compile errors?

Appreciate any advice folks may have.
BulentBulent
Related to the first part of your question:

If a CSS file contains relative references to images then the pattern to follow is a structured archive static resource, i.e. a Zip file.

Imagine on your local filesystem you have a file called styles.css and in that stylesheet you have a reference like this:


table { background-image: img/testimage.gif }

and on your local filesystem there a folder named "img" containing an image named "testimage.gif" and that folder is physically located in the same place as styles.css.

Now zip up the contents of the location containing styles.css and the img folder, upload it as a static resource named "styles" and then in your page do this:

<apex:stylesheet value="{!$Resource.styles}"/>

Message Edited by Bulent on 12-16-2008 02:52 PM
JimPDXJimPDX
Thanks Bulent. Unfortunately your code example at the end got cut off. This is what I was doing within my javascript static resource which of course isn't being evaluated. Should I utilize pages instead of resources, or components containing javascript?

Code:
function preloadImages() {
 if (document.images) {
  home_over = newImage("{!URLFOR($Resource.zip_nav_images, 'home-over.gif')}");
  home_down = newImage("{!URLFOR($Resource.zip_nav_images, 'home-down.gif')}");
  news_over = newImage("{!URLFOR($Resource.zip_nav_images, 'news-over.gif')}");
  news_down = newImage("{!URLFOR($Resource.zip_nav_images, 'news-down.gif')}");
  events_over = newImage("{!URLFOR($Resource.zip_nav_images, 'events-over.gif')}");
  events_down = newImage("{!URLFOR($Resource.zip_nav_images, 'events-down.gif')}");
  about_over = newImage("{!URLFOR($Resource.zip_nav_images, 'about-over.gif')}");
  about_down = newImage("{!URLFOR($Resource.zip_nav_images, 'about-down.gif')}");
  contact_over = newImage("{!URLFOR($Resource.zip_nav_images, 'contact-over.gif')}");
  contact_down = newImage("{!URLFOR($Resource.zip_nav_images, 'contact-down.gif')}");
  preloadFlag = true;
 }
}

 
BulentBulent
I updated my original post to include the last part of the missing code.
You can use use static resource for your javascript and if you include your javascript as part of the zip file (static resource) you can directly reference images in the zip file with the file names and the folder hierarchy

if you want to include the javascript directly in your visualforce page then your example should work. First option is better.
JimPDXJimPDX
Bulent, would the same approach work for images embedded within javascript library static resources? For example the famous "lightbox" library contains paths to numerous images - loading, next, previous, close, etc.

Code:
var fileLoadingImage = "/images/site/lb/loading.gif";  
var fileBottomNavCloseImage = "/images/site/lb/closebox.gif";

 If I include lightbox.js in the ZIP file along with images/closebox.gif, could I also use the following in my APEX page or component:

Code:
<apex:includeScript value="{!$Resource.scripts}" />

 
BulentBulent
That should work fine too.
JimPDXJimPDX
Bulent, I'm just getting back to this issue after the holidays. Been integrating my Sites page with Lightbox 2.04 (built on top of scriptalicious). I finally realized an issue with your last reply to my most recent question. The following code, embedded within a JS file, is resulting with a path of https://c.na6.visual.force.com/apex/img_lb/closebox.gif instead of looking within the containing static resource ZIP package. Thoughts?

Code:
LightboxOptions = Object.extend({
    fileLoadingImage:        'img_lb/loading.gif',     
    fileBottomNavCloseImage: 'img_lb/closebox.gif',

...

Builder.node('div',{id:'bottomNav'},
 Builder.node('a',{id:'bottomNavClose', href: '#' },
  Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })

 
BulentBulent
Please check if you are logged in to the org (may be another window) and running this page within the org context. "https://c.na6.visual.force.com/apex/" would not be generated when you are in the site context
JimPDXJimPDX
Bulent - this is only VF right now loading from a VF tab, no site context at all. It is actually being modeled in a trial platform UE org. I can confirm I am logged in when loading the page and the source. This is the latest Lightbox release and these two images are the only locally referenced assets within the js library. I am puzzled why it is not automatically looking in the resource directory like the photo is (https://c.na6.visual.force.com/resource/1231219080000/Photos/large.jpg - which works fine). Within the same DIV it attempts to load https://c.na6.visual.force.com/apex/img_lb/closebox.gif.
ShamilShamil

Jim, 

 

Were you able to resolve this? I am having the same issue.

 

thanks,

Shamil