pulling image url from a block list into a parent page

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

Nick 84 posts 451 karma points

Mar 05, 2023 @ 12:10

Using Umbraco And Getting Started

Umbraco 9

Hi,

I have another issue hopefully somebody could help with.

I have a parent hub page called Solutions which shows preview tiles of the child pages which brings in page title, url and the hero image, the code of the page is below. The child pages uses a block list to render and sort the content see image. I want to pull through the image url of the Page Hero Banner from the Child Block list pages into the Solutions parent page how can I achieve this? Any help is much appreciated as always. Despite a few set backs I am enjoying my Umbraco journey :-)

enter image description here

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.ProductHubPage>
    @using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
    @{
        Layout = "Master.cshtml";
    }
    @{ 
        var currentPage = Umbraco.AssignedContentItem.Children();
    }

    <!-- Product Details Post End -->
    <!-- Product Start -->
    <div class="section skill-section skill-section-5">
        <div class="container">
            <!--  Skill Image Wrap Start -->
            <div class="skill-img-wrap">
                <div class="row">
                   @foreach (var item in currentPage)
                    {

                        <div class="col-lg-6">
                            <!--  Skill Image Item Start -->
                            <div class="skill-img-item">
                                <div class="skill-img text-center">
                                    <a class="image" href="@item.Url()">
                                        <img src=""/>
                                    </a>
                                    <div class="skill-img-text">
                                        <h3 class="title">
                                            <a href="@item.Url()">@item.Name</a>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <!--  Skill Image Item Start -->
                        </div>
                    }
                </div>
            </div>
            <!--  Skill Image Wrap End -->
        </div>
    </div>

Copy Link

Yari Mariën 4 posts 98 karma points c-trib

Mar 05, 2023 @ 16:44
0
You can get the image from the blocklist using this line of code:
```
var image = ((BlockHeaderImage)(item.BlockListProperty.FirstOrDefault(block => block.Content.ContentType.Alias == BlockHeaderImage.ModelTypeAlias)?.Content))?.ImageProperty
```
Where BlockHeaderImage is the name of the class of the Page Banner Hero block.

And BlockListProperty is the name of the "Content" blocklist property on your child page Doctype.

And ImageProperty is the name of the image property on the Page Banner Hero block.
Copy Link
Nick 84 posts 451 karma points

Mar 15, 2023 @ 08:58
100
Many thanks Yari,

I couldn't get the above to work, but I did use it as a basic structure and finally mad eit to work with the following:
```
 var blockList = item.Value<BlockListModel>("widgetsCommon").FirstOrDefault(x => x.Content.ContentType.Alias == "pageBannerHero");
```
Thanks gain for the tip
Copy Link
is working on a reply...

Please Sign in or register to post replies