I've been doing some searching for a while now but I still haven't found the answer I'm looking for. I'm trying to include an image from my Media library without referring to the URL absolutely. I don't know if this is possible but this would be better since that URL could change.
The image will be the same in every page (like a header image) and therefore I don't want to force anyone who creates a new content page to have to select the image every time. How can I refer to any image in my media library by name in my template and display the image?
If you are using version Umbraco 4.11 or later, there is a new control that can render image in templates umbraco:image. It is fairly simple to use, and should make it a bit easier to work with images in templates. You use it like this:
<umbraco:Imagerunat="server"field="fieldname"/>
Change the fieldname to the alias you use on the image field of the documenttype.
If you want to set some dimensions on or give it a class it can be done like this:
I have used this Image control before but I'm not sure how this can be used in my case? Do you create a new item in the Content area just containing the main image to be set?
The way Inormally doitis by addinga tabon the home pagecalledSite Settings.On this tabI addall of the commonfileds.Such aslogo, footertext,Google Analyticstracking code andso on.Back upyour case.Iwant to addthe tabto the website,I just toldyou about.Sothe tab, I would adda field toDocument Typeof the websitecalled logo.Thedata typeIsetthe mediapicker.With the mediapickeryou'll beable toadd an imagein the area,from themedia library.
Once you have donethis setup. I will recommend use a master templates. the thing about master tempalte is templates can inherite other templates. So in the master template I will addall the elements that should be onall pages. Underthis mastertemplateI will addthe templates thatare differentfrom each other,
Here is a example of an master template from one of my sites:
In the child templates, you will need to have a asp:content area which matches the placeholder id from the master template. I my example the placeholder calls content. So for the pages that contains different markup. You need to do it like this:
<%@ Master Language="C#" MasterPageFile="~/masterpages/Master.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="content" runat="server"> <!-- Place the different markup for for the page in here --> </asp:Content>
To makethismore understandable, I have madea screenshot:
You canbenefit from using thesame setupwhen you createyourdocumentypes.Bycreating a masterdocument typewhich,containsall the fieldswhichare the same forall pages.and the other documenttypesmust theninheritfrom thismasterdocumenttype and contain the special fields for each page. Ihave alsotakenascreenshotofthis,Ihopeto make it moreunderstandable
So back to your case again. The way you can get your header image being printet on every page of your site, is by make the setupasI described earlier. So your master template would look something like this:
Notice thatthe fieldhas anattributenamedrecrusiveset totrue. This meansit will search the contenttreethrough untilitfindsthe field with the value, and the value will be printet to all the pages of the site.
I know is a loooong post, but I hopein the fact of that itwas informative,and you canresolveyourissue.If it don´t makes any sense,then please say so.Then I willsee if I canexplainitin a different way.
If youhave more questions keep asking them, and I will try to help you as much as possible.
You're welcome I'mglad thatI could helpyou with your question.And you could understand what Iwastrying to explain.Althoughit becomea relatively longexplanation.
Images
I've been doing some searching for a while now but I still haven't found the answer I'm looking for. I'm trying to include an image from my Media library without referring to the URL absolutely. I don't know if this is possible but this would be better since that URL could change.
The image will be the same in every page (like a header image) and therefore I don't want to force anyone who creates a new content page to have to select the image every time. How can I refer to any image in my media library by name in my template and display the image?
Hi Steve,
If you are using version Umbraco 4.11 or later, there is a new control that can render image in templates umbraco:image. It is fairly simple to use, and should make it a bit easier to work with images in templates. You use it like this:
Change the fieldname to the alias you use on the image field of the documenttype.
If you want to set some dimensions on or give it a class it can be done like this:
Other alternatives could be to print the image from XSLT or Razor, but if you not should do any stuff to it, I think this is the most easiest way.
And then you should work with at master templates, that contains all the common markup for your different type of pages.
A good point to start about template could be here: http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/sitebuilder-introduction/templates
I hope this make some kind of sense and helps you further.
If you have any other questions keep asking them, and I will try to help you as much as possible.
/Dennis
Thanks for your reply.
I have used this Image control before but I'm not sure how this can be used in my case? Do you create a new item in the Content area just containing the main image to be set?
Hi Steve,
The way I normally do it is by adding a tab on the home page called Site Settings. On this tab I add all of the common fileds. Such as logo, footer text, Google Analytics tracking code and so on. Back up your case. I want to add the tab to the website, I just told you about. So the tab, I would add a field to Document Type of the website called logo. The data type I set the media picker. With the media picker you'll be able to add an image in the area, from the media library.
Once you have done this setup. I will recommend use a master templates. the thing about master tempalte is templates can inherite other templates. So in the master template I will add all the elements that should be on all pages. Under this master template I will add the templates that are different from each other,
Here is a example of an master template from one of my sites:
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><umbraco:Item field='pageTitle' runat='server'></umbraco:Item></title>
<meta name="description" content="<umbraco:Item field='metaDescription' runat='server'></umbraco:Item>">
<meta name="keywords" content="<umbraco:Item field='metaKeywords' runat='server'></umbraco:Item>">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/lightbox.css" />
<link rel="stylesheet" href="/css/pdculli.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script> window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="siteWrapper">
<section id="siteTop">
<div id="logoWrapper">
<div id="logo">
</div>
</div>
<umbraco:Macro Alias="MainMenu" runat="server" />
<section id="mainContent">
<asp:ContentPlaceHolder Id="Content" runat="server">
<!-- Insert default "content" markup here -->
</asp:ContentPlaceHolder>
</section>
<footer id="footer">
<div id="footerContent">
<umbraco:Item field="footerContent" recursive="true" runat="server" />
</div>
</footer>
</section>
</div>
</body>
</html>
</asp:Content>
In the child templates, you will need to have a asp:content area which matches the placeholder id from the master template. I my example the placeholder calls content. So for the pages that contains different markup. You need to do it like this:
<%@ Master Language="C#" MasterPageFile="~/masterpages/Master.master" AutoEventWireup="true" %><asp:Content ContentPlaceHolderID="content" runat="server">
<!-- Place the different markup for for the page in here -->
</asp:Content>
To make this more understandable, I have made a screenshot:
You can benefit from using the same setup when you create your documentypes. By creating a master document type which, contains all the fields which are the same for all pages. and the other documenttypes must then inherit from this master document type and contain the special fields for each page. I have also taken a screenshot of this, I hope to make it more understandable
So back to your case again. The way you can get your header image being printet on every page of your site, is by make the setup as I described earlier. So your master template would look something like this:
Notice that the field has an attribute named recrusive set to true. This means it will search the content tree through until it finds the field with the value, and the value will be printet to all the pages of the site.
I know is a loooong post, but I hope in the fact of that it was informative, and you can resolve your issue. If it don´t makes any sense, then please say so. Then I will see if I can explain it in a different way.
If you have more questions keep asking them, and I will try to help you as much as possible.
/Dennis
Thanks for your reply, that was a great post. I see what you are trying to do and it seems to make sense. I've marked as answer, thanks again
Hi Steve,
You're welcome I'm glad that I could help you with your question. And you could understand what I was trying to explain. Although it become a relatively longexplanation.
Super you could get something out of it !
/Dennis
is working on a reply...