How get image path from @Umbraco.Field .. i have create image insert form in content and won display in my custom template "partial view".. i have try but i just get image id like src="2311".
thanks, i use this in .cshtml template but not work and my web display blank page
this the code :
var imgID = Umbraco.Media(Umbraco.Field("cartImage")).url;
@imgID
i have try to other tricks like use 2 variable but still not work. but if i use like this :
src="Umbraco.Media(@Umbraco.Field("cartImage")).url"
and the result is :
Thank for your reply, i don't know why but after i use your solution my web still give blank page, this my full code :
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@inherits UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq
@if (Model != null && Model.sections != null)
{
var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;
<div class="umb-grid">
@if (oneColumn)
{
foreach (var section in Model.sections)
{
<div class="grid-section">
@foreach (var row in section.rows)
{
@renderRow(row, true);
}
<section id="footer-area" class="sc"></section>
</div>
}
}
else
{
<div class="container">
<div class="row clearfix">
@foreach (var s in Model.sections)
{
<div class="grid-section">
<div class="[email protected] column">
@foreach (var row in s.rows)
{
@renderRow(row, false);
}
</div>
</div>
}
</div>
</div>
}
</div>
}
@helper renderRow(dynamic row, bool singleColumn)
{
if(row.name == "masthead"){
<div id="@row.id" class="sc masthead scroll-img unavigation campaign" @RenderElementAttributes(row)>
@foreach ( var area in row.areas ) {
<div class="container right col-md-5">
@foreach (var control in area.controls) {
if(control.value == "itembutton"){
<div style="display: none;"><img id='img@Umbraco.Field("dataClass")' src="@Umbraco.Media(Umbraco.Field("cartImage")).url" alt="" rel="1948" data-id="1948"></div>
<div id="@Umbraco.Field("dataClass")">
<p>
<a id="@Umbraco.Field("dataId")"
data-id="@Umbraco.Field("dataId")"
data-gav="@Umbraco.Field("dataGAID")"
data-class="@Umbraco.Field("dataClass")"
data-discqty="0"
data-discprice="0"
data-qty="@Umbraco.Field("itemQTY")"
data-price="@Umbraco.Field("itemPrice")"
data-desc="@Umbraco.Field("dataDesc")"
data-name="@Umbraco.Field("itemName")"
href="#" class="@Umbraco.Field("dataClass") add-to-list btn btn-outline">Add to Cart</a>
</p>
</div>
}else if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
}
<div id="[email protected]" class="scroll-wrap"></div>
</div>
<div class="sc cd-secondary-nav unscroll-img unnavigation sticky" id="@Umbraco.Field("itemSKU")">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li><img id="img@Umbraco.Field("dataClass")" src="/media/1309/5-thumbnail.jpg" alt="" rel="1500" data-id="1500" /></li>
<li>
<h4>test product 123123"</h4>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="@Umbraco.Field("dataClass")">
<a id="@Umbraco.Field("dataId")"
data-id="@Umbraco.Field("dataId")" href="#"
class="@Umbraco.Field("dataClass") add-to-list btn btn-outline"
data-gav="@Umbraco.Field("dataGAID")"
data-class="@Umbraco.Field("dataClass")"
data-discqty="0"
data-qty="@Umbraco.Field("itemQTY")"
data-discprice="0"
data-price="@Umbraco.Field("itemPrice")"
data-desc="@Umbraco.Field("dataDesc")"
data-name="@Umbraco.Field("itemName")">Add to list</a></li>
</ul>
</div>
</div>
}else if(row.name == "note-image"){
<div id="@row.id" class="sc how-made row left">
@foreach ( var area in row.areas ) {
<div class="col-md-6">
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
}
</div>
}else if(row.name == "image-note"){
<div id="@row.id" class="sc how-made row right">
@foreach ( var area in row.areas ) {
<div class="col-md-6">
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
}
</div>
}else if(row.name == "top-note-image"){
<div id="@row.id" class="sc how-made unscroll-img unnavigation row center">
<div class="col-md-12">
@foreach ( var area in row.areas ) {
<div>
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
}
</div>
</div>
}else if(row.name == "bottom-note-image"){
<div id="@row.id" class="sc how-made unscroll-img unnavigation row center">
@foreach ( var area in row.areas ) {
<div class="col-md-12">
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
}
</div>
}else if(row.name == "next-page"){
<div id="@row.id" class="sc patron unscroll-img unnavigation">
@foreach ( var area in row.areas ) {
<div class="container">
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
}
</div>
}else if(row.name == "become-member"){
<div id="@row.id" class="sc patron-small unscroll-img unavigation">
@foreach ( var area in row.areas ) {
<div class="container">
@foreach (var control in area.controls) {
if (control !=null && control.editor != null && control.editor.view != null ) {
<text>@Html.Partial("grid/editors/base", (object)control)</text>
}
}
</div>
}
</div>
}
}
@functions
{
public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
{
var attrs = new List<string>();
JObject cfg = contentItem.config;
if(cfg != null)
{
foreach (JProperty property in cfg.Properties())
{
attrs.Add(property.Name + "='" + property.Value.ToString() + "'");
}
}
JObject style = contentItem.styles;
if (style != null)
{
var cssVals = new List<string>();
foreach (JProperty property in style.Properties())
{
cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");
}
if (cssVals.Any())
{
attrs.Add("style='" + string.Join(" ", cssVals) + "'");
}
}
return new MvcHtmlString(string.Join(" ", attrs));
}
}
you can see the code in :
@foreach (var control in area.controls) {
if(control.value == "itembutton"){
<div style="display: none;"><img id='img@Umbraco.Field("dataClass")' src="@Umbraco.Media(Umbraco.Field("cartImage")).url" alt="" rel="1948" data-id="1948"></div>
<div id="@Umbraco.Field("dataClass")">
<p>
i don't know what the error is because i can't get the error reporting from the server and i don't have the access. i just can try and try. to fix this.
You don't see errors because you are using dynamic objects, it's impossible to debug and see errors with dynamics, it's one of the reasons why we do not recommend to do it.
My guess here is that you are pulling the image from the media folders using a picker inside the content/page which simply returns the id of that media item...
To get more data (like the src) from that item you need to do something like...
var myImg = Umbraco.Media(***id[2311]***);
<img src="@myImg.url"/>
How get image path from @Umbraco.Field
Hi..
How get image path from @Umbraco.Field .. i have create image insert form in content and won display in my custom template "partial view".. i have try but i just get image id like src="2311".
can anyone help me.
thanks
Hi Riski
Number is id of media item, you have to get url by additional method
Try this code:
Thanks,
Alex
thanks, i use this in .cshtml template but not work and my web display blank page
this the code :
var imgID = Umbraco.Media(Umbraco.Field("cartImage")).url; @imgID
i have try to other tricks like use 2 variable but still not work. but if i use like this : src="Umbraco.Media(@Umbraco.Field("cartImage")).url" and the result is :
src="Umbraco.Media("2311").url"
thanks
Hi Riski
I think you are starting the razor statement in the wrong place :) Try doing this:
All the best
Rune
Thank for your reply, i don't know why but after i use your solution my web still give blank page, this my full code :
you can see the code in :
i don't know what the error is because i can't get the error reporting from the server and i don't have the access. i just can try and try. to fix this.
thanks Riski
anyone can help me, is the code are correct?
Hi Riski
You don't see errors because you are using dynamic objects, it's impossible to debug and see errors with dynamics, it's one of the reasons why we do not recommend to do it.
What output of this code?
/Alex
hi alex
the output from this code just give me the blank page,
riski
My guess here is that you are pulling the image from the media folders using a picker inside the content/page which simply returns the id of that media item...
To get more data (like the src) from that item you need to do something like...
See https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/media-picker for more info.
Shouldn't it be like this:
@Umbraco.Media(Umbraco.Field("cartImage")).UrlUrl with a capital U ?
https://our.umbraco.org/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Media-Picker
It should be with capital U
i use capital U for umbraco and for url with or not with capital U this work
src="@Umbraco.Media(2311).Url"
*i insert number and its work
but if i use (Umbraco.Field("cartImage")) not number this not work
src="@Umbraco.Media(Umbraco.Field("cartImage")).Url"
solve.
I've found the solution, I fix it by adding tostring().
and call it in img
thanks
is working on a reply...