macro in data largesrc etc

BEWD 90 posts 303 karma points

Jan 10, 2016 @ 18:09

Macro in data-largesrc etc

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 4500 posts 18255 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 90 posts 303 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 4500 posts 18255 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 90 posts 303 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 4500 posts 18255 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 90 posts 303 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 4500 posts 18255 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 90 posts 303 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 90 posts 303 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 4500 posts 18255 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 90 posts 303 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...

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?

Macro in data-largesrc etc