Using cfinclude or cfmodule to include pages that have images?

Report · Oct 06, 2012

I am at my wits end with this very simple issue.... and I cannot find an answer anywhere using Google search.

I have three files - one is called index.cfm, the other is called companies.cfm and finally one called header.cfm

The header.cfm file contains all my websites header stuff. The image paths I have used are relative so one of them is like this: <img src="images/global/companyLogo.jpg" />

If I use <cfinclude template="header.cfm"> in my index.cfm page then the image displays fine. But if I use the header.cfm file in the companies.cfm file then the image does not display. If I go to view the page source it is still looking for the image using the path "images/global/companyLogo.jpg" when really it should be "../images/global/companyLogo.jpg" to move up a level.

I just can't seem to understand how to do this so that I can use my header.cfm file on any page I want and the relative image paths within that file will resolve correctly.

Please can someone help me because I am so close to giving up and maybe trying a different server side language that can do this simple include function.

Report · Oct 07, 2012

Managed to solve this myself..... I used a site root relative path for my images. So rather than just going to a folder where the images are, I made the link path full so it also included the site name:

SiteName/image/global/logo.gif

Then it will always work because the path is relative to the site, not the document! God such simple things take so long to figure out.

Report · Oct 07, 2012

Am I correct in guessing that companies.cfm is not in the same directory as the other two files? Which means the relative URLs in headers.cfm are not correct when they're being used in companies.cfm?

Bear in mind that image URLs are relative to the URL or the requested file, not relative to the file the <img> tag happens to be in.

--

Adam

Report · Oct 07, 2012

Yes thats correct, the companies.cfm file was in a different folder. I will end up having many files in different folders but all within the same site of course in wwwroot. So if I am to include a header.cfm file on all my pages then the links and images should display on all pages so the only way is to use site-root relative links NOT document-relative links. This is not explained or suggested anywhere in the CF documentation.

Report · Oct 07, 2012

Yes thats correct, the companies.cfm file was in a different folder. I will end up having many files in different folders but all within the same site of course in wwwroot. So if I am to include a header.cfm file on all my pages then the links and images should display on all pages so the only way is to use site-root relative links NOT document-relative links. This is not explained or suggested anywhere in the CF documentation.

It's possibly not explicitly mentioned in the docs, no. But there is perhaps an expectation that one knows how basic web interactivity works, as well as the relationship between browser, network, web server and web application servers. This probably should be explained in the docs, because a lot of people don't seem to get it initially.

The bottom line is that URLs in your mark-up only have relevance to the web browser, not to ColdFusion. Equally, ColdFusion doesn't pay any attention to any mark-up in your CFM files, so it neither knows nor cares how you form your URLs in said mark-up.

So your image requests are made from the browser not from the CF code. If you browse to:

http://somedomain/subdir/companies.cfm

Then any relative URLs (be they to images, JS, CSS or links to other files), need to be relative to http://somedomain/subdir/.

It's not like the browser is going "right, I need to ask for companies.cfm and headers.cfm and footer.cfm and [other stuff]", the browser has no idea that there's a CF server behind the scenes. All it does it say to the web server "gimme the file at /subdir/companies.cfm".

The the web server says (to itself, not the browser) "aah... right, the CF sever is going to sort this request out", and passes the request to CF.

CF gets the request for a document, and then runs through its code, includes files, etc to end up with a complete document which it passes back to the web server, which passes it back to the browser.

The browser then executes it (ie: renders it, and requests any further resources). It does this by looking at things like image src attributes, which it will examine to seeif it's a fully qualified path (incl. protocol and domain name), or absolute paths (so same web server, different path), or a relative path (which it treats as being relative to the location of file that was first requested). So it's the browser that handles all this.

Earlier, ColdFusion was processing a bunch of CFM files which hold a mix of CFML code and mark-up. The CF server is only interested in CFML, and it processes that. It completely ignores any mark-up it encounters, simply echoing it back as-is: CF is not an HTML parser, it's a CFML parser. Anything that's not CFML is just "noise": it's not HTML, or XML, or JS, it's just character data. So it's completely immaterial to CF that headers.cfm happens to have some image tags in it which - erroneously - have src attributes which are relative to headers.cfm. The image src URLs are not supposed to be relative to the location of the CFM file they're in, they're supposed to be relative to the document the browser has asked for.

Does that make sense?

This is, btw, pretty much the same way all web application servers work (if not the detailed minutiae of how they interact with the web server). It's not like this is a quirk of CF.

--

Adam

Report · Oct 07, 2012

Thank you for the explanation, it does make perfect sense but I think the confusion starts when you are using Dreamweaver as the development environment and it has its own template system which I am using in conjunction with cfincludes and cfmodules.

Dreamweaver likes to insert images and links as document-relative all the time and if you do this in a DW template file then it is fine because when you apply the template to a file in a different folder the links automatically update and resolve correctly. But with Coldfusion templates the CF server does not do any 'automatic updating' of document-relative links and requires everything to be site-root relative which is fine but not immediately obvious.

Report · Oct 12, 2012

I think there is an option in Dreamweaver to default images and links to be site-relative. It's somewhere in the "Site" settings, IIRC.

-Carl V.

Report · Oct 14, 2012

solaced wrote:
Managed to solve this myself..... I used a site root relative path for my images. So rather than just going to a folder where the images are, I made the link path full so it also included the site name:
SiteName/image/global/logo.gif
Then it will always work because the path is relative to the site, not the document! God such simple things take so long to figure out.

Let's say you're on ColdFusion 9. Assuming that the image folder is located at {cf_root}/images, you could create a mapping like this in the ColdFusion Administrator:

Logical path: /images

Directory path: C:/ColdFusion9/wwwroot/images

Then, wherever you are, you could refer to images henceforth as follows:

Report · Oct 15, 2012

@BKBK,

I'll have to disagree with you on this one, sorry. ColdFusion mappings are used for stuff that ColdFusion is processing. <image> tags are not served by ColdFusion; they are served by the web server (IIS, Apache, Nginx, etc.). You could create a virtual directory (IIS) or whatever the equivalent is in Apache for the images folder. However, using root relative paths will pretty much solve issues with the webserver finding images no matter where the .cfm page resides, or how it is nested by using <cfinclude> tags.

-Carl V.

Report · Oct 15, 2012

@Carl, you don't have to be sorry, I have to be. Thanks for pointing out the obvious mistake. I lost concentration there for a bit (have to get back to the swing of things).

I take your correction on resolution of paths. The paths resolved by the ColdFusion Admin stay within ColdFusion, and the path to static page requests like images will pass to the web server.

However, I do believe that mappings are more convenient to use than relative paths. They enable you to write-once-run-everywhere. I hope the following explanation argues the case better.

In ColdFusion Administrator:

Logical path: /includes

Directory path: C:/ColdFusion9/wwwroot/views/includes

Then, wherever you are, you could refer to an included header page henceforth as follows:

Then place the images in C:/ColdFusion9/wwwroot/resources/images, say. Similarly, create a web server mapping as follows

Resource path: /images/*</resource-path>

System path: C:/ColdFusion9/wwwroot/resources/images

Then, wherever you are, you could refer to images henceforth as: