Displaying an image of type Upload only if an image is present
Hi there
I am very new to Umbraco and razor scripting and am trying to get it to
work but have spent the last hour+ searching and trying various
things... but nothing has resulted in success. :(
I have an image field with an alias of 'mainImage' that I am trying to insert / display inside my template ONLY if an image is present / has been loaded against that field.
I am trying to do this inside a scripting file (not an XSLT macro) but am having no luck.
This is my code in my scripting file - please can you help me figure out how I can get the src attribute to get the file correctly?
@inherits umbraco.MacroEngines.DynamicNodeContext
@{ if (Model.Content.HasValue("mainImage")){ var imagePath = @Model.Content.GetPropertyValue("mainImage"); } }
I am pulling my script file into my template like this. This part seems to be working as it does pull in test html that I write out if I add something inside the if statement.
I can see from your code is that you´re using macro based razor scripts and webforms (If I´m right I hope so :-) ).
If so you could try using this:
@inherits umbraco.MacroEngines.DynamicNodeContext @{ if (Model.HasValue("mainImage")){ var imagePath = Model.mainImage; var media = Library.MediaById(imagePath ); <img src="@media.umbracoFile" alt="@media.Name" /> } }
I've just testedthe codeas I suggestedyou earlier. And I can´t get it work with the upload datatype.But I have find a method the get it work with the upload datatype. You could do it this way:
This will display the image that is set on the currentpage.
<img src="@Model.MainImage" />
If you wan´t to set the image on e.g. homepage documenttype and printet it on other templates. It could be a site logo. You could do it this way:
<img src="@Model.AncestorOrSelf().MainImage" />
The .Ancestors() and .AncestorsOrSelf() methods returning either all pages above (parents, grandparents and so on) a given page in the content tree, or all pages above the current page, and the page itself.
But isthereany particular reasonwhy you are using theuploaddata typeand notmediapickerdata type.
If you use the media picker data type. You should be able to use the code I provide you in my previous post to print an image.
@inherits umbraco.MacroEngines.DynamicNodeContext @{ if(Model.HasValue("mainImage")){ var imagePath =Model.mainImage; var media =Library.MediaById(imagePath ); <img src="@media.umbracoFile" alt="@media.Name"/> } }
My alias starts with a lowercase but worked when I used an uppercase as in MainImage. Does the casing on aliases not mattter? I thought it did.
With regards to your question about why I am using the Upload type: I received a site that was built by someone else and they have allowed for a main image to be uploaded for an article and the type is Upload. Seeing as it's easier to work with what I've got I decided that it might be easier to stick with Upload type rather than change it to a media picker type.
Most things I found on the web dealt with the media picker type and not with the upload type. In the end your answer was so simple yet last night when I struggled with it - it seemed so hopeless!
Thank you very much. All of this has been really valuable learning for me. Hopefully others will benefit too!
I´m happy to hear that my suggestion was valuable learning to you, and I´m happy that I could help you solve your problem. As you said hopefully others will benefit too. There for remember to mark this question as solved so other can see was worked for you. Since you are new to the forum, maybe you don´t know how to mark a question as solved.
When you find the person who have gives you the solution, to the problem, there is a green tick. I have made a screenshot from one of my posts to show you where to find the green tick. Just click on the little green tick, and you have marked the question as solved.
I saw thatyou have a questionabout ifit mattersthataliaseslowercaseor not.As I remember itfromUmbracotrainingearlier this year,our coachtold us thatthey have madesupport forboth variants, sothe aliasis notcase sensitive.
And that is also what my test, shows me and what you are saying. That we can print the image with both these lines.
<img src="@Model.MainImage"/>
And
<img src="@Model.mainImage"/>
I think it's to make it easier for developers that's not are familiar camel casing. E.g in Pascal are the first letter in each word is capitalized.
Displaying an image of type Upload only if an image is present
Hi there
I am very new to Umbraco and razor scripting and am trying to get it to work but have spent the last hour+ searching and trying various things... but nothing has resulted in success. :(
I have an image field with an alias of 'mainImage' that I am trying to insert / display inside my template ONLY if an image is present / has been loaded against that field.
I am trying to do this inside a scripting file (not an XSLT macro) but am having no luck.
This is my code in my scripting file - please can you help me figure out how I can get the src attribute to get the file correctly?
@inherits umbraco.MacroEngines.DynamicNodeContext
@{
if (Model.Content.HasValue("mainImage")){
var imagePath = @Model.Content.GetPropertyValue("mainImage");
}
}
I am pulling my script file into my template like this. This part seems to be working as it does pull in test html that I write out if I add something inside the if statement.
<umbraco:Macro Alias="DisplayMainArticleImage" runat="server"></umbraco:Macro>
Any help / advice will be very much appreciated. Would love to crack this even though it's a very basic thing :)
USING: Umbraco v6.0.5 (Assembly version: 1.0.4869.23219)
Hi Amourie and welcome to our :),
I can see from your code is that you´re using macro based razor scripts and webforms (If I´m right I hope so :-) ).
If so you could try using this:
I hope this will work for you.
/Dennis
Hi Amourie,
I've just tested the code as I suggested you earlier. And I can´t get it work with the upload datatype.But I have find a method the get it work with the upload datatype. You could do it this way:
This will display the image that is set on the currentpage.
If you wan´t to set the image on e.g. homepage documenttype and printet it on other templates. It could be a site logo. You could do it this way:
The .Ancestors() and .AncestorsOrSelf() methods returning either all pages above (parents, grandparents and so on) a given page in the content tree, or all pages above the current page, and the page itself.
But is there any particular reason why you are using the upload data type and not media picker data type.
If you use the media picker data type. You should be able to use the code I provide you in my previous post to print an image.
/Dennis
Hi Dennis
Brilliant brilliant brilliant - thank you very much. This works 100%
@{
if(Model.HasValue("mainImage")){
<div class="largeImg">
<img src="@Model.MainImage" />
</div>
}
}
My alias starts with a lowercase but worked when I used an uppercase as in MainImage. Does the casing on aliases not mattter? I thought it did.
With regards to your question about why I am using the Upload type: I received a site that was built by someone else and they have allowed for a main image to be uploaded for an article and the type is Upload. Seeing as it's easier to work with what I've got I decided that it might be easier to stick with Upload type rather than change it to a media picker type.
Most things I found on the web dealt with the media picker type and not with the upload type. In the end your answer was so simple yet last night when I struggled with it - it seemed so hopeless!
Thank you very much. All of this has been really valuable learning for me. Hopefully others will benefit too!
Amourie
Hi Amourie,
I´m happy to hear that my suggestion was valuable learning to you, and I´m happy that I could help you solve your problem. As you said hopefully others will benefit too. There for remember to mark this question as solved so other can see was worked for you. Since you are new to the forum, maybe you don´t know how to mark a question as solved.
When you find the person who have gives you the solution, to the problem, there is a green tick. I have made a screenshot from one of my posts to show you where to find the green tick. Just click on the little green tick, and you have marked the question as solved.
/Dennis
Hi Amourie,
I saw that you have a question about if it matters that aliases lowercase or not. As I remember it from Umbraco training earlier this year, our coach told us that they have made support for both variants, so the alias is not case sensitive.
And that is also what my test, shows me and what you are saying. That we can print the image with both these lines.
<img src="@Model.MainImage"/>And
<img src="@Model.mainImage"/>I think it's to make it easier for developers that's not are familiar camel casing. E.g in Pascal are the first letter in each word is capitalized.
/Dennis
Thanks for answering Dennis. :) Much appreciated.
is working on a reply...