Copied to clipboard

Flag this post as spam?

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


  • Frost 70 posts 99 karma points
    Jan 31, 2012 @ 19:44
    Frost
    0

    Displaying an image with Razor from Dynamic Node

    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 4908 posts 12265 karma points MVP 4x admin c-trib
    Jan 31, 2012 @ 21:10
    Jeroen Breuer
    0

    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 70 posts 99 karma points
    Feb 01, 2012 @ 03:22
    Frost
    0

    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 4908 posts 12265 karma points MVP 4x admin c-trib
    Feb 01, 2012 @ 09:05
    Jeroen Breuer
    0

    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 70 posts 99 karma points
    Feb 01, 2012 @ 21:23
    Frost
    0

    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 4908 posts 12265 karma points MVP 4x admin c-trib
    Feb 01, 2012 @ 21:28
    Jeroen Breuer
    0

    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 70 posts 99 karma points
    Feb 01, 2012 @ 23:03
    Frost
    0

    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 4908 posts 12265 karma points MVP 4x admin c-trib
    Feb 01, 2012 @ 23:23
    Jeroen Breuer
    0

    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 70 posts 99 karma points
    Feb 02, 2012 @ 00:19
    Frost
    0

    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 4908 posts 12265 karma points MVP 4x admin c-trib
    Feb 02, 2012 @ 09:05
    Jeroen Breuer
    0

    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 70 posts 99 karma points
    Feb 02, 2012 @ 19:54
    Frost
    0

    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.

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Feb 02, 2012 @ 22:17
    Jeroen Breuer
    1

    Hmm maybe we need to try something else. How about testing if this works:

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

    Jeroen

  • Frost 70 posts 99 karma points
    Feb 02, 2012 @ 23:41
    Frost
    0

    That did the trick ... thank you!!!!!

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Feb 03, 2012 @ 11:13
    Jeroen Breuer
    0

    Well if only that code works it means your node (n) isn't dynamic. Do you still use this?

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

    If you change that to this you see we use the word dynamic:

    @foreach(dynamic n in nodes){
    articleDate = n.uBlogsyPostDate;

    Because it's dynamic you can do stuff like n.previewImage which otherwise wouldn't work. So if you make sure you use dynamic node this code should also work again:

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

    Jeroen

  • Frost 70 posts 99 karma points
    Feb 03, 2012 @ 23:41
    Frost
    0

    Ah .. I thought that the dynamic node was already declared in my cshmtl, but now I understand that I didn't have it working at that part. I tried fixing it the way you prescribed, but it messes up some other stuff so I'll keep it as is for now, but next time I'll know what to do :)

Please Sign in or register to post replies

Write your reply to:

Draft