This blog will discuss some tips and tricks concerning the use of images with Sitecore which are important for content authors, especially those who may be having trouble getting their image to appear on their pages.
The path to an image is important because it is how the image is found on an HTML page when retrieved from the media library. The name of the image should not be overlooked either for the same reason. As a result, a content author should avoid using characters such as ?, &, and = which can interpreted by browser in a fashion not intended by the content author.
Because of how an image name can be interpreted, it would be suggested sticking with alphabetical characters and spaces and nothing more. If a non-space, spacer character is needed, a good suggestion could be using a dash or an underscore (depending on which is used for encodeNameReplacements discussed in the next paragraph).
Another consideration in determining what characters should be used in addition to numbers, letters and spaces is what is configured to replace a space in the URL of an item using <encodeNameReplacements>. This configuration entry used by the Sitecore’s web configuration is used to automatically replace spaces in the URL address of a Sitecore page to a different character so %20’s do not appear in a browser’s address bar for that page.
It is therefore problematic to use that character in an item name including an image item. It is a good idea to not use that character in the image name but if it is necessary, use in as limited a fashion as possible. Part of the difficulty is reversed mapping that Sitecore performs when retrieving an item from its URL. When the encodeNameReplacements character is encountered, the character is replaced with a space during this reverse mapping process. Since the original item name has that character and not a space, it may not be able to find that item when retrieved in this fashion. A brief demonstration of this process is shown below.
Folder Names
Since folders are also items in Sitecore, their names are also significant since they contribute to the path which would be used to retrieve the image as it is applied to HTML of the page. If the folder name cannot be used by Sitecore to address the folder as part of a URL path, the images within that folder will not be accessible when applied to web pages. Take care in how folder names are created as much as you do the image names which are used.
Publishing Images Prior to Preview
Another aspect of using images on Sitecore generated web pages is using the Publish, Preview command in Sitecore. Sometimes, when working with images, and a preview is attempted, a page containing images which have not been published yet, may not appear on the page. Once the images were published to the web database, they then appeared on the page as planned even during a preview. The intent of a preview is to show you the finished page if all elements required are on the live “web” version of the site, so what could be the case is that Sitecore has difficulty doing that with images and needs the images in the web database before they can be included in a preview.
So to summarize, when loading and using images in Sitecore, some tips to follow are…
- Image names should reflect URL paths which may be needed to access these images on web pages. Avoid special characters that can be interpreted differently by a browser when in the address bar (i.e. &, ?. =, etc.).
- Avoid the encodeNameReplacement character used for spaces by Sitecore in the item name.
- Treat folder names the same way as item name since they are part of the path used to retrieve the image (in other words, follow the previous two steps).
- Images which need to be previewed may need to be published before they are accessible in a preview.
I hope these tips which will prove quite helpful to not only content authors and editors but also developers who support the content authoring community.
