How can I add a image picker field to general settings?

Topics: Customizing Orchard
Oct 27, 2011 at 10:38 AM

Hi,

I would like to extend the default settings offered by Orchard to include one where the user can select an image which would then be displayed as the logo for the site (rather than the default which displays the site name).

Is there any working examples of this I could have a look at?

Thanks

Coordinator
Oct 28, 2011 at 12:52 AM

Interesting timing. I wrote a module that does exactly that last night, for a customer. I may be able to release it on the gallery but here is how it works: it's a theme that you only activate, without making it the current theme. It has an admin theme selector that looks like this, to override the default admin theme:

    public class AdminThemeSelector : IThemeSelector {
        public ThemeSelectorResult GetTheme(RequestContext context) {
            if (AdminFilter.IsApplied(context)) {
                return new ThemeSelectorResult { Priority = 101, ThemeName = "MyCustomAdminThemeName" };
            }

            return null;
        }
    }

The new theme needs to have all the files from TheAdmin, but you can change any of them. In particular, header.cshtml contains the logo. You can add some code in there that reads from some site settings (which will be per tenant) and modifies the rendering accordingly.

Oct 28, 2011 at 8:24 AM

Hi bertandleroy,

I am new to Orchard so still not 100% sure how everything works so it would be great if you could add it to the gallery!

At the minute I have created my own theme (extending TheThemeMachine) and overriding the Branding.cshtml file to display the logo - the goal is to basically make this configurable from the General Settings. If I have understood you correctly you have just created a new admin theme which includes a picker for a logo? Also, how could I make it render as a media picker?

Thanks

Coordinator
Oct 31, 2011 at 11:33 PM

It's not a picker, just a text field where you can paste the url of the logo.

Nov 1, 2011 at 8:38 AM

I was hoping that I could somehow have a media picker (like in the content editor) just to make it easier for the end user.

Is something like this possible? 

Coordinator
Nov 1, 2011 at 6:28 PM

Of course. Look at the image field for an example.

Dec 13, 2011 at 7:06 PM

Since this is probably pretty low priority for a module, would one of you write this up in a reply. I am trying to achieve displaying my site logo in the same element where the default site name displays but cannot seem to modify the branding.cshtml file correctly to include the logo img in the link.

Coordinator
Dec 13, 2011 at 7:11 PM

Write what up?

Dec 13, 2011 at 7:26 PM
Sorry, the process described in the thread I replied to was a little over my head.
I am looking into Favicon module now.
new to Orchard, but I am impressed with modularity, extensibility and platform choices. It all makes sense. I’m just taking a look at Pluralsight training and other resources as I experimentally bring up a new site.
In webmatrix I was trying to alter the branding.cshmtl to include an image in the header where the default site name is displayed. This is modified from the Contoso file. Kind of works, just does not display the image.
@{
var homeUrl = Href("~/");
}
From: [email removed]
Sent: Tuesday, December 13, 2011 2:11 PM
To: [email removed]
Subject: Re: How can I add a image picker field to general settings? [orchard:277392]

From: bertrandleroy

Write what up?

Coordinator
Dec 13, 2011 at 8:05 PM

Ah, ok. Can you try to paste your code again, but this time using the ïnsert code snippet" button on the editing toolbar? (that's the last button on the toolbar)

Dec 13, 2011 at 8:09 PM

@{
    var homeUrl = Href("~/");
}
<h1 id="branding"><IMG SRC="SmallLogo.png" alt="Logo" height="60" width="60"/><a href="@homeUrl">@WorkContext.CurrentSite.SiteName</a></h1>

Coordinator
Dec 13, 2011 at 8:12 PM

and where is that smalllogo.png file located? Seems like you should have something like src="@Href("SmallLogo.png")"

Dec 13, 2011 at 8:33 PM
Tried several locations including right alongside the branding.cshtml file under the theme/contoso/views. And tried relative paths in front of the file.
Again, pardon my ignorance here. Not being sure of the @href call and the basic structure of Orchard. I’m sure I’m just hacking things up to get a result.
I did try to insert the substitute below for src value, but no results.
Give me a week and I’ll be less of a hacker and more of a competent user.
thanks,
Bill
From: [email removed]
Sent: Tuesday, December 13, 2011 3:12 PM
To: [email removed]
Subject: Re: How can I add a image picker field to general settings? [orchard:277392]

From: bertrandleroy

and where is that smalllogo.png file located? Seems like you should have something like src="@Href("SmallLogo.png")"

Coordinator
Dec 13, 2011 at 8:52 PM

Media files should be stored in different folders than the template files. Typically, images go into Content/Images.