Copied to clipboard

Flag this post as spam?

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


  • Debbie Lawrenson 55 posts 75 karma points
    Oct 23, 2013 @ 17:01
    Debbie Lawrenson
    0

    Adding a media library image to a template

    Hi,

    I'm sure this has been asked a thousand times before but I just don't seem to be able to find a simple answer. In Umbraco 6, assuming I have added a field to a document type with an alias of bannerImage, how on earth do I add this to my template file?

    When I came to do it I thought it should be really simple much like adding the other fields but alas it isn't it seems.

    Any advice gratefully received.

    Thanks,

    Deb

  • Rich Green 2246 posts 3976 karma points
    Oct 23, 2013 @ 17:07
    Rich Green
    0

    Hey Debbie,

    Try this

    <umbraco:image runat="server" field="bannerImage" />

    Rich

  • Mike Chambers 617 posts 1198 karma points c-trib
    Oct 25, 2013 @ 10:33
    Mike Chambers
    0

    Or if it's MVC

    <img src="@Umbraco.TypedMedia(Model.Content.GetPropertyValue("YOURMEDIAID")).Url"/>
  • Debbie Lawrenson 55 posts 75 karma points
    Oct 25, 2013 @ 10:42
    Debbie Lawrenson
    0

    Thanks Rich, that worked. What's the difference between these 2 solutions then? Which is better? Sorry I'm an MVC, Razor, XSLT, Umbraco newbie!!

    Thanks for your suggestion Mike I'll try that one too.

    Deb

  • Mike Chambers 617 posts 1198 karma points c-trib
    Oct 25, 2013 @ 12:00
    Mike Chambers
    0

    Depending on which umb 6 you installed the rendering engine for Umbraco will be WebForms or MVC - two differing technologies from MS

    (see /config/umbracosettings.config 

      <templates>
        <!-- If you want to switch to Mvc then do NOT change useAspNetMasterPages to false -->
        <!-- This (old!) setting is still used to control how macros are inserted into your pages -->
        <useAspNetMasterPages>true</useAspNetMasterPages>
    
        <!-- To switch the default rendering engine to MVC, change this value from WebForms to Mvc -->
        <!-- Do not set useAspNetMasterPages to false, it is not relevant to MVC usage -->
        <defaultRenderingEngine>Mvc</defaultRenderingEngine>
      </templates>

    )

    Think both approaches will work if WebForms specified, but my one only if MVC is the renderengine.

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 25, 2013 @ 12:27
    Debbie Lawrenson
    0

    Thanks Mike that makes sense. Oddly though I changed the config file to Mvc (it was webforms). I then popped in your code in place of the other on one of my templates and put the alias for the media item (in my case bannerImage) instead of 'YOURMEDIAID' but alas it doesn't work. The other method still seems to work even with the Mvc setting instead of the webforms one.

    Do I need to do something to kick start the new config?

    Strange!

  • Mike Chambers 617 posts 1198 karma points c-trib
    Oct 25, 2013 @ 12:38
    Mike Chambers
    1

    You'll need to recycle the app pool, or touch the web.config to cause the app to restart..

    To be honest with you we've not really made the transition to MVC as yet, just had this in some of my readings about the conversion process :-) 

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 25, 2013 @ 12:50
    Dennis Aaen
    0

    Hi Debbie,

    Yeah I think you might need to reset the site in the IIS so it catch have you have made changes to to web config. 

    You can reset your IIS like this.

    Go to windows start menu --> Commando prompt --> in there you type iisreset, and then wait to get the messages:

    Attempting stop...
    Internet services successfully stopped
    Attempting start...
    Internet services successfully restarted

    Note that by duing this you will reset the IIS for all the sites that you have setup in the IIS. I you only want to reset it for the current site that you are working on.

    Go to windows start menu --> Searh for iis --> open up the internet information server. --> Sites --> Find the site --> click stop and then start. (on the right side in the section Actions)

    After that you your site should run as MVC.

    Hope this helps if you want to run MVC

    /Dennis

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 25, 2013 @ 12:55
    Debbie Lawrenson
    0

    Thanks Dennis and Mike.

    I have restarted IIS and still the image is not appearing. It is rendering this in the html:

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 25, 2013 @ 14:18
    Dennis Aaen
    0

    Hi Debbie,

    As far as I understand Mikes code, is not the alias of the field you have to post in but the ID of the image item.

    <img src="@Umbraco.TypedMedia(Model.Content.GetPropertyValue("YOURMEDIAID")).Url"/>

    You can se the ID of an image in media library. I have made a screenshot where you find i ID.

    Hope it helps,

    /Dennis

     

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 25, 2013 @ 14:29
    Dennis Aaen
    0

    Hi Debbie,

    Forget my list post, with this you should be able to get the image out in MVC.

    <umbraco:Macro runat="server" language="cshtml">
    @{

     
    if
    (Model.Content.HasValue("
    bannerImage")){
     
    var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("
    bannerImage"));
      <img src="@mediaItem.GetPropertyValue("umbracoFile")" alt="@mediaItem.GetPropertyValue("Name")"/>
     
    }

    }

    </umbraco:Macro>

    And you aslo checks if the field has a value so you don´t get empty image tags in your markup

    Hope this helps. Just forget the previous post.

    /Dennis

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 11:22
    Debbie Lawrenson
    0

    Hi Dennis,

    Thanks so much for this.

    If I use that code above and change my config file to this:

    <templates>
        <!-- If you want to switch to Mvc then do NOT change useAspNetMasterPages to false -->
        <!-- This (old!) setting is still used to control how macros are inserted into your pages -->
        <useAspNetMasterPages>true</useAspNetMasterPages>
    
        <!-- To switch the default rendering engine to MVC, change this value from WebForms to Mvc -->
        <!-- Do not set useAspNetMasterPages to false, it is not relevant to MVC usage -->
        <defaultRenderingEngine>Mvc</defaultRenderingEngine>
    </templates>
    

    And restart IIS I get this error:

    Error loading MacroEngine script (file: )

    Any ideas?

    Thanks,

    Deb

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 11:33
    Debbie Lawrenson
    0

    Along similar lines (I seriously need to learn this lark!) I am trying to write some code:

    @*Determine if there are any nodes in the selection, then render list *@
    @if(selection.Any()){
    
         foreach(var page in selection.OrderBy("CreateDate desc")){
            if(@Model.Content.HasValue("bodyText")){
                <h2><a href="@page.Url">@page.CreateDate.ToShortDateString() - @page.Name</a></h2>
            }else{
                <h2>@page.CreateDate.ToShortDateString() - @page.Name</h2>
            }
            @page.Summary
            <p>&nbsp;</p>
         }                 
    
    }
    

    To produce a list of news items on the news area page (this bit is working fine) but some of the articles have a block of content in the bodyText which means that the headings should link to the full article but some of the entries have nothing in the bodyText and just have a summary so these ones don't want to have the link around the title.

    The link is not appearing at all. I'm sure I've just done something silly.

    Thanks for all your help!

    Deb

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 11:38
    Debbie Lawrenson
    0

    Don't worry, fixed the above one, replaced @Model with page and all sorted :) hurray!

    Deb

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 28, 2013 @ 12:06
    Dennis Aaen
    0

    Hi Debbie.

    Yes in Umbraco v4 is okay to have an @ in if statements in razor, e.g @if(@Model) but in v6 this are not forgiven.

    So in v4 of Umbraco you can do this and it will be ok:

    @if(@Model.Name=="home"){ 
     
    <p>Thisis the homepage!</p>
    }
    @if(@Model.NodeTypeAlias=="TextPage"){
     
    <p>thisis a textpage</p>
    }else{
     <p>this ia NOT a textpage</
    p>
    }

    And in a v6 you have to do it like this:

    @if(Model.Name=="home"){ 
     
    <p>Thisis the homepage!</p>
    }
    @if(Model.NodeTypeAlias=="TextPage"){
     
    <p>thisis a textpage</p>
    }else{
     <p>this ia NOT a textpage</
    p>
    }

    So in the first place you shouldn't have been able to write @ in the if statements in version 4. but this is now changed in Razor 2.0.

    I hope this was useful information about razor.

    /Dennis

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 12:45
    Debbie Lawrenson
    0

    Thanks Dennis.

    Any ideas with the error on the bannerImage code?

    Error loading MacroEngine script (file: )

    Thanks,

    Deb

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 28, 2013 @ 12:50
    Dennis Aaen
    0

    Hi Debbie,

    Could you please post the code that gives you the error. So we are sure that we are talking about the same. Then I will try to take a look on it and see if I can spot what gives you the error.

    /Dennis

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 13:00
    Debbie Lawrenson
    0

    Hi Dennis,

    Yes it was your code from earlier in this post:

    <umbraco:Macro runat="server" language="cshtml">
     @{
      if(Model.Content.HasValue("bannerImage")){ 
      var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("bannerImage")); 
      <img src="@mediaItem.GetPropertyValue("umbracoFile")" alt="@mediaItem.GetPropertyValue("Name")"/>
      }
    }
    </umbraco:Macro>
    

    If I use this I get that Macro error.

    Thanks for your help.

    Deb

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 28, 2013 @ 13:24
    Dennis Aaen
    0

    Okay So if I understand your right here you have an separate scripting file for printing the banner image. And you´re not print the banner inside the template, but by adding a razor macro to the template. if so I think this should be good.

    @if(Model.Content.HasValue("bannerImage")){ 
      var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("bannerImage"));
     
    <imgsrc="@mediaItem.GetPropertyValue("umbracoFile")"alt="@mediaItem.GetPropertyValue("Name")"/>
      }

    The documentation for media picker in razor and other datatypes can be found here:

    http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors/Media-Picker

    Hope this helps

    /Dennis

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 14:41
    Debbie Lawrenson
    0

    Hi Dennis,

    Thanks but I'm not sure if we're talking about the same thing here.

    The original code I had on my template was this:

    Which worked fine.

    You then suggested doing it a different way using Mvc but currently if I put that code onto my template it doesn't work. Same with the above.

    If I put that code on my template I get this @if(Model.Content.HasValue("bannerImage")){ var mediaItem = in place of the image.

    All I want to do is get the chosen bannerImage image and print it on the page.

    Many thanks,

    Deb

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 28, 2013 @ 14:58
    Dennis Aaen
    0

    Okay if I was you I would just use the umbraco:image control. witch was introduced back in umbraco 4.11.

    So in your template where you want the image to display then use this:

    <umbraco:image runat="server" field="bannerImage"/>

    As Rich mentioned in his post.

    Or you have to convert your old master templates to MVC views as I see it. Documentation is here:

    http://our.umbraco.org/documentation/Reference/Templating/managing-templates.

    But if you just want to get further, then just use what Rich mentioned in his post.

    /Dennis

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 15:00
    Debbie Lawrenson
    0

    Okay thanks Dennis will do.

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 28, 2013 @ 15:07
    Dennis Aaen
    0

    Or here is a cheet sheet for converting Masterpages to Views maybe this can help you when you will have a look how it can be done.

    I haven´t had the change myself to work with mvc yet. I have only worked with razor on Webforms (Masterpages).

    http://our.umbraco.org/documentation/cheatsheets/masterpagestoviews or here is an PDF version http://our.umbraco.org/documentation/cheatsheets/Masterpages2Views.pdf

    /Dennis

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 18:01
    Debbie Lawrenson
    0

    Last question Dennis I promise!

    I have got an external script file like so:

    @using System.Drawing;
    
    <div id="da-slider" class="da-slider">
            @foreach (var item in Model.PromoRepositories.First().PromoItems.Where("Visible"))
            {
    
                <div class="da-slide">
                    @item.bigMessage
                    @item.messageSubtext
                    <div class="da-img"><img src="@item.GetPropertyValue("bannerImage")" alt="@item.GetPropertyValue("Name")" /></div>
                </div>
            }
    
    </div>
    <nav class="da-arrows">
        <span class="da-arrows-prev"></span>
        <span class="da-arrows-next"></span>
    </nav>
    

    The property returned for the bannerImage is just the ID rather than the URL. How do I get the URL instead please?

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 28, 2013 @ 18:52
    Dennis Aaen
    0

    Hi Debbie,

    Don´t be sorry to ask questions in here. Asking questions is a good way to get better to Umbraco. When I get in touch with Umbraco I also asked questions about how Umbraco works.

    With this you should get the url to the bannerImage by this:

    <img src="@item.GetPropertyValue("bannerImage").umbracoFile" alt="@item.GetPropertyValue("Name")"/>

    Hope this works for you.

    /Dennis

     

  • Debbie Lawrenson 55 posts 75 karma points
    Oct 28, 2013 @ 18:58
    Debbie Lawrenson
    0

    Hi Dennis,

    Thank you. I actually worked something out! Shock horror!

    I did it this way:

    <img src="@item.Media("bannerImage","umbracoFile")" alt="@item.GetPropertyValue("Name")" />
    

    Which worked well. I hope it's okay to do it this way.

    Thanks so much for your help though.

    Deb

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Oct 28, 2013 @ 19:29
    Dennis Aaen
    0

    Hi Debbie,

    Yeah of course it's alright to do it this way.

    <imgsrc="@item.Media("bannerImage","umbracoFile")"alt="@item.GetPropertyValue("Name")"/>

    I´m glad that you find a way to print the path to the image

    /Dennis

Please Sign in or register to post replies

Write your reply to:

Draft