rendering a single image

Ajju 25 posts 148 karma points

Feb 07, 2018 @ 10:52

Rendering a Single Image

Dears,

I have a Blog having properties, Title, Image, Blog content and etc.. I want to display all blog main page to navigate to respective blog pages

Here is the code

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.NewsList>
@using ContentModels = Umbraco.Web.PublishedContentModels; 
@{  Layout  = "Master.cshtml";
 }
 @foreach (var page in CurrentPage.Children)
                {
                <div class="blogblk">
                    <a href="@page.Url">
                        <div class="blogimg"><img src="*@Iam stuck here to display the image url*"></div>
                        <div class="blogdesc">
                            <h4>@page.bTitle</h4>
                            <p>@page.bExcerpt</p>
                        </div>
                    </a>
                </div>
                }

I am getting all other properties, except Image URL. appreciate your advice, where i am going wrong

Thanks Aju

Copy Link

Bent Holz 100 posts 273 karma points

Feb 07, 2018 @ 11:03

Would this do the trick?

<div class="blogblk">
                    <a href="@page.Url">
                        <div class="blogimg">

@{
        var mediaGet1 = Model.Content.GetPropertyValue<IPublishedContent>("imageAlias");
        if (mediaGet1 != null)
        {
          <img src="@mediaGet1.GetPropertyValue("umbracoFile")" />
        }
    }


</div>
                        <div class="blogdesc">
                            <h4>@page.bTitle</h4>
                            <p>@page.bExcerpt</p>
                        </div>
                    </a>
                </div>

Remember to replace "imageAlias"

Copy Link

Ajju 25 posts 148 karma points

Feb 07, 2018 @ 11:36

Hello Bent,

Thanks for your reply, I am getting the following error

[NullReferenceException: Object reference not set to an instance of an object.] Umbraco.Web.PublishedContentExtensions.GetPropertyValue(IPublishedContent content, String alias) +4

And I am using Media Picker at backoffice

Thanks

Copy Link

Bent Holz 100 posts 273 karma points

Feb 07, 2018 @ 11:41

What does your code look like now?

Copy Link

Ajju 25 posts 148 karma points

Feb 07, 2018 @ 12:07

    <div class="bloglist">
                @foreach (var page in CurrentPage.Children)
                {
                <div class="blogblk">
                    <a href="@page.Url">

                        <div class="blogimg">
                            @{
    var mUrl = Model.Content.GetPropertyValue<IPublishedContent>("bImage");
    if (mUrl != null)
    {

                            <img src="@mUrl.GetPropertyValue("umbracoFile")" />
                             }
}

                        </div>

                        <div class="blogdesc">
                            <h4>@page.bTitle</h4>
                            <p>@page.bExcerpt</p>
                        </div>
                    </a>
                </div>
                }

            </div>

Copy Link

Garðar Þorsteinsson 119 posts 566 karma points

Feb 07, 2018 @ 12:24

        @foreach (var page in Model.Content.Children.Where(x => x.IsVisible()))
        {
            <div class="blogblk">
                <a href="@page.Url">

                    <div class="blogimg">
                        @{
                            var media = page.GetPropertyValue<IPublishedContent>("bImage");

                            if (media != null)
                            {

                                <img src="@media.Url" />
                            }
                        }

                    </div>

                    <div class="blogdesc">
                        <h4>@page.GetPropertyValue("bTitle")</h4>
                        <p>@page.GetPropertyValue("bExcerpt")</p>
                    </div>
                </a>
            </div>
        }

Or try this

        @foreach (var page in Model.Content.Children.Where(x => x.IsVisible()))
        {
            <div class="blogblk">
                <a href="@page.Url">

                    <div class="blogimg">
                        @{
                            var mediaID = page.GetPropertyValue<string>("bImage");

                            var media = Umbraco.TypedMedia(mediaID);

                            if (media != null)
                            {

                                <img src="@media.Url" />
                            }
                        }

                    </div>

                    <div class="blogdesc">
                        <h4>@page.GetPropertyValue("bTitle")</h4>
                        <p>@page.GetPropertyValue("bExcerpt")</p>
                    </div>
                </a>
            </div>
        }

Copy Link

Ajju 25 posts 148 karma points

Feb 07, 2018 @ 13:45

Hello Garðar Þorsteinsson,

Very thanks for your reply and both snippets works great. Fantastic.

Thank you.

One more thing, After navigating to respective blog post , I want to give URL to come back to Blog Main Page, can u pls add that too

Copy Link

Garðar Þorsteinsson 119 posts 566 karma points

Feb 08, 2018 @ 09:40

If you are meaning a link from the blog to the blog parent page then you could use this code on the blog page.

@Model.Content.Parent.Url

or if the page is not the first parent or could be on any level you could use this

@Model.Content.Ancestor("blogMainDocTypeAlias").Url

Copy Link

Ajju 25 posts 148 karma points

Feb 08, 2018 @ 09:53

Thank you..

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.

Flag this post as spam?

Rendering a Single Image