x First time here? Check out the FAQ
  • Avatar70posts99karma

    Displaying an image with Razor from Dynamic Node

    Frost started this topic January 31, 2012 @ 07:44, Go directly to the topic solution

    I'm customizing the great uBlogsy and ran into a problem that I have spent almost two days on with no success.

    The homepage has a macro (pointing to a .cshtml file) that lists recent posts. Each post in this list has a default image thumbnail next to it, which is replaced if another image is selected with the media picker, alias of previewImage. The title and URL of the articles are easy to grab, as is the ID of previewImage, but how do I get the image to display?

    @using System.Linq
    @using System.Xml.Linq
    @using umbraco.MacroEngines
    @using uBlogsy.Web.Extensions
    @using uBlogsy.Web.Helpers
    @using System.Text.RegularExpressions
    @using System.Globalization;
    @{

        int count = int.Parse(@Parameter.ItemCount);

        List<DynamicNode> nodes;

        var tag = Request.QueryString["tag"];
        var category = Request.QueryString["category"];
        var author = Request.QueryString["author"];
        var searchTerm = Request.QueryString["search"];
        var previewImage= Request.QueryString["previewImage"];  
        int page = int.TryParse(Request.QueryString["page"], out page) ? page : 1;

        IEnumerable<DynamicNode> posts = GetPosts(Model.Id, page-1, count);
        
      ...
     
        int currentDay;
        DateTime articleDate;
        DynamicNode n;
     
        for (int i = 0; i < nodes.Count();)
        {
          n = nodes[i];
          var currentDate =  DateTime.Parse(n.GetProperty("uBlogsyPostDate").Value);
          DateTimeFormatInfo info = DateTimeFormatInfo.GetInstance(null);
          
          
           <div class="breakingNewsDay">
         <!-- @info.GetDayName(currentDate.DayOfWeek), @currentDate.ToString().FormatDateTime("MMM dd yyyy")-->
            <h5 class="breakingNewsList">@currentDate.ToString().FormatDateTime("MMM dd, yyyy")</h5>
             <ul class="breakingNews">
         
              
               @for (; i < nodes.Count(); i++){
                 n = nodes[i];                   
                 articleDate = DateTime.Parse(n.GetProperty("uBlogsyPostDate").Value);           
                 if (articleDate.Day != currentDate.Day){break;}
                 if (n.HasValue("previewImage")){

       
       <div class="listPostImagePreview">article image
                                                 
    <img src='?????' />

       </div>
                   }
                 else {
                       <div class="listPostImagePreview">default cover</div>
                       }    
                  <li style="height:100px;">
                    <div>
                     <h4>
                      <a href="@n.Url">
                        @n.GetProperty("uBlogsyContentTitle").Value
                      </a>
                     </h4>
                    </div>             
                  </li>
              }
             </ul>
          </div>
       }
     }
    ...

    I have tried the following combinations to no avail:

    <img src='@n.MediaById("previewImage")' />
    This says 'no id'

    <img src='@n.GetMedia("previewImage").Value.ToString()' />
    This doesn't like "GetMedia"

    <img src='@n.GetProperty("previewImage").Value.ToString()' />
    This just outputs ID

    <img src='@n.previewImage("umbracoFile")' />
    Error reads "does not contain definition for 'previewImage"

    <img src='@previewImage("umbracoFile")' />
    Error reads that 'previewImage' is a 'variable' but is used like a 'method'

    <img src='@n.GetProperty("previewImage").umbracoFile' />
    Error CS1061: 'umbraco.interfaces.IProperty' does not contain a definition for 'umbracoFile' and no extension method 'umbracoFile' accepting a first argument of type 'umbraco.interfaces.IProperty' could be found (are you missing a using directive or an assembly reference?)

    <img src='@n.MediaById("previewImage").umbracoFile' />
    Error CS1061: 'umbraco.MacroEngines.DynamicNode' does not contain a definition for 'umbracoFile' and no extension method 'umbracoFile' accepting a irst argument of type 'umbraco.MacroEngines.DynamicNode' could be found (are you missing a using directive or an assembly reference?)

    Thanks for your help!!


  • Jeroen Breuer posted this reply January 31, 2012 @ 09:10

    What version of Umbraco are you using? If it's 4.7.1 or higher you can use Library in Razor.

    Try this:

    using umbraco.MacroEngines.Library;

    @Library.MediaById(n.previewImage).umbracoFile

    If previewImage is the picker you can use n.previewImage to get the id. This you need to pass in Library.MediaById to get the media as DynamicXml. On that you can use .umbracoFile again to get the actuall url :).

    If you want to have the media xml instead of just the id you can use DAMP for that.

    Jeroen


  • Frost posted this reply February 1, 2012 @ 03:22

    Ah yes, I forgot to mention, Umbraco 4.7.1 and IIS 7.5.

    That looks great and makes sense, but now it doesn't seem to be recognizing previewImage.

    Don't think I need DAMP for this.

    Any other ideas?

    Thanks!

    Error CS1061: 'umbraco.MacroEngines.DynamicNode' does not contain a 
    definition for 'previewImage' and no extension method 'previewImage' 
    accepting a first argument of type 'umbraco.MacroEngines.DynamicNode' 
    could be found (are you missing a using directive or an assembly 
    reference?)
    @using System.Linq
    @using System.Xml.Linq
    @using umbraco.MacroEngines
    @using uBlogsy.Web.Extensions
    @using uBlogsy.Web.Helpers
    @using System.Text.RegularExpressions
    @using System.Globalization
    @using umbraco.MacroEngines.Library;

    @{
    ...     
     <div class="breakingNewsDay">
         <!-- @info.GetDayName(currentDate.DayOfWeek), @currentDate.ToString().FormatDateTime("MMM dd yyyy")-->
            <h5 class="breakingNewsList">@currentDate.ToString().FormatDateTime("MMM dd, yyyy")</h5>
             <ul class="breakingNews">
        
             
               @for (; i < nodes.Count(); i++){
                 n = nodes[i];                  
                 articleDate = DateTime.Parse(n.GetProperty("uBlogsyPostDate").Value);           
                 if (articleDate.Day != currentDate.Day){break;}
                 if (n.HasValue("previewImage")){

      
       <div class="listPostImagePreview">article image
                                                
    <img src='@Library.MediaById(n.previewImage).umbracoFile' />

       </div>
                   }
                 else {
                       <div class="listPostImagePreview">default cover</div>
                       }   
                  <li style="height:100px;">
                    <div>
                     <h4>
                      <a href="@n.Url">
                        @n.GetProperty("uBlogsyContentTitle").Value
                      </a>
                     </h4>
                    </div>
                   
                  </li>
              }
             </ul>
          </div>

  • Jeroen Breuer posted this reply February 1, 2012 @ 09:05

    Could you perhaps show part of your umbraco xml file (found in /App_Data/umbraco.config)? That might help to see what goes wrong.

    Also did you know you can use a foreach loop?

    How it's now:

    @for (; i < nodes.Count(); i++){
    n = nodes[i];
    articleDate = DateTime.Parse(n.GetProperty("uBlogsyPostDate").Value); 

    With foreach:

    @foreach(dynamic n in nodes){
    articleDate = DateTime.Parse(n.GetProperty("uBlogsyPostDate").Value);

    Jeroen


  • Frost posted this reply February 1, 2012 @ 09:23

    Thanks for the note! This started out as a template and we've made a lot of changes so there's a probably a few places that could use improvement like that.

    Which part of the xml file would be helpful to see? Here's a couple selections:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE root[
    <!ELEMENT MediaGallery ANY>
    <!ATTLIST MediaGallery id ID #REQUIRED>
    <!ELEMENT uBlogsyPost ANY>
    <!ATTLIST uBlogsyPost id ID #REQUIRED>
    <!ELEMENT NormalPage ANY>
    <!ATTLIST NormalPage id ID #REQUIRED>
    <!ELEMENT PressRelease ANY>
    <!ATTLIST PressRelease id ID #REQUIRED>
    <!ELEMENT Redirect ANY>
    <!ATTLIST Redirect id ID #REQUIRED>
    <!ELEMENT RW ANY>
    <!ATTLIST RW id ID #REQUIRED>
    <!ELEMENT umediaSlider ANY>
    <!ATTLIST umediaSlider id ID #REQUIRED>
    <!ELEMENT umediaSliders ANY>
    <!ATTLIST umediaSliders id ID #REQUIRED>
    <!ELEMENT uBlogsyBaseDocType ANY>
    <!ATTLIST uBlogsyBaseDocType id ID #REQUIRED>
    <!ELEMENT uBlogsyBasePage ANY>
    <!ATTLIST uBlogsyBasePage id ID #REQUIRED>
    <!ELEMENT uBlogsyComment ANY>
    <!ATTLIST uBlogsyComment id ID #REQUIRED>
    <!ELEMENT uBlogsyFolderBlog ANY>
    <!ATTLIST uBlogsyFolderBlog id ID #REQUIRED>
    <!ELEMENT uBlogsyFolderComment ANY>
    <!ATTLIST uBlogsyFolderComment id ID #REQUIRED>
    <!ELEMENT uBlogsyFolderMonth ANY>
    <!ATTLIST uBlogsyFolderMonth id ID #REQUIRED>
    <!ELEMENT uBlogsyFolderPage ANY>
    <!ATTLIST uBlogsyFolderPage id ID #REQUIRED>
    <!ELEMENT uBlogsyFolderYear ANY>
    <!ATTLIST uBlogsyFolderYear id ID #REQUIRED>
    <!ELEMENT uBlogsyLanding ANY>
    <!ATTLIST uBlogsyLanding id ID #REQUIRED>
    <!ELEMENT uBlogsyPage ANY>
    <!ATTLIST uBlogsyPage id ID #REQUIRED>
    <!ELEMENT uBlogsyRSS ANY>
    <!ATTLIST uBlogsyRSS id ID #REQUIRED>

    ]>
    <root id="-1">
      <uBlogsyLanding id="1151" parentID="-1" level="1" writerID="0" creatorID="0" nodeType="1150" template="1128" sortOrder="0" createDate="2011-05-15T12:21:13" updateDate="2012-01-13T13:18:41" nodeName="Roadracing World" urlName="roadracing-world" writerName="admin" creatorName="admin" path="-1,1151" isDoc="">

        <uBlogsyContactEmail />
        <uBlogsyBlogLinks><![CDATA[http://feeds.feedburner.com/UmbracoBlog
    http://feeds.feedburner.com/midcodecrisis

    ]]></uBlogsyBlogLinks>
        <uBlogsyContentFooter>Powered by &lt;a href="http://knovolo.com"&gt;Knovolo&lt;/a&gt;.</uBlogsyContentFooter>
        <uBlogsySpamAkismetAPIKey />
        <uBlogsyRssDescription><![CDATA[Description]]></uBlogsyRssDescription>
        <uBlogsyRssCopyright>Mid-code Crisis</uBlogsyRssCopyright>

        <slideshowSelector>

        </slideshowSelector>
        <featuredPhoto>1287</featuredPhoto>
        <uBlogsyContentTitle>Roadracing World</uBlogsyContentTitle>
        <uBlogsyContentBody><![CDATA[]]></uBlogsyContentBody>
        <uBlogsySeoKeywords />
        <uBlogsySeoDescription><![CDATA[]]></uBlogsySeoDescription>
        <umbracoNaviHide>1</umbracoNaviHide>
        <umbracoRedirect />
        <umbracoInternalRedirectId />
        <umbracoUrlName />
        <umbracoUrlAlias />
        <uBlogsyFolderBlog id="1154" parentID="1151" level="2" writerID="0" creatorID="0" nodeType="1148" template="1106" sortOrder="0" createDate="2011-05-31T13:36:29" updateDate="2011-11-29T14:07:51" nodeName="Racing News Articles" urlName="racing-news-articles" writerName="admin" creatorName="admin" path="-1,1151,1154" isDoc="">
          <uBlogsyFolderYear id="1165" parentID="1154" level="3" writerID="0" creatorID="0" nodeType="1145" template="1106" sortOrder="1" createDate="2011-06-07T18:23:44" updateDate="2011-11-29T14:08:52" nodeName="International Racing" urlName="international-racing" writerName="admin" creatorName="admin" path="-1,1151,1154,1165" isDoc="">


  • Jeroen Breuer posted this reply February 1, 2012 @ 09:28

    The xml part where previewImage is used and also it's parent. That might show why it doesn't work in your code :).

    Jeroen


  • Frost posted this reply February 1, 2012 @ 11:03

    Ah, I supposed I could have figured that out on my own :P

            <uBlogsyPost id="1363" parentID="1172" level="4" writerID="0" creatorID="0" nodeType="1131" template="1124" sortOrder="0" createDate="2012-01-13T13:04:36" updateDate="2012-01-27T15:12:37" nodeName="New BMW Released" urlName="new-bmw-released" writerName="admin" creatorName="admin" path="-1,1151,1154,1172,1363" isDoc="">
              <uBlogsyFolderComment id="1364" parentID="1363" level="5" writerID="0" creatorID="0" nodeType="1147" template="1106" sortOrder="1" createDate="2012-01-13T13:06:39" updateDate="2012-01-13T13:06:39" nodeName="Comments" urlName="comments" writerName="admin" creatorName="admin" path="-1,1151,1154,1172,1363,1364" isDoc="">
                <uBlogsyContentTitle>Comments</uBlogsyContentTitle>
                <uBlogsyContentBody><![CDATA[]]></uBlogsyContentBody>
                <uBlogsySeoKeywords />
                <uBlogsySeoDescription><![CDATA[]]></uBlogsySeoDescription>
                <umbracoNaviHide>0</umbracoNaviHide>
                <umbracoRedirect />
                <umbracoInternalRedirectId />
                <umbracoUrlName />
                <umbracoUrlAlias />
              </uBlogsyFolderComment>
              <uHidsey>...</uHidsey>
              <uBlogsyPostCategories><![CDATA[]]></uBlogsyPostCategories>
              <youTubeVideo><![CDATA[]]></youTubeVideo>
              <videoDescription><![CDATA[]]></videoDescription>
              <embeddedContent>
                <data>
                  <item id="1">
                    <imageArticle propertyid="1">1362</imageArticle>
                    <imageCaption propertyid="2">The new BMW Sport Boxer is very fast.</imageCaption>
                    <imageCredits propertyid="3">Photo courtesy of BWM Motorsports.</imageCredits>
                  </item>
                </data>
              </embeddedContent>
              <previewImage>1362</previewImage>
              <multipleFileUpload><![CDATA[]]></multipleFileUpload>
              <uBlogsyPostTags><![CDATA[BMW,Pacific Raceways,ama pro racing]]></uBlogsyPostTags>
              <uBlogsyPostDate>2012-01-13T13:04:00</uBlogsyPostDate>
              <pressRelease />
              <uBlogsyPostAuthor />
              <uBlogsyContentTitle>New BMW Released</uBlogsyContentTitle>
              <uBlogsyContentBody> ... </uBlogsyContentBody>
              <uBlogsySeoKeywords>New BWM Released</uBlogsySeoKeywords>
              <uBlogsySeoDescription>...</uBlogsySeoDescription>
              <umbracoNaviHide>0</umbracoNaviHide>
              <umbracoRedirect />
              <umbracoInternalRedirectId />
              <umbracoUrlName />
              <umbracoUrlAlias />
            </uBlogsyPost>

  • Jeroen Breuer posted this reply February 1, 2012 @ 11:23

    Hmm it should just work. I don't see anything that might be wrong. Is the media picker mandatory? If no image is selected for one of the nodes that will give an error.

    Jeroen


  • Frost posted this reply February 2, 2012 @ 12:19

    The media picker isn't mandatory. The idea is that there's a default image preview for every item on the list. If a certain image is selected (using Media Picker alias previewImage), that image replaces the default image.

    You can see in the screenshot below that the first two articles have associated images (the image Node ID is displayed), and the bottom two don't. Everything seems to be working fine except for that I can't turn the image Node IDs into actual graphics.

    Does that make sense? Am I missing anything obvious?


  • Jeroen Breuer posted this reply February 2, 2012 @ 09:05

    If you look at the html source of your page what do you see? Does it simply render <img src='' /> at the places where you expected the img url?

    Jeroen


  • Frost posted this reply February 2, 2012 @ 07:54

    Thanks for sticking with me!

    In the image on the previous post, I took out the img tag to show that the image node ID was working. I'm not sure how to turn that node ID into the image URL so that I can stick it in <img> - this is where the code I try doesn't output anything at all, or just throws errors that I listed in the first post.

    When I put

    <img src='@Library.MediaById(n.previewImage).umbracoFile' />

    the cshtml file won't save and throws the error CS1061: 'umbraco.MacroEngines.DynamicNode' does not contain a definition for 'previewImage' and no extension method 'previewImage' accepting a first argument of type 'umbraco.MacroEngines.DynamicNode' could be found (are you missing a using directive or an assembly reference?)

    If I ignore errors, there is an error loading razor script.


Pages:

Please login or Sign up To post replies