Hard coded images in master pages

Hey guys - I've followed the Designer's Guide to the letter. I have a working master page that I created. However, hard coded images in the master page and it will NOT display. The image are in the correct folder along with other images that are references by the global CSS.

In the CSS file this works perfectly:

SOLUTION!!!

Ignore the Designer Guide's intructions and put your "MyTemplate" folder in the root directory, not App_Data/Sitefinity.

Well, no...the problem is that when the page renders the ../ is relative to the page you're on (to the browser), not to the masterpage

You SHOULD keep it in App_Data :)

This is what your path should look like to the themed images

Hi Justin,

Try to write to the path to the image starting from the root of your site

Katia - I've tried that method multiple times without any luck. As far as I've seen, it doesn't work. The only success I've had is after placing the "WebsiteTemplates" folder in the root. That works fine and is preferable to deeply nested directory structures anyway.

Hmmm, I would disagree

While it is deeply nested...it also keeps all your loose files (Masterpages, styles, scripts) contained under one folder, so you could in theory just drop that into ANY site and your theme would be back up and working (once registered in the config)

I'm using the method Katia suggests without issues, you aren't still using the ../ syntax perhaps?

I would suggest keeping the structure within App_Data.  As stated earlier in this post you can refer to images by skipping "App_Data" and starting your path at "/sitefinity/...". 

It can be tedious having long paths to type/copy/paste out, but one big key here is that I believe future plans are to offer some sort fast marketplace theme integration by tying them into App_Data. 

Hello,

We do plan to provide a direct import from the marketplace and export functionality which will utilize the structure described in the Designer's guide.

Justin, if you'd like to switch to the recommended structure I will need:

• your masterpage
• your css theme and images
• your file structure, which file (master page, theme, images) in which folder resides (a screenshot will do the trick).
• any additional info you think might be useful to reproduce your issue

Katia,

Forgive me; I'm new to Sitefinity.

My images in /Sitefinity/WebsiteTemplates/Template/App_Themes/Default/images/logo.jpg.

On my dev machine the Sitefinity Project Manager opens the site up in http://localhost:27485/Default

That means, I've got to hardcode in /Default/Sitefinity/WebsiteTemplates/Template/App_Themes/Default/images/logo.jpg which will be different when I publish the site live as there will be no "/Default" folder.

How do I remove the /Default folder from my localhost testing environment.

Thanks,
Joshua

Hey Joshua,

There's two kind of images: called from .css and called from .Master.

Called from .CSS:
If you're following the Designer's guide method (put everything under App_Data) its best to avoid full paths. Changing a theme's name, or changing the publication (subroot) will break the theme.

If you're using themes and calling in image from the .css file, you can just use this for instance:

background: #fff url('../images/background_header.jpg') no-repeat left top;

<img src="~/Sitefinity/WebsiteTemplates/Template/App_Themes/name/images/myimage.png">

Is this the acceptable way to do it?

We had come to this same conclusion and were wondering.

Rick,

Yep!

Generally, images in master pages are useful when I want to use an <img> tag in my source. If I'm using the image as a background or something, CSS is better suited for the job.

In either case, I do it in the way stated above.