cant render image inside of html

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 308 posts 730 karma points

Sep 09, 2019 @ 09:19

cant render image inside of html?

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 1451 posts 9716 karma points MVP 5x 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 308 posts 730 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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies