umbraco images best practices and use

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

olst 69 posts 88 karma points

Oct 29, 2011 @ 16:13

0

Umbraco images - best practices and use

I have several image types in my site:

1. Images for the layout - like logo, favicon, background images in the css.

2. Images which are content related - uploaded by site editors.

Where do I put each type of image and how do I reference it in the template to show in the website ?

thanks.

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 12x admin c-trib

Oct 29, 2011 @ 17:11

1

Hi olst

1) Image for use in the layout, with which the editors have nothing to do should be saved in a "images" folder on the disk in your umbraco project. Like you would save css files in a "css" folder and JavaScript files in a "script" folder.

2) Images that are used for content should be saved in the media section of Umbraco. To make upload of these images much easier you should encourage your editors to install the desktop media uploader, which is a brilliant package that makes uploading media a breeze :)

Hope this helps.

/Jan

Copy Link
Jamie Howarth 306 posts 773 karma points c-trib

Oct 29, 2011 @ 17:17
0
Hi olst,

+1 to what Jan says regarding locations - although for CSS-related images I tend to put these in /css/images to avoid confusion in the filesystem.

Regarding using media items in your template, you should use the Media Picker on a document type, then when you go to select an image on a node, you can use umbraco.library:GetMedia(myImageProperty, 0)/Image to get the XML properties of the image you've uploaded into the Media library.

A good example is as follows:
```
<xsl:template match="*">
  <xsl:variable name="myImage" select="umbraco.library:GetMedia($currentPage/myImageProperty,0)/Image" />
  <img src="{$myImage/umbracoFile}" width="{$myImage/umbracoWidth}" height="{$myImage/umbracoHeight}" alt="{$myImage/@nodeName}" />
</xsl:template>
```
Hope this helps,

Benjamin
Copy Link
is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies

Flag this post as spam?

Umbraco images - best practices and use