The advised place to put images and css files

Question

I've been looking on the net for some advise and explanation about where to put my custom css and images for the master page in sharepoint 2010. I'm now busy with branding the portal and i'm a bit confused where the css files and images should go.

I have few options, either i put the files into the portal itself in the style library (document library) or I put them in the hive (ofcourse with the solution) And if in the hive in what directory exactly? 1033/Styles? (if in this one i would really like to know why?, why is 1033?) /Images? Other place?

Ofcourse i can put my files where ever i want but i would rather hear the best practise (the best place, the normal way of doing it).

score 7 · Accepted Answer · edited Apr 13 '17 at 12:41

If you want a super user to be able to change logos etc, or if the logo is specific to a site collection, place them in a subfolder in /Style Library/Images/.

However often you dont want the layout files of your page, or your CSS for that matter, to be changed by end users. This is a good reason to place them somewhere in the v\TEMPLATE\LAYOUTSfolder. These files are also available across all site collections in the farm as/_LAYOUTS`.

Exactly where under LAYOUTS really depends... If they should be able to change depending on language, you should place them under each language in LAYOUTS\<LCID>\IMAGES\yourSubDir or LAYOUTS\<LCID>\STYLES\yourSubDir (you will have one folder for each language pack you have installed).

When inserting CSS use the <Sharepoint:CSSRegistration ../> web control in the master page, SharePoint will pick the relevant localized CSS file depending on the language selected by site owner or user (see my blog post for more info) and possible caveats. This will also make sure that your CSS file is not cached when it is changed.

SharePoint libraries in general have "issues" with max-age header, which would cause excessive requests to the server even though page is cached

As you state, you can put them anywhere you want, and as you can see the answer (as usual with SharePoint is "it depends"). It is not the first time we discuss this either. Check similar question here.

On a final note, they way the files end up where they do is important too! You should always use Solutions and if needed Features to provision the files no matter where you decide to stick them!

EDIT: Files that should be published in a SharePoint library must be published using a Module element in a feature. Here you want to set it to be GhostableInLibrary. Example:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="MyWelcomePageTemplate" Url="$Resources:osrvcore,List_Pages_UrlName;" Path="MyWelcomePageTemplate">
    <File Url="default.aspx" Type="GhostableInLibrary">
      <Property Name="Title" Value="My page" />
      <Property Name="PublishingPageLayout" Value="~SiteCollection/_catalogs/masterpage/MyPageLayout.aspx, $Resources:cmscore,PageLayout_WelcomeLinks_Title;" />
      <Property Name="ContentType" Value="MyContentType" />
    </File>
  </Module>
</Elements>

On the other hand you include LAYOUT files using Mapped Folders (directly to SharePointRoot or LAYOUT depends on your preference) that automatically is added as <RootFile ..> elements in your package/solution

Good explanation. But if I use feature to put the css and image files, they will be automatically placed in /Template/Feature/featurename/specified pad (is this good?) And if in my solutin i put module style libarary / images (according to this link http://msdn.microsoft.com/en-us/library/gg447066.aspx) when then in sharepoint i go to the style library, i see the structure but no files in it :( — Shkipper, Jun 28 '12 at 07:47
The folder you mention is only where the module files of the feature is placed. If you want to place the files in a SharePoint library, you should specify them as Type="GhostableInLibrary". That way the database entry in the library will point to the physical file location on the disk. More on GhostableInLibrary here or Google it :-) If you want to place files in Layouts folder, just add a Mapped Folder to LAYOUTS in Visual Studio. These files is not placed in a feature/module but is included directly in soultion as RootFile's — Anders Rask, Jun 28 '12 at 08:46
So when it is ghostableinlibrary the files will not be placed into the feature folder? They will only be placed into library (db) not the virtual directory — Shkipper, Jun 28 '12 at 09:46
no, when it is GhostableInLibrary the item is not placed in the database. Instead a reference to the file in the feature folder is used. An example of an Unghosted (in "modern" SharePoint terms referred to as Customized) would be if you for example edited a Page Layout in SharePoint designer. That would customize the page and the link to the file system would be replaced by a BLOB in the database — Anders Rask, Jun 28 '12 at 10:28
could you say why is it the best way to deploy branding stuff, css, images with a feature? for example in the future you will alwyas have to make sure the solution in vs is updated, even if you update the css with designer cuz then the changes will be overwritten. — Shkipper, Jun 28 '12 at 12:12
First of all to allow for release management across environments (DEV > TEST > PREPROD > PROD) preferably using standardized deployment scripts in PowerShell. Secondly, if you edit these files manually on the file system, you only touch the one on a specific web front end server. Your farm will often be made of several servers, this is why we have a solution framework to make sure files are kept synchronized across the farms physical servers. — Anders Rask, Jun 28 '12 at 12:53

score 1 · Answer 2 · edited Jun 15 '20 at 08:48

1

I believe you should put all the branding design stuff in the Style Library. The 1033/Styles folder is for custom development css file.

Find out more here

edited Jun 15 '20 at 08:48

Community

1

answered Jun 28 '12 at 06:36

Agamand The True

875
3
17
33

score 1 · Answer 3 · edited Jun 28 '12 at 11:01

Why 1033? It is Decimal Language Code for English - United States. So if you have style/images/resources that target a different language you should use the appropriate language code.

Personally I would not use the ..Styles/ ..Images/etc folders directly but I would use a subfolder in them (i.e. 1033/Styles/MyProject or 1033/Images/MyCompany). This way you can easily find your custom files in the 12 hive.

The advised place to put images and css files

3 Answers3

Linked