Relative URLs for themes

Topics: Writing themes
May 3, 2011 at 9:06 PM

How are people going about linking to theme assets such as images?  Are there any extension methods for the currently applied theme? Something like Url.Content("images/my-theme-image.png")

Coordinator
May 3, 2011 at 9:11 PM

Well, you know the name of your theme, so you can do Url.Content("~/Themes/MyTheme/images/my-theme-image.png").

May 3, 2011 at 9:15 PM

Yeah...that's what I'm doing now, just seems like a theme shouldn't be too dependent on its own path.  I was thinking about something along the lines of the following function in wordpress:

<img src="<?php bloginfo('template_directory'); ?>/images/mainimage.jpg" title="" alt="" />
No worries though, simple enough to do

Coordinator
May 3, 2011 at 9:17 PM

Well, that would probably be a good suggestion to add to the issue tracker.

May 3, 2011 at 9:28 PM

Will create one.  Quick, unrelated question.  I'm working on a theme now, and it seems like orchard or IIS is caching my css file.  Any clue if that's an orchard issue or some IIS setting?  I'm getting a 304 not modified, even though it's an old copy.  Thanks

Coordinator
May 3, 2011 at 9:31 PM

That's IIS.

May 3, 2011 at 9:53 PM

I used this in the CKEditor module for determining the Site.css file to use in the body editor:

                // Push css link(s) into config
                var currentTheme = _siteThemeService.GetSiteTheme();
                var sheets =
                    // Get list of stylesheets
                    ckSettings.ContentsCss.Split(new[] { ' ', ',' }, StringSplitOptions.RemoveEmptyEntries)
                    // Transform to full URLs
                    .Select(sheet => string.Format("{0}/{1}/Styles/{2}", currentTheme.Location, currentTheme.Id, sheet))
                    .Where(path => _virtualPathProvider.FileExists(path)).ToList(); // Execute at this time to avoid trouble later
                displaying.Shape.ContentsCssPaths = sheets;

So the important bits are GetSiteTheme and then the string.Format line. The rest is splitting up the settings parameter and creating a list of css files.

The problem here is it's a bit complicated to put in an extension method since you need access to various dependencies. But it's pretty easy to do this from a shape event or driver and pass the filename into the model.