macro in data largesrc etc - Using Umbraco 7

BEWD 89 posts 301 karma points

Jan 10, 2016 @ 18:09

Macro in data-largesrc etc

Using Umbraco 7

Umbraco 7

Hi

I have asked a very similar question before with no response but I have made it a bit further this time.

I have a single page site which shows events that are held in the venue. There can be any number of event to be displayed at any one time.

I have created a Document type that allows me to add child pages under the Home Page and I have added the following macro to the Hompage:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{ var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"); }
@* OrderBy() takes the property to sort by and optionally order desc/asc         *@
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-duration="500ms">
  <ul id="og-grid" class="og-grid">

@foreach (var item in selection)
{
    <li class="mix other">
                    <a href="javascript:void(0)" data-largesrc='@Umbraco.Field("eventImage")' data-title="Happy Hour" data-description='@Umbraco.Field("eventDescription")'>
                        <img src='@Umbraco.Field("thumbnail")' alt="eventTitle">
                        <div class="hover-mask">
                            <h3>Happy Hour</h3>
                            <span>
                                <i class="fa fa-plus fa-2x"></i>
                            </span>
                        </div>
                    </a>
    </li>
}
 </ul>
 </div>

The Issue is that the Umbraco Fields are not appearing on the page, If I hard code things then it works fine. Style wise the links etc look fine but the images and text do not render?

Any Ideas to help me out? I am really struggling now.

Cheers

Ben

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jan 10, 2016 @ 20:17

Hi Ben,

What if you do something like this would this work for you then.

 <img src='@Umbraco.Field("thumbnail").Url' alt="eventTitle">

If you are using a media picker to pick the image, then the Razor code below should work for you.

@foreach (var item in selection)
{
    <li class="mix other">
                    <a href="javascript:void(0)" data-largesrc='@Umbraco.Field("eventImage")' data-title="Happy Hour" data-description='@Umbraco.Field("eventDescription")'>
                        @if(item.HasValue("thumbnail")){                                         
                            var dynamicMediaItem = Umbraco.Media(item.thumbnail);
                            <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.eventTitle"/>
                        }
                        <div class="hover-mask">
                            <h3>Happy Hour</h3>
                            <span>
                                <i class="fa fa-plus fa-2x"></i>
                            </span>
                        </div>
                    </a>
    </li>
}

Hope this helps,

/Dennis

Copy Link

BEWD 89 posts 301 karma points

Jan 11, 2016 @ 18:41

Hi Dennis

That works spot on for the Thumnail image thank you.

However, Things like the data-description='@Umbraco.Field("eventDescription")' still does not work.

I presume that the data-largesrc='@Umbraco.Field("eventImage")' would be done in the same way?

Thanks for your help

Ben

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jan 11, 2016 @ 18:45

Hi Ben,

What if you do something like this for the event description

@item.eventDescription

For the event image you can use the same approach as for the thumbnail

Hope this helps,

/Dennis

Copy Link

BEWD 89 posts 301 karma points

Jan 11, 2016 @ 19:17

Thanks, I have now got the description working fine.

Im having a few issues getting the eventImage to work though, it just errors.

I will keep trying.

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jan 11, 2016 @ 20:07

Hi Ben,

Which data type are you using to pick the event image?

/Dennis

Copy Link

BEWD 89 posts 301 karma points

Jan 11, 2016 @ 20:09

Media picker, exactly the same as the Thumbnail. It will be down to my coding almost guarantee it.

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jan 11, 2016 @ 20:17

Hi Ben,

What if you are doing something like this.

@foreach (var item in selection)
{
    <li class="mix other">
                    @if(item.HasValue("eventImage")){                                         
                        var largesrc = Umbraco.Media(item.eventImage);


                    <a href="javascript:void(0)" data-largesrc='@largesrc.UmbracoFile' data-title="Happy Hour" data-description='@Umbraco.Field("eventDescription")'>
                        @if(item.HasValue("thumbnail")){                                         
                            var dynamicMediaItem = Umbraco.Media(item.thumbnail);
                            <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.eventTitle"/>
                        }
                        <div class="hover-mask">
                            <h3>Happy Hour</h3>
                            <span>
                                <i class="fa fa-plus fa-2x"></i>
                            </span>
                        </div>
                    </a>
                }
    </li>
}

I must say that I have not tested the piece of code myself.

Hope this helps,

/Dennis

Copy Link

BEWD 89 posts 301 karma points

Jan 11, 2016 @ 20:48

Unfortunately that doesn't work either. I have tried a few variations of this.

@foreach (var item in selection)
{
<li class="mix @item.category">
             @if(item.HasValue("eventImage")){                                         
                var largeSrc = Umbraco.Media(item.eventImage);
                }
                <a href="javascript:void(0)" data-largesrc="@largeSrc.umbracoFile" data-title="@item.eventTitle" data-description="@item.eventDescription">

                 @if(item.HasValue("thumbnail")){                                         
                        var dynamicMediaItem = Umbraco.Media(item.thumbnail);
                        <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.eventTitle"/>
                    }
                    <div class="hover-mask">
                        <h3>@item.eventTitle</h3>
                        <span>
                            <i class="fa fa-plus fa-2x"></i>
                        </span>
                    </div>
                </a>
</li>
 }

I have checked my field names are correct but all I get is

Error loading Partial View script (file: ~/Views/MacroPartials/listEvents.cshtml)

Copy Link

BEWD 89 posts 301 karma points

Jan 11, 2016 @ 20:48

I do appreciate your time on this.

I am 99% further than I was this time yesterday so thank you.

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Jan 11, 2016 @ 20:54

Hi Ben,

You are welcome, try this updated version

@foreach (var item in selection)
{
<li class="mix @item.category">
             @if(item.HasValue("eventImage")){                                         
                var largeSrc = Umbraco.Media(item.eventImage);

                <a href="javascript:void(0)" data-largesrc="@largeSrc.umbracoFile" data-title="@item.eventTitle" data-description="@item.eventDescription">

                 @if(item.HasValue("thumbnail")){                                         
                        var dynamicMediaItem = Umbraco.Media(item.thumbnail);
                        <img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.eventTitle"/>
                    }
                    <div class="hover-mask">
                        <h3>@item.eventTitle</h3>
                        <span>
                            <i class="fa fa-plus fa-2x"></i>
                        </span>
                    </div>
                </a>
      }
</li>
 }

Hope this works.

/Dennis

Copy Link

BEWD 89 posts 301 karma points

Jan 11, 2016 @ 20:59

Dennis that works perfectly. Thank you very very much for your help.

The Umbraco Community are a great help and very patient with those that are not as experienced as others.

Reading the code it makes complete sense now, I guess I have just been looking at it too long.

Cheers

Ben

Copy Link

is working on a reply...

Flag this post as spam?

Macro in data-largesrc etc