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?
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;
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);
@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")){
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?)
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.
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?)
@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")){
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>
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.
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?
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.
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.
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:
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 :)
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!!
What version of Umbraco are you using? If it's 4.7.1 or higher you can use Library in Razor.
Try this:
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
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!
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
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:
The xml part where previewImage is used and also it's parent. That might show why it doesn't work in your code :).
Jeroen
Ah, I supposed I could have figured that out on my own :P
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
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?
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
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
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.
Hmm maybe we need to try something else. How about testing if this works:
<img src='@Library.MediaById(n.GetProperty("previewImage").Value).umbracoFile' />Jeroen
That did the trick ... thank you!!!!!
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:
Jeroen
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 :)
is working on a reply...