cant render image inside of html - Using Umbraco And Getting Started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Matt 353 posts 825 karma points

Sep 09, 2019 @ 09:19

cant render image inside of html?

Using Umbraco And Getting Started

Umbraco 8

I'm trying to add a media picker to my html template but for some reason it doesnt like it inside the divs?

Here is my code;

@inherits Umbraco.Web.Mvc.UmbracoViewPage


@{
    var selection = Umbraco.Content(Guid.Parse("86acfb75-8edc-4d6d-933d-d8c8f555c57a"))
    .ChildrenOfType("newsItem")
    .Where(x => x.IsVisible())
    .OrderByDescending(x => x.CreateDate)
    .Take(4);
}


  <div class="latest-news">
    <div class="div-block-4">
      <h3 class="latest-news-heading">Latest news</h3>
    </div>
    <div class="news-container">
      <div class="w-row">

          @foreach(var item in selection){
        <div class="w-col w-col-3">
          <div class="news-item-wrapper">
            var newsImage = item.Value<IPublishedContent>
            ("newsImage");
                if (newsImage != null)
                {
                 <img src="@newsImage.Url" height="300" width="447">
                 }
             }
            <div class="news-date">
              <div class="news-date-text">@item.CreateDate.ToString("dd MMMM yyyy")</div>
            </div>
            <div class="paragraph">@item.Value("newsTitle")</div>
          </div>
        </div>
}

      </div>
    </div>
  </div>

Which displays the following error;

Compiler Error Message: CS0103: The name 'newsImage' does not exist in the current context

However if I add my mediapicker code just before the closing } it displays, but not where I want the code.

What am I doing wrong?

Thanks

Matt

Copy Link

Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Sep 09, 2019 @ 09:32
100
Hi Matt

It's can be really hard with razor to determine whether a line is html or content or code, but if you start writing some html, then usually you need to start a code block again

@{} to let the parser know you want to do a bit of code

so I think what was happening here is your var newsImage line was not being intepreted as code, whereas if you move that to the first line after the foreach, before you have written out any html, then it should be!
```
      @foreach(var item in selection){
        var newsImage = item.Value<IPublishedContent>("newsImage");
    <div class="w-col w-col-3">
      <div class="news-item-wrapper">
            @if (newsImage != null)
            {
             <img src="@newsImage.Url" height="300" width="447">
             }

        <div class="news-date">
          <div class="news-date-text">@item.CreateDate.ToString("dd MMMM yyyy")</div>
        </div>
        <div class="paragraph">@item.Value("newsTitle")</div>
      </div>
    </div>
}
```
Copy Link
Matt 353 posts 825 karma points

Sep 09, 2019 @ 12:46

0

Thanks Marc, that did the trick! appreciate the fast response.

Copy Link
is working on a reply...

Please Sign in or register to post replies