• Grootste van Nederland en België
  • Voor 22:00 uur besteld, morgen in huis!
  • Gratis verzending vanaf €40,-
Error executing template "Designs/Ongediertewinkel_generated/Paragraph/Carousel.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
at CompiledRazorTemplates.Dynamic.RazorEngine_d04acd44bf8e45f288f526ab15d0ef52.Execute() in D:\home\site\wwwroot\files\Templates\Designs\Ongediertewinkel_generated\Paragraph\Carousel.cshtml:line 17
at RazorEngine.Templating.TemplateBase.RazorEngine.Templating.ITemplate.Run(ExecuteContext context, TextWriter reader)
at RazorEngine.Templating.RazorEngineService.RunCompile(ITemplateKey key, TextWriter writer, Type modelType, Object model, DynamicViewBag viewBag)
at RazorEngine.Templating.RazorEngineServiceExtensions.<>c__DisplayClass16_0.<RunCompile>b__0(TextWriter writer)
at RazorEngine.Templating.RazorEngineServiceExtensions.WithWriter(Action`1 withWriter)
at Dynamicweb.Rendering.RazorTemplateRenderingProvider.Render(Template template)
at Dynamicweb.Rendering.TemplateRenderingService.Render(Template template)
at Dynamicweb.Rendering.Template.RenderRazorTemplate()

1 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>> 2 @using Dynamicweb; 3 @using Dynamicweb.Content.Items; 4 @using Bluedesk.DynamicWeb.ItemTypes; 5 @using Bluedesk.DynamicWeb.ItemTypes.Pages; 6 @using Bluedesk.Tools.DynamicWeb.ExtensionMethods; 7 @using Bluedesk.Tools.Generic.ExtensionMethods 8 @using System.Linq; 9 @using Dynamicweb.Content; 10 11 <!-- FIX NEEDED: behaviour when all the items are full height images (for instance logo slider)?? --> 12 13 @{ 14 Carousel _data = ItemManager.Storage.GetById<Carousel>(Pageview.CurrentParagraph.ItemId ?? "0"); 15 16 var paragraphID = Pageview.CurrentParagraph.ID; 17 int amountColumns = _data.CarouselItems.Count; // Amount of the columns in backend, filled by user 18 var classFullWidth = !_data.Fullwidth ? "container" : "w-full"; // If slider or multicolumn has to be in container or full width of the page 19 } 20 21 @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>> 22 @using Dynamicweb; 23 @using Dynamicweb.Content.Items; 24 @using Bluedesk.DynamicWeb.ItemTypes; 25 26 27 @{ 28 29 var colorService = new ColorSwatchService(); 30 31 string fullWidthContainerClass = _data.Fullwidth ? "" : "container"; 32 33 string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundConfiguration.BackgroundClass) : ""; 34 string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundColor) ? $"background-color: {_data.BackgroundConfiguration.BackgroundColor}; " : ""; 35 backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundImage) ? $"background-image: url({_data.BackgroundConfiguration.BackgroundImage}); " : ""; 36 } 37 38 39 @functions { 40 string getbackgroundclass(string backgroundClass) 41 { 42 return !string.IsNullOrWhiteSpace(backgroundClass) ? string.Format("bg-{0}", backgroundClass) : ""; 43 } 44 } 45 46 @helper CTAParagraphImage(ParagraphImageResizable Image, bool ImageAsBackground, string ImagePosition, bool ParallaxImage, bool Fullwidth, string imagesHeight, int paragraphHeight, double ColumnWidthSize) 47 { 48 if (!string.IsNullOrWhiteSpace(Image.Image)) 49 { 50 51 string image = !string.IsNullOrWhiteSpace(Image.Image) ? Image.Image : null; 52 imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : ""; 53 54 string imageParrallax = ParallaxImage ? "rellax" : ""; 55 string imageAsBackground = ImageAsBackground ? "cta-paragraph__image--is-background" : ""; 56 double imageWidth = 2000; 57 58 imageWidth = Fullwidth ? imageWidth : 1200; 59 imageWidth = imageWidth * ColumnWidthSize; 60 61 string strImageWidth = imageWidth + "px"; 62 string strImageWidthSize = imageWidth + "w"; 63 64 string ImageUrl = "/Admin/Public/GetImage.ashx?Image=" + image + "&Crop=7&Format=webp&Quality=90&Compression=80"; 65 66 if (!string.IsNullOrWhiteSpace(Image.Image)) 67 { 68 <figure class="cta-paragraph__image-container @imageAsBackground @Image.PositionY @Image.PositionX" style="@imagesHeight"> 69 70 <picture class="cta-paragraph__image @Image.BackgroundSize @imageParrallax"> 71 <source media="(max-width: 400px)" srcset="@ImageUrl&Width=400" loading="lazy" width="400" height="500"> 72 <source media="(max-width: 994px)" srcset="@ImageUrl&Width=994" loading="lazy" width="994" height="500"> 73 <img src="@ImageUrl&Width=@imageWidth" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500"> 74 </picture> 75 76 </figure> 77 } 78 } 79 } 80 81 82 @helper CTAParagraphContent(int paragraphID, ParagraphHeader Header, ParagraphHeader SubHeader, ParagraphContent Content, CTAButton Button, ParagraphImage Image, bool strCenterVertical, string ctaSubheaderTextColor, string ctaHeaderTextColor, string ctaContentTextColor) 83 { 84 85 bool hasImage = !string.IsNullOrWhiteSpace(Image.Image) ? true : false; 86 string noImageClass = hasImage ? "" : "no-image"; 87 88 string centerTextClass = strCenterVertical ? "text-center" : ""; 89 string centerContent = !string.IsNullOrWhiteSpace(Image.Image) ? "" : "cta-paragraph__content--center"; 90 91 string buttonIconClass = Pageview.Area.Item["Global_button_icon"] != null ? Pageview.Area.Item["Global_button_icon"].ToString().Replace("+", " ") : "fal fa-arrow-right"; 92 93 string paragraphInstanceClass = "cta-paragraph__content--" + paragraphID; 94 95 if (!string.IsNullOrWhiteSpace(Button.ButtonText) || !string.IsNullOrWhiteSpace(Content.Text) || !string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header"))) 96 { 97 98 <style> 99 .multicolumn--@paragraphID .cta-paragraph .cta-paragraph__subheader, 100 .cta-paragraph--@paragraphID .cta-paragraph__subheader{ color: @ctaSubheaderTextColor !important; } 101 .@paragraphInstanceClass .cta-paragraph__header{ color: @ctaHeaderTextColor !important; } 102 .@paragraphInstanceClass .cta-paragraph__text{ color: @ctaContentTextColor !important; } 103104 </style> 105106 <section class="cta-paragraph__content @paragraphInstanceClass @centerContent @noImageClass"> 107108 <article class="cta-paragraph__content-container @noImageClass"> 109110 @if (!string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header"))) 111 { 112 <header class="cta-paragraph__header @centerTextClass"> 113 @if (SubHeader != null) 114 { 115 @SubHeader.HeaderFormatted("cta-paragraph__subheader") 116 } 117 @Header.HeaderFormatted("cta-paragraph__header") 118 </header> 119 } 120121 @if (!string.IsNullOrWhiteSpace(Content.Text)) 122 { 123 <div class="cta-paragraph__text @centerTextClass">@Content.Text</div> 124 } 125126 </article> 127128 @if (!string.IsNullOrWhiteSpace(Button.ButtonLink) && !string.IsNullOrWhiteSpace(Button.ButtonText)) 129 { 130 string newWindow = Button.NewWindow ? "target='_blank'" : ""; 131 string ariaLabel = !string.IsNullOrWhiteSpace(Button.ButtonAriaLabel) ? "aria-label='" + Button.ButtonAriaLabel + "'" : ""; 132133 <a href="@Button.ButtonLink" class="btn cta-paragraph__btn @Button.Configuration.ButtonClass" @newWindow @ariaLabel> 134 <span class="btn__text cta-paragraph__btn-label">@Button.ButtonText</span> 135 <i class="btn__icon cta-paragraph__btn-icon fal fa-arrow-right"></i> 136 </a> 137 } 138139 </section> 140141 } 142143 } 144145 @helper CTAParagraphVideo(ParagraphVideo Video, string imagesHeight) 146 { 147 if (!string.IsNullOrWhiteSpace(Video.YoutubeLink) || !string.IsNullOrWhiteSpace(Video.VimeoLink)) 148 { 149 string YoutubeID = Video.YoutubeId; 150 string YoutubeLink = Video.YoutubeLink; 151152 string VimeoID = Video.VimeoId; 153 string VimeoLink = Video.VimeoLink; 154155 int CleanVideo = Video.Clean ? 1 : 0; 156 int ShowControls = Video.ShowControls ? 1 : 0; 157 int AutoPlay = Video.AutoPlay ? 1 : 0; 158 int LoopVideo = Video.LoopVideo ? 1 : 0; 159 int MuteAudio = Video.MuteAudio ? 1 : 0; 160 string hideControlsClass = Video.ShowControls ? "video-player-wrapper--hidecontrols" : ""; 161 string origin = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain(); 162 imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : ""; 163164 if (!string.IsNullOrWhiteSpace(YoutubeLink)) 165 { 166 <section class="cta-paragraph__video-container" style="@imagesHeight"> 167 <div class=""> 168 <div class="video-player-wrapper @hideControlsClass"> 169 <iframe class="video-player" data-video="@YoutubeID" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/@YoutubeID?autoplay=@AutoPlay&amp;controls=@ShowControls&amp;loop=@LoopVideo&amp;playlist=@YoutubeID&amp;playsinline=1&amp;disablekb=1&amp;modestbranding=@CleanVideo&amp;mute=@MuteAudio&amp;rel=0&amp;enablejsapi=1&amp;origin=@origin"></iframe> 170 </div> 171 </div> 172 </section> 173 } 174 if (!string.IsNullOrWhiteSpace(VimeoLink)) 175 { 176 <section class="cta-paragraph__video-container" style="@imagesHeight"> 177 <div class=""> 178 <div class="video-player-wrapper"> 179 <iframe class="video-player" data-video="@VimeoID" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="Vimeo video player" src="https://player.vimeo.com/video/@VimeoID?title=0&byline=0&portrait=0&autoplay=@AutoPlay&controls=@ShowControls&loop=@LoopVideo&muted=@MuteAudio"></iframe> 180 </div> 181 </div> 182 </section> 183 } 184 } 185 } 186187 @helper CTAParagraphIcon(ParagraphIcon Icon, bool strCenterVertical) 188 { 189 if (!string.IsNullOrWhiteSpace(Icon.FaIcon)) 190 { 191 string centerIconClass = strCenterVertical ? "justify-center" : "justify-start"; 192 string iconSizeClass = string.Format("cta-paragraph__icon--{0}", Icon.FaIconSize); 193194 <div class="cta-paragraph__icon-container"> 195 <div class="cta-paragraph__icon-inner-container @centerIconClass"> 196 <span class="cta-paragraph__icon @iconSizeClass">@Icon.FaIcon</span> 197 </div> 198 </div> 199 } 200 } 201202203 @{ 204205 string backgroundImageRepeatClass = _data.BackgroundConfiguration.BackgroundImageRepeat; 206 string backgroundImageSizeClass = ""; 207208 string BackgroundImagePositionX = _data.BackgroundConfiguration.BackgroundImagePositionX; 209 string BackgroundImagePositionY = _data.BackgroundConfiguration.BackgroundImagePositionY; 210211 string BackgroundImagePositionClass = ""; 212213 if (backgroundImageRepeatClass == "no-repeat") 214 { 215 BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX; 216 backgroundImageSizeClass = _data.BackgroundConfiguration.BackgroundImageSize; 217 } 218219 string ctaBackgroundColor = _data.BackgroundConfiguration.BackgroundColor; 220221 ctaBackgroundColor = colorService.GetHexColor(Pageview.AreaID, ctaBackgroundColor); 222223 string contentBackgroundColor = _data.BackgroundConfiguration.contentBackgroundColor; 224225 string contentGutterClass = _data.BackgroundConfiguration.contentGutter; 226 string BackgroundPadding = _data.BackgroundConfiguration.backgroundPadding; 227228 contentBackgroundColor = colorService.GetHexColor(Pageview.AreaID, contentBackgroundColor); 229230 } 231232 <style> 233234 @@media screen and (min-width: 991px) { 235 .multicolumn--@paragraphID { 236 background-color: @ctaBackgroundColor; 237 } 238239 .multicolumn--@paragraphID .cta-paragraph { 240 background-color: @contentBackgroundColor; 241 } 242 } 243244 .flickity-viewport{ 245 width: 100%; 246 } 247248 .header__cta{ 249 display: flex; 250 align-items: center; 251 } 252253 </style> 254255 @if (amountColumns > 0) 256 { 257 <div class="multicolumn overflow-hidden multicolumn--@paragraphID @backgroundClass @_data.CssClass @backgroundImageRepeatClass @BackgroundImagePositionClass @backgroundImageSizeClass @contentGutterClass @BackgroundPadding" data-paragraphid="@paragraphID" id="@paragraphID" style="@backgroundStyle"> 258 <div class="@classFullWidth">@RenderContentArea(_data, paragraphID)</div> 259 </div> 260 } 261262 @helper RenderContentArea(Carousel _data, int paragraphID) 263 { 264265 var colorService = new ColorSwatchService(); 266267 int amountColumns = _data.CarouselItems.Count; // Amount of the columns in backend, filled by user 268 var buttonIconClass = Pageview.Area.Item["Global_button_icon"] != null ? Pageview.Area.Item["Global_button_icon"].ToString().Replace("+", " ") : "fal fa-arrow-right"; 269270 string centerTextClass = _data.CenterText ? "items-center text-center" : "items-start text-left"; 271272 /* Specific for Carousel */ 273274 int colDisplay = _data.ColumnsDisplay; // Amount of displayed column within one screen 275276 bool fullWidth = _data.Fullwidth; // If slider or multicolumn has to be in container or full widthof the page 277 bool infiniteLoop = _data.Infinite; 278 bool autoPlay = _data.AutoPlay; 279 bool controls = _data.AddControls; 280 bool duration = _data.Duration; 281 bool showDots = _data.ShowDots; // If slider or multicolumn has to be in container or full widthof the page 282 int colAmount = 1; 283284 bool imagesOnlyBool = checkOnlyImages(_data); // Check if this carousel contains only images (logo slider) 285286 string ctaSubheaderTextColor = _data.BackgroundConfiguration.CTASubheaderTextColor; 287 string ctaHeaderTextColor = _data.BackgroundConfiguration.CTAHeaderTextColor; 288 string ctaContentTextColor = _data.BackgroundConfiguration.CTAContentTextColor; 289290 ctaSubheaderTextColor = colorService.GetHexColor(Pageview.AreaID, ctaSubheaderTextColor); 291 ctaHeaderTextColor = colorService.GetHexColor(Pageview.AreaID, ctaHeaderTextColor); 292 ctaContentTextColor = colorService.GetHexColor(Pageview.AreaID, ctaContentTextColor); 293294 bool Shadow = _data.BackgroundConfiguration.contentShadow; 295 string shadowClass = Shadow ? "contentShadow" : ""; 296297 if (!string.IsNullOrWhiteSpace(@_data.Header.HeaderFormatted())) 298 { 299 <header class="multicolumn__header-wrapper"> 300 @_data.Header.HeaderFormatted("multicolumn__header") 301 </header> 302 } 303304 string carouselHeight = "auto"; 305306 if (imagesOnlyBool && _data.ImageHeight != 0) 307 { 308 carouselHeight = _data.ImageHeight.ToString() + "px"; 309 } 310311 if ((colDisplay <= amountColumns) && (colDisplay != 0)) 312 { 313 string flexBasis = 100 / @colDisplay + "%"; 314315 <section class="carousel multicolumn" 316 data-columns="@colAmount" 317 data-dots="@showDots" 318 data-loop="@infiniteLoop" 319 data-autoplay="@autoPlay" 320 data-controls="@controls" 321 data-duration="@duration" 322 style="height: @carouselHeight;"> 323324 @foreach (var column in _data.CarouselItems) 325 { 326327 bool hasContent = !string.IsNullOrWhiteSpace(column.Button.ButtonText) || !string.IsNullOrWhiteSpace(column.Content.Text) || !string.IsNullOrWhiteSpace(column.Header.HeaderFormatted()); 328329 string image = column.Image.Image; 330 string imagesHeight = _data.ImageHeight == 0 ? "auto" : _data.ImageHeight.ToString() + "px"; 331 string ImageContainerFixed = hasContent ? "cta-paragraph__image-container--fixed" : ""; 332 string ImageAsBackground = (column.BackgroundConfiguration.ConfigurationName == "Image as Background") ? "cta-paragraph__image--is-background" : ""; 333334 string coverImage = ""; 335336 string figureHeight = !hasContent ? "flex-grow:1" : "height:" + imagesHeight; 337 string TempClass = imagesOnlyBool ? "imageOnly" : "hasContent"; 338 string ImageOnlyImageHeight = imagesOnlyBool ? "height:" + imagesHeight + ";" : "height:auto;"; 339340 if (!imagesOnlyBool) 341 { 342 imagesHeight = hasContent ? imagesHeight : imagesHeight = "100%"; 343 } 344345 /*This is work around created by Alla to enable cover mode for stand alone pictures*/ 346 if (!hasContent && column.Image.BackgroundSize == "bg-cover") 347 { 348 coverImage = "height:100%;"; 349 } 350351 <div class="multicolumn__item carousel-cell-wrap" style="display: flex; min-height:100%; @ImageOnlyImageHeight width: @flexBasis; @coverImage"> 352353 <section class="cta-paragraph carousel-cell" style="min-height: @imagesHeight; @ImageOnlyImageHeight"> 354 @{ 355 string newWindow = column.Button.NewWindow ? "target='_blank'" : ""; 356 string ariaLabel = !string.IsNullOrWhiteSpace(column.Button.ButtonAriaLabel) ? "aria-label='" + column.Button.ButtonAriaLabel + "'" : ""; 357 bool clickableBlock = !string.IsNullOrWhiteSpace(column.Button.ButtonLink) && _data.Clickable; 358 string clickableClass = clickableBlock ? "cta-paragraph__container--clickable" : ""; 359360 double ColumnAmount = colDisplay; 361 double ColumnWidthSize = 1 / ColumnAmount; 362 } 363364 @CTAParagraphImage( 365 column.Image, 366 false, 367 null, 368 false, 369 _data.Fullwidth, 370 imagesHeight, 371 0, 372 ColumnWidthSize 373 ) 374 @CTAParagraphContent( 375 paragraphID, 376 column.Header, 377 null, 378 column.Content, 379 column.Button, 380 column.Image, 381 false, 382 ctaSubheaderTextColor, 383 ctaHeaderTextColor, 384 ctaContentTextColor 385 ) 386387 @if (clickableBlock) 388 { 389 <a href="@column.Button.ButtonLink" class="cta-paragraph__clickable" @newWindow @ariaLabel></a> 390 } 391 </section> 392393 </div> 394 } 395 </section> 396 } 397 else if (colDisplay > amountColumns) 398 { 399 <div>Error: you cant display columns more than you filled in the backend</div> 400 } 401 } 402403 @functions{ 404 // Check if this carousel contains only images (logo slider) 405 bool checkOnlyImages(Carousel _data) 406 { 407408 int amountColumns = _data.CarouselItems.Count; // Amount of the columns in backend, filled by user 409 int emptyColumn = 0; 410411 // Loop through all the columns 412 foreach (var column in _data.CarouselItems) 413 { 414 // If button is empty AND content is empty AND header is empty => this is img only 415 if (string.IsNullOrWhiteSpace(column.Button.ButtonText) && string.IsNullOrWhiteSpace(column.Content.Text) && string.IsNullOrWhiteSpace(column.Header.HeaderFormatted())) 416 { 417 emptyColumn++; 418 } 419 } 420421 bool emptyColumnResult = emptyColumn == amountColumns ? true : false; 422423 return emptyColumnResult; 424425 } 426 } 427
Naar boven