1 november 2021 van Nieuws

5 minuten leestijd

Deel artikel

Nieuwe Ivana Folder Juli - September

Error executing template "Designs/deBisschop_generated/Paragraph/CTAParagraph.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
   at Bluedesk.DynamicWeb.ItemTypes.CTAParagraph.get_BackgroundConfiguration()
   at CompiledRazorTemplates.Dynamic.RazorEngine_3293b55d49cf4d8a9b29146fb2146061.Execute() in E:\Dynamicweb.NET\Groco-DeBisschop\Production\host\files\Templates\Designs\deBisschop_generated\Paragraph\CTAParagraph.cshtml:line 246
   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     
  6     
  7     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
  8     @using Dynamicweb;
  9     @using Dynamicweb.Content.Items;
 10     @using Bluedesk.DynamicWeb.ItemTypes;
 11     
 12     @{
 13     
 14     	var paragraphID = Pageview.CurrentParagraph.ID;
 15     
 16     	CTAParagraph _data = ItemManager.Storage.GetById<CTAParagraph>(Pageview.CurrentParagraph.ItemId ?? "0");
 17     
 18     	string contentRightClass = _data.ImagePosition.Equals("right") ? "image-right" : "image-left";
 19     
 20     	string newWindow = _data.Button.NewWindow ? "target='_blank'" : "";
 21     	string ariaLabel = !string.IsNullOrWhiteSpace(_data.Button.ButtonAriaLabel) ? "aria-label='" + _data.Button.ButtonAriaLabel + "'" : "";
 22     	bool clickableBlock = !string.IsNullOrWhiteSpace(_data.Button.GetLink(Pageview)) && _data.Clickable;
 23     	string clickableClass = clickableBlock ? "cta-paragraph__container--clickable" : "";
 24     	string ctaHasBackgroundImageClass = _data.ImageAsBackground ? "cta-paragraph--hasbackgroundimg" : "";
 25     
 26     	string ParagraphHeight = _data.Height == 0 ? "auto" : _data.Height + "px";
 27     
 28     	bool hasContent = !string.IsNullOrWhiteSpace(_data.Button.ButtonText) || !string.IsNullOrWhiteSpace(_data.Content.Text) || !string.IsNullOrWhiteSpace(_data.Header.HeaderFormatted());
 29     	double ColumnWidthSize = hasContent ? 0.5 : 1;
 30     
 31     	// string backgroundClass = getbackgroundclass(_data.BackgroundConfiguration.BackgroundClass);
 32     
 33     	string AnimateDirection = !string.IsNullOrWhiteSpace(_data.AnimateDirection) ? _data.AnimateDirection : "";
 34     	bool AnimateHalfBlock = false;
 35     	int AnimationDuration = _data.AnimateDuration;
 36     	string DataAosValue = "";
 37     
 38     	switch (AnimateDirection)
 39     	{
 40     		case "left":
 41     			DataAosValue = "fade-left";
 42     			break;
 43     
 44     		case "right":
 45     			DataAosValue = "fade-right";
 46     			break;
 47     
 48     		case "up":
 49     			DataAosValue = "fade-up";
 50     			break;
 51     
 52     		case "down":
 53     			DataAosValue = "fade-down";
 54     			break;
 55     
 56     		case "center":
 57     			AnimateHalfBlock = true;
 58     			break;
 59     
 60     		case "":
 61     		case "none":
 62     			// No action
 63     			break;
 64     	}
 65     
 66     }
 67     
 68     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
 69     @using Dynamicweb;
 70     @using Dynamicweb.Content.Items;
 71     @using Bluedesk.DynamicWeb.ItemTypes;
 72     
 73     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
 74     @using Dynamicweb;
 75     @using Dynamicweb.Content.Items;
 76     @using Bluedesk.DynamicWeb.ItemTypes;
 77     
 78     @functions {
 79     	
 80     	Dictionary<string, string> GetFontConfiguration(string TextColor, FontConfigurationItemTab FontConfiguration) 
 81     	{
 82     		var colorService = new ColorSwatchService();
 83     		TextColor = !string.IsNullOrWhiteSpace(TextColor) ? TextColor : "" ;
 84     		TextColor = !TextColor.Contains("#") ? colorService.GetHexColor(Pageview.AreaID, TextColor) : TextColor;
 85     		Dictionary<string, string> FontConfig = new Dictionary<string, string>() {
 86     			{ "textColor" , TextColor },
 87     			{ "fontSize" , FontConfiguration.FontSize },
 88     			{ "lineHeight", FontConfiguration.LineHeight},
 89     			{ "fontFamily" , FontConfiguration.FontConfiguration.FontFamily },
 90     			{ "fontWeight" , FontConfiguration.FontWeight },
 91     			{ "fontStyle" , FontConfiguration.FontStyle }
 92     		};
 93     		return FontConfig;
 94     	}
 95     
 96     	public string GenerateButtonConfigVariables(ButtonConfiguration BC, MasterConfig mc, int areaId) 
 97     	{
 98     		string ButtonLabelAlignment = BC.ButtonLabelAlignment;
 99     		switch (ButtonLabelAlignment)
100     		{
101     			case "align-left":
102     				ButtonLabelAlignment = "flex-start";
103     				break;
104     			case "align-center":
105     				ButtonLabelAlignment = "center";
106     				break;
107     			case "align-right":
108     				ButtonLabelAlignment = "flex-end";
109     				break;
110     			case "align-full":
111     				ButtonLabelAlignment = "space-between";
112     				break;
113     			default:
114     				ButtonLabelAlignment = "flex-start";
115     				break;
116     		}
117     	
118     		var btnStyleBlock = new System.Text.StringBuilder();
119     
120     		// General Config
121     		btnStyleBlock.Append(GenerateCssVar("btn-min-height", $"{mc.GeneralConfiguration.ButtonHeight}px"));
122     		btnStyleBlock.Append(GenerateCssVar("btn-border-radius", $"{mc.GeneralConfiguration.RoundedCornerValue}px"));
123     
124     		// Button Config
125     		btnStyleBlock.Append(GenerateCssVar("btn-border-width", $"{BC.BorderSize.ToString()}px"));
126     		btnStyleBlock.Append(GenerateCssVar("btn-label-alignment", ButtonLabelAlignment));
127     
128     		// Button Config Tab
129     		btnStyleBlock.Append(GenerateCssVar("btn-bg-color", BC.ButtonColorConfiguration.BackgroundColor.GetColorCode(areaId)));
130     		btnStyleBlock.Append(GenerateCssVar("btn-font-color", BC.ButtonColorConfiguration.FontColor.GetColorCode(areaId)));
131     		btnStyleBlock.Append(GenerateCssVar("btn-border-color", BC.ButtonColorConfiguration.BorderColor.GetColorCode(areaId)));
132     
133     		// Button Config Hover tab
134     		btnStyleBlock.Append(GenerateCssVar("btn-bg-color-hover", BC.ButtonHoverColorConfiguration.BackgroundColor.GetColorCode(areaId)));
135     		btnStyleBlock.Append(GenerateCssVar("btn-font-color-hover", BC.ButtonHoverColorConfiguration.FontColor.GetColorCode(areaId)));
136     		btnStyleBlock.Append(GenerateCssVar("btn-border-color-hover", BC.ButtonHoverColorConfiguration.BorderColor.GetColorCode(areaId)));
137     
138     		// Button Config Font Config
139     		btnStyleBlock.Append(GenerateCssVar("btn-font-size", BC.FontConfiguration.FontSize));
140     		btnStyleBlock.Append(GenerateCssVar("btn-font-config-color", BC.FontConfiguration.Color.GetColorCode(areaId)));
141     		btnStyleBlock.Append(GenerateCssVar("btn-font-line-height", BC.FontConfiguration.LineHeight));
142     		btnStyleBlock.Append(GenerateCssVar("btn-font-family", BC.FontConfiguration.FontConfiguration.FontFamily));
143     		btnStyleBlock.Append(GenerateCssVar("btn-font-weight", BC.FontConfiguration.FontWeight));
144     		btnStyleBlock.Append(GenerateCssVar("btn-font-transform", BC.FontConfiguration.FontStyle));
145     
146     		return btnStyleBlock.ToString();
147     	}
148     
149         public string GenerateCssVar(string name, string value)
150         {
151             if (!string.IsNullOrWhiteSpace(value)) {
152                 return $"--{name}: {value};";
153             } else {
154     			return "";
155     		}
156         }
157     }
158     
159     
160     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
161     @using Dynamicweb;
162     @using Dynamicweb.Content.Items;
163     @using Bluedesk.DynamicWeb.ItemTypes;
164     @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
165     
166     
167     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
168     @using Dynamicweb;
169     @using Dynamicweb.Content.Items;
170     @using Bluedesk.DynamicWeb.ItemTypes;
171     @using Bluedesk.DynamicWeb.ItemTypes.Extensions;
172     @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
173     @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration;
174     
175     @helper RenderButton(ButtonConfiguration ButtonConfiguration, string btnLink, string btnClass, string btnText, string ariaLabel = "", bool newWindow = false, string btnIcon = "", string btnExtraClass = "", string btnTextClass = "", string btnIconClass = "")
176     {
177     	string buttonID = ButtonConfiguration.Id;
178     	var master_configuration = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "MasterConfiguration");
179     	MasterConfig mc = master_configuration.Item.ToCodeFirstItem<MasterConfig>();
180     
181     	string FontAwesomeLibrary = mc.GeneralConfiguration.fontawesomeStyle;
182     	bool HideIcon = ButtonConfiguration.HideIcon;
183     	string CustomIconClass = !string.IsNullOrWhiteSpace(ButtonConfiguration.CustomIcon) ? ButtonConfiguration.CustomIcon : !string.IsNullOrWhiteSpace(btnIcon) ? btnIcon : "fa-chevron-right";
184     	string IconPositionClass = HideIcon ? "default-btn--no-icon" : mc.GeneralConfiguration.IconPosition == "left" ? "default-btn--icon-left" : "";
185     
186     	string target = newWindow ? "_blank" : "_self";
187     	string ariaText = !string.IsNullOrWhiteSpace(ariaLabel) ? "aria-label='" + ariaLabel + "'" : "";
188     
189     	string styleBlock = GenerateButtonConfigVariables(ButtonConfiguration, mc, Pageview.AreaID);
190     
191     	if (!string.IsNullOrWhiteSpace(btnLink) && !string.IsNullOrWhiteSpace(btnText))
192     	{
193     		<a href="@btnLink" class="btn default-btn default-btn--@buttonID @IconPositionClass @btnClass @btnExtraClass" target="@target" @ariaText style="@styleBlock">
194     			<span class="btn__text @btnTextClass">@btnText</span>
195     			@if (!HideIcon)
196     			{
197     				<i class="btn__icon @FontAwesomeLibrary @CustomIconClass @btnIconClass"></i>
198     			}
199     		</a>
200     	}
201     }
202     
203     @helper RenderFontConfig(Dictionary<string, string> FontConfig) 
204     {
205     	<text>color: @FontConfig["textColor"] !important;</text>
206     
207     	if (!string.IsNullOrWhiteSpace(FontConfig["textColor"]))
208     	{
209     		<text>
210     			color: @FontConfig["textColor"] !important;
211     		</text>
212     	}
213     
214     	if (!string.IsNullOrWhiteSpace(FontConfig["fontSize"]))
215     	{
216     		<text>font-size: @FontConfig["fontSize"] !important;</text>
217     	}
218     	if (!string.IsNullOrWhiteSpace(FontConfig["lineHeight"]))
219     	{
220     		<text>line-height: @FontConfig["lineHeight"] !important;</text>
221     	}
222     	if (!string.IsNullOrWhiteSpace(FontConfig["fontFamily"]))
223     	{
224     		<text>font-family: @FontConfig["fontFamily"] !important;</text>
225     	}
226     	if (!string.IsNullOrWhiteSpace(FontConfig["fontWeight"]))
227     	{
228     		<text>font-weight: @FontConfig["fontWeight"] !important;</text>
229     	}
230     	if (!string.IsNullOrWhiteSpace(FontConfig["fontStyle"]))
231     	{
232     		if (FontConfig["fontStyle"] != "none")
233     		{
234     			<text>text-transform: @FontConfig["fontStyle"] !important;</text>
235     		}
236     	}
237     }
238     
239     
240     @{
241     
242     	var colorService = new ColorSwatchService();
243     
244     	string fullWidthContainerClass = _data.Fullwidth ? "" : "container";
245     
246     	string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundConfiguration.BackgroundClass) : "";
247     	string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundColor) ? $"background-color: {_data.BackgroundConfiguration.BackgroundColor}; " : "";
248     	backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundImage) ? $"background-image: url({_data.BackgroundConfiguration.BackgroundImage}); " : "";
249     }
250     
251     
252     @functions {
253     	string getbackgroundclass(string backgroundClass)
254     	{
255     		return !string.IsNullOrWhiteSpace(backgroundClass) ? string.Format("bg-{0}", backgroundClass) : "";
256     	}
257     }
258     
259     @helper CTAParagraphImage(
260     	ParagraphImageResizable Image,
261     	bool hasContent,
262     	bool ImageAsBackground,
263     	string ImagePosition,
264     	bool ParallaxImage,
265     	bool Fullwidth,
266     	string imagesHeight,
267     	int paragraphHeight,
268     	double ColumnWidthSize,
269     	int AnimationDuration = 300,
270     	bool AnimateHalfBlock = false
271     )
272     {
273     	if (!string.IsNullOrWhiteSpace(Image.Image))
274     	{
275     
276     		string image = !string.IsNullOrWhiteSpace(Image.Image) ? Image.Image : null;
277     		imagesHeight = hasContent ? imagesHeight : "100%";
278     		imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
279     
280     		string imageParrallax = ParallaxImage ? "rellax" : "";
281     		string imageAsBackground = ImageAsBackground ? "cta-paragraph__image--is-background" : "";
282     		double imageWidth = 2000;
283     
284     		imageWidth = Fullwidth ? imageWidth : 1200;
285     		imageWidth = !ImageAsBackground ? imageWidth * ColumnWidthSize : imageWidth;
286     
287     		string strImageWidth = imageWidth + "px";
288     		string strImageWidthSize = imageWidth + "w";
289     
290     		string ImageUrl;
291     		if (image.EndsWith(".gif"))
292     		{
293     			ImageUrl = image;
294     		}
295     		else
296     		{
297     			ImageUrl = "/Admin/Public/GetImage.ashx?Image=" + image + "&Crop=7&Format=webp&Quality=90&Compression=80";
298     			ImageUrl = ImageUrl.Replace("?x", "&x");
299     		}
300     
301     		string animationDirection = AnimateHalfBlock ? ImagePosition.Equals("right") ? "fade-left" : "fade-right" : "";
302     
303     		if (!string.IsNullOrWhiteSpace(Image.Image))
304     		{
305     
306     			<figure class="cta-paragraph__image-container @imageAsBackground @Image.PositionY @Image.PositionX" style="@imagesHeight" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
307     
308     				<picture class="cta-paragraph__image @Image.BackgroundSize @imageParrallax">
309     					@if (ImageUrl.EndsWith(".gif"))
310     					{
311     						<source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
312     						<source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
313     						<img src="@ImageUrl" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
314     					}
315     					else
316     					{
317     						<source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
318     						<source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
319     						<img src="@ImageUrl&Width=@imageWidth" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
320     					}
321     				</picture>
322     
323     			</figure>
324     		}
325     	}
326     }
327     
328     @helper CTAParagraphContent(
329     	int paragraphID,
330     	string contentElementAlign,
331     	ParagraphHeader Header,
332     	ParagraphHeader SubHeader,
333     	ParagraphContent Content,
334     	CTAButton Button,
335     	CTAButton ExtraButton,
336     	ParagraphImage Image,
337     	bool strCenterVertical,
338     	Dictionary<string, string> subheaderFontConfig,
339     	Dictionary<string, string> headerFontConfig,
340     	Dictionary<string, string> contentFontConfig,
341     	string ImagePosition = "",
342     	int AnimationDuration = 300,
343     	bool AnimateHalfBlock = false
344     )
345     {
346     
347     	bool hasImage = !string.IsNullOrWhiteSpace(Image.Image) ? true : false;
348     	string noImageClass = hasImage ? "" : "no-image";
349     
350     	string centerTextClass = strCenterVertical ? "text-center" : "";
351     	string centerContent = !string.IsNullOrWhiteSpace(Image.Image) ? "" : "cta-paragraph__content--center";
352     
353     	string paragraphInstanceClass = "cta-paragraph__content--" + paragraphID;
354     
355     	string animationDirection = (AnimateHalfBlock && hasImage) ? ImagePosition.Equals("right") ? "fade-right" : "fade-left" : "";
356     
357     	//string button__fontfamily = !string.IsNullOrWhiteSpace(Button.Configuration.FontConfiguration.FontConfiguration.FontFamily) Button.Configuration.FontConfiguration.FontConfiguration.FontFamily ? : null;
358     
359     	if (!string.IsNullOrWhiteSpace(Button.ButtonText) || !string.IsNullOrWhiteSpace(Content.Text) || !string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
360     	{
361     
362     		<style>
363     
364     		.multicolumn--@paragraphID .cta-paragraph .cta-paragraph__subheader,
365     		.cta-paragraph--@paragraphID .cta-paragraph__subheader {
366     			@RenderFontConfig(subheaderFontConfig)
367     		}
368     
369     		.@paragraphInstanceClass .cta-paragraph__header {
370     			@RenderFontConfig(headerFontConfig)
371     		}
372     
373     		.@paragraphInstanceClass .cta-paragraph__text p,
374     		.@paragraphInstanceClass .cta-paragraph__text li {
375     			@RenderFontConfig(contentFontConfig)
376     		}
377     
378     		</style>
379     
380     		<section class="cta-paragraph__content @paragraphInstanceClass @centerContent @noImageClass" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
381     
382     			<article class="cta-paragraph__content-container @noImageClass">
383     
384     				@if (!string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
385     				{
386     					<header class="cta-paragraph__header @centerTextClass">
387     						@if (SubHeader != null)
388     						{
389     							@SubHeader.HeaderFormatted("cta-paragraph__subheader")
390     						}
391     						@Header.HeaderFormatted("cta-paragraph__header")
392     					</header>
393     				}
394     
395     				@if (!string.IsNullOrWhiteSpace(Content.Text))
396     				{
397     					<div class="cta-paragraph__text @centerTextClass">@Content.Text</div>
398     				}
399     
400     				@if (!string.IsNullOrWhiteSpace(Button.GetLink(Pageview)) && !string.IsNullOrWhiteSpace(Button.ButtonText))
401     				{
402     					<nav class="cta-paragraph__btn-navigation @centerTextClass">
403     						@RenderButton(Button.Configuration, Button.GetLink(Pageview), Button.Configuration.ButtonClass, Button.ButtonText, Button.ButtonAriaLabel, Button.NewWindow, "", "cta-paragraph__btn cta-paragraph__btn--first", "cta-paragraph__btn-label", "cta-paragraph__btn-icon")
404     						@RenderButton(ExtraButton.Configuration, ExtraButton.GetLink(Pageview), ExtraButton.Configuration.ButtonClass, ExtraButton.ButtonText, ExtraButton.ButtonAriaLabel, ExtraButton.NewWindow, "", "cta-paragraph__btn cta-paragraph__btn--extra", "cta-paragraph__btn-label", "cta-paragraph__btn-icon")
405     					</nav>
406     				}
407     
408     			</article>
409     		</section>
410     
411     	}
412     
413     }
414     
415     @helper CTAParagraphVideo(ParagraphVideo Video, string imagesHeight)
416     {
417     	if (!string.IsNullOrWhiteSpace(Video.YoutubeLink) || !string.IsNullOrWhiteSpace(Video.VimeoLink))
418     	{
419     		string YoutubeID = Video.YoutubeId;
420     		string YoutubeLink = Video.YoutubeLink;
421     
422     		string VimeoID = Video.VimeoId;
423     		string VimeoLink = Video.VimeoLink;
424     
425     		int CleanVideo = Video.Clean ? 1 : 0;
426     		int ShowControls = Video.ShowControls ? 1 : 0;
427     		int AutoPlay = Video.AutoPlay ? 1 : 0;
428     		int LoopVideo = Video.LoopVideo ? 1 : 0;
429     		int MuteAudio = Video.MuteAudio ? 1 : 0;
430     		string hideControlsClass = Video.ShowControls ? "video-player-wrapper--hidecontrols" : "";
431     		string origin = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain();
432     		imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
433     
434     		if (!string.IsNullOrWhiteSpace(YoutubeLink))
435     		{
436     			if(AutoPlay == 1) 
437     			{
438     				<section class="cta-paragraph__video-container" style="@imagesHeight">
439     					<div class="">
440     						<div class="video-player-wrapper @hideControlsClass">
441     							<iframe class="video-player" loading="lazy" data-video="@YoutubeID" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube-nocookie.com/embed/@YoutubeID?autoplay=@AutoPlay&controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=1"></iframe>
442     						</div>
443     					</div>
444     				</section>
445     			} 
446     			else 
447     			{
448     				<lite-youtube videoid="@YoutubeID" params="controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=1"></lite-youtube>
449     			}
450     		}
451     		if (!string.IsNullOrWhiteSpace(VimeoLink))
452     		{
453     			<section class="cta-paragraph__video-container" style="@imagesHeight">
454     				<div class="">
455     					<div class="video-player-wrapper">
456     						<iframe class="video-player" loading="lazy" data-video="@VimeoID" frameborder="0" allowfullscreen 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>
457     					</div>
458     				</div>
459     			</section>
460     		}
461     	}
462     }
463     
464     @helper CTAParagraphIcon(ParagraphIcon Icon, bool strCenterVertical)
465     {
466     	if (!string.IsNullOrWhiteSpace(Icon.FaIcon))
467     	{
468     		string centerIconClass = strCenterVertical ? "justify-center" : "justify-start";
469     		string iconSizeClass = string.Format("cta-paragraph__icon--{0}", Icon.FaIconSize);
470     
471     		<div class="cta-paragraph__icon-container">
472     			<div class="cta-paragraph__icon-inner-container @centerIconClass">
473     				<span class="cta-paragraph__icon @iconSizeClass">@Icon.FaIcon</span>
474     			</div>
475     		</div>
476     	}
477     }
478     
479     @helper RenderContentAlignment(BackgroundConfiguration data)
480     {
481     
482     	switch (data.ContentElementAlign)
483     	{
484     		case "align-left":
485     			<text>
486     				align-items: flex-start;
487     				text-align: left;
488     			</text>
489     			break;
490     		case "align-center":
491     			<text>
492     				align-items: center;
493     				text-align: center;
494     			</text>
495     			break;
496     		case "align-right":
497     			<text>
498     				align-items: flex-end;
499     				text-align: right;
500     			</text>
501     			break;
502     		case "align-full":
503     			<text>
504     				align-items: flex-start;
505     				text-align: justify;
506     			</text>
507     			break;
508     	}
509     
510     }
511     
512     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
513     @using Dynamicweb;
514     @using Dynamicweb.Content.Items;
515     @using Bluedesk.DynamicWeb.ItemTypes;
516     
517     <style>
518     	@@media screen and (min-width: 991px) {
519     		.cta-paragraph__container--@paragraphID {
520     			height: @ParagraphHeight !important;
521     		}
522     	}
523     
524     	.header--desktop.headerNew {
525     		position: relative;
526     	}
527     
528     		.header--desktop.headerNew.stickyheader {
529     			position: fixed;
530     		}
531     
532     	.full {
533     	}
534     
535     	.divided {
536     		
537     	}
538     
539     </style>
540     
541     
542     @if (_data != null)
543     {
544     
545     	var subheaderFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTASubheaderTextColor, _data.BackgroundConfiguration.FontConfigurationSubheader);
546     	var headerFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTAHeaderTextColor, _data.BackgroundConfiguration.FontConfigurationHeader);
547     	var contentFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTAContentTextColor, _data.BackgroundConfiguration.FontConfigurationContent);
548     
549     	string contentBackgroundColor = _data.BackgroundConfiguration.contentBackgroundColor;
550     	string contentBorderColor = _data.BackgroundConfiguration.contentBorderColor;
551     
552     	string contentBorderSize = _data.BackgroundConfiguration.contentBorderSize + "px";
553     
554     	bool Shadow = _data.BackgroundConfiguration.contentShadow;
555     
556     	string ctaBackgroundColor = _data.BackgroundConfiguration.BackgroundColor;
557     	string BackgroundPadding = _data.BackgroundConfiguration.backgroundPadding;
558     
559     	bool Containerfit = _data.BackgroundConfiguration.ContainerFit == "Fit" ? true : false;
560     	if (!string.IsNullOrWhiteSpace(contentRightClass)) {
561     		contentRightClass = Containerfit ? "" : contentRightClass;
562     	}
563     
564     
565     	string backgroundImageRepeatClass = _data.BackgroundConfiguration.BackgroundImageRepeat;
566     	string backgroundImageSizeClass = "";
567     
568     	string BackgroundImagePositionX = _data.BackgroundConfiguration.BackgroundImagePositionX;
569     	string BackgroundImagePositionY = _data.BackgroundConfiguration.BackgroundImagePositionY;
570     
571     
572     	string BackgroundImagePositionClass = "";
573     
574     	string BackgroundGradient = _data.BackgroundConfiguration.BackgroundGradient;
575     
576     	if (backgroundImageRepeatClass == "no-repeat")
577     	{
578     		BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX;
579     		backgroundImageSizeClass = _data.BackgroundConfiguration.BackgroundImageSize;
580     	}
581     
582     	string contentElementAlign = _data.BackgroundConfiguration.ContentElementAlign;
583     
584     	//subheaderFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, subheaderFontConfig["textColor"]);
585     	//headerFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, headerFontConfig["textColor"]);
586     	//contentFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, contentFontConfig["textColor"]);
587     
588     	ctaBackgroundColor = colorService.GetHexColor(Pageview.AreaID, ctaBackgroundColor);
589     	contentBackgroundColor = colorService.GetHexColor(Pageview.AreaID, contentBackgroundColor);
590     	contentBorderColor = colorService.GetHexColor(Pageview.AreaID, contentBorderColor);
591     
592     	string shadowClass = Shadow ? "contentShadow" : "";
593     
594     	<section class="cta-paragraph cta-paragraph--@paragraphID @backgroundClass @_data.CssClass @backgroundImageRepeatClass @BackgroundImagePositionClass @backgroundImageSizeClass @BackgroundPadding @ctaHasBackgroundImageClass" data-paragraphid="@paragraphID" id="@paragraphID" style="@backgroundStyle" data-aos="@DataAosValue" data-aos-duration="@AnimationDuration">
595     
596     		<div class="cta-paragraph__container cta-paragraph__container--@paragraphID @fullWidthContainerClass @clickableClass @contentRightClass @shadowClass">
597     
598     			<style>
599     				.cta-paragraph--@paragraphID {
600     					background-color: @ctaBackgroundColor;
601     					@if (!string.IsNullOrWhiteSpace(BackgroundGradient))
602     					{
603     						@BackgroundGradient
604     					}
605     				}
606     
607     				.cta-paragraph__container--@paragraphID
608     				{
609     					border: @contentBorderSize @contentBorderColor solid;
610     					@if (!string.IsNullOrWhiteSpace(contentBackgroundColor)) {
611     
612     						<text>background-color: @contentBackgroundColor</text>
613     
614     					}
615     				}
616     
617     				.cta-paragraph--@paragraphID .cta-paragraph__content-container
618     				{
619     					@RenderContentAlignment(_data.BackgroundConfiguration)
620     				}
621     
622     				.cta-paragraph--@paragraphID .cta-paragraph__content {
623     					@if (Containerfit)
624     					{
625     						<text>
626     							flex-grow: 0;
627     						</text>
628     					}
629     				}
630     
631     				.cta-paragraph--@paragraphID .cta-paragraph__image-container {
632     					@if (Containerfit)
633     					{
634     						<text>
635     							position: absolute;
636     							top: 0;
637     							left: 0;
638     							right: 0;
639     							bottom: 0;
640     							</text>
641     					}
642     				}
643     
644     				.cta-paragraph--@paragraphID .cta-paragraph__btn-navigation,
645     				.cta-paragraph--@paragraphID .cta-paragraph__container{
646     					@if (Containerfit)
647     					{
648     
649     						switch (_data.BackgroundConfiguration.ContainerFitContentAlignment) {
650     							case "TopLeft":
651     								<text>
652     									align-items: flex-start;
653     									justify-content: flex-start;
654     								</text>
655     								break;
656     							case "TopCenter":
657     								<text>
658     									align-items: flex-start;
659     									justify-content: center;
660     								</text>
661     								break;
662     							case "TopRight":
663     								<text>
664     									align-items: flex-start;
665     									justify-content : flex-end;
666     								</text>
667     								break;
668     							case "MiddleLeft":
669     								<text>
670     									align-items: center;
671     									justify-content : flex-start;
672     								</text>
673     								break;
674     							case "MiddleCenter":
675     								<text>
676     									align-items: center;
677     									justify-content: center;
678     								</text>
679     								break;
680     							case "MiddleRight":
681     								<text>
682     									align-items : center;
683     									justify-content : flex-end;
684     								</text>
685     								break;
686     							case "BottomLeft":
687     								<text>
688     									align-items : flex-end;
689     									justify-content : flex-start;
690     								</text>
691     								break;
692     							case "BottomCenter":
693     								<text>
694     									align-items: flex-end;
695     									justify-content: center;
696     								</text>
697     								break;
698     							case "BottomRight":
699     								<text>
700     									align-items: flex-end;
701     									justify-content: flex-end;
702     								</text>
703     								break;
704     
705     						}
706     
707     
708     					}
709     
710     				}
711     			</style>
712     
713     			@CTAParagraphImage(
714     				_data.Image,
715     				true,
716     				_data.ImageAsBackground,
717     				_data.ImagePosition,
718     				_data.ParallaxImage,
719     				_data.Fullwidth,
720     				"",
721     				_data.Height,
722     				ColumnWidthSize,
723     				AnimationDuration,
724     				AnimateHalfBlock
725     			)
726     			@CTAParagraphContent(
727     				paragraphID,
728     				contentElementAlign,
729     				_data.Header,
730     				_data.SubHeader,
731     				_data.Content,
732     				_data.Button,
733     				_data.ExtraButton,
734     				_data.Image,
735     				_data.CenterVertical,
736     				subheaderFontConfig,
737     				headerFontConfig,
738     				contentFontConfig,
739     				_data.ImagePosition,
740     				AnimationDuration,
741     				AnimateHalfBlock
742     			)
743     
744     			@if (clickableBlock)
745     			{
746     				<a href="@_data.Button.GetLink(Pageview)" class="cta-paragraph__clickable" @newWindow @ariaLabel></a>
747     			}
748     
749     		</div>
750     
751     		<style>
752     			.cta-paragraph--@paragraphID .cta-paragraph__gradient {
753     				@BackgroundGradient
754     			}
755     		</style>
756     
757     	</section>
758     }
759     

Error executing template "Designs/deBisschop_generated/Paragraph/CTAParagraph.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
   at Bluedesk.DynamicWeb.ItemTypes.CTAParagraph.get_BackgroundConfiguration()
   at CompiledRazorTemplates.Dynamic.RazorEngine_3293b55d49cf4d8a9b29146fb2146061.Execute() in E:\Dynamicweb.NET\Groco-DeBisschop\Production\host\files\Templates\Designs\deBisschop_generated\Paragraph\CTAParagraph.cshtml:line 246
   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     
  6     
  7     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
  8     @using Dynamicweb;
  9     @using Dynamicweb.Content.Items;
 10     @using Bluedesk.DynamicWeb.ItemTypes;
 11     
 12     @{
 13     
 14     	var paragraphID = Pageview.CurrentParagraph.ID;
 15     
 16     	CTAParagraph _data = ItemManager.Storage.GetById<CTAParagraph>(Pageview.CurrentParagraph.ItemId ?? "0");
 17     
 18     	string contentRightClass = _data.ImagePosition.Equals("right") ? "image-right" : "image-left";
 19     
 20     	string newWindow = _data.Button.NewWindow ? "target='_blank'" : "";
 21     	string ariaLabel = !string.IsNullOrWhiteSpace(_data.Button.ButtonAriaLabel) ? "aria-label='" + _data.Button.ButtonAriaLabel + "'" : "";
 22     	bool clickableBlock = !string.IsNullOrWhiteSpace(_data.Button.GetLink(Pageview)) && _data.Clickable;
 23     	string clickableClass = clickableBlock ? "cta-paragraph__container--clickable" : "";
 24     	string ctaHasBackgroundImageClass = _data.ImageAsBackground ? "cta-paragraph--hasbackgroundimg" : "";
 25     
 26     	string ParagraphHeight = _data.Height == 0 ? "auto" : _data.Height + "px";
 27     
 28     	bool hasContent = !string.IsNullOrWhiteSpace(_data.Button.ButtonText) || !string.IsNullOrWhiteSpace(_data.Content.Text) || !string.IsNullOrWhiteSpace(_data.Header.HeaderFormatted());
 29     	double ColumnWidthSize = hasContent ? 0.5 : 1;
 30     
 31     	// string backgroundClass = getbackgroundclass(_data.BackgroundConfiguration.BackgroundClass);
 32     
 33     	string AnimateDirection = !string.IsNullOrWhiteSpace(_data.AnimateDirection) ? _data.AnimateDirection : "";
 34     	bool AnimateHalfBlock = false;
 35     	int AnimationDuration = _data.AnimateDuration;
 36     	string DataAosValue = "";
 37     
 38     	switch (AnimateDirection)
 39     	{
 40     		case "left":
 41     			DataAosValue = "fade-left";
 42     			break;
 43     
 44     		case "right":
 45     			DataAosValue = "fade-right";
 46     			break;
 47     
 48     		case "up":
 49     			DataAosValue = "fade-up";
 50     			break;
 51     
 52     		case "down":
 53     			DataAosValue = "fade-down";
 54     			break;
 55     
 56     		case "center":
 57     			AnimateHalfBlock = true;
 58     			break;
 59     
 60     		case "":
 61     		case "none":
 62     			// No action
 63     			break;
 64     	}
 65     
 66     }
 67     
 68     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
 69     @using Dynamicweb;
 70     @using Dynamicweb.Content.Items;
 71     @using Bluedesk.DynamicWeb.ItemTypes;
 72     
 73     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
 74     @using Dynamicweb;
 75     @using Dynamicweb.Content.Items;
 76     @using Bluedesk.DynamicWeb.ItemTypes;
 77     
 78     @functions {
 79     	
 80     	Dictionary<string, string> GetFontConfiguration(string TextColor, FontConfigurationItemTab FontConfiguration) 
 81     	{
 82     		var colorService = new ColorSwatchService();
 83     		TextColor = !string.IsNullOrWhiteSpace(TextColor) ? TextColor : "" ;
 84     		TextColor = !TextColor.Contains("#") ? colorService.GetHexColor(Pageview.AreaID, TextColor) : TextColor;
 85     		Dictionary<string, string> FontConfig = new Dictionary<string, string>() {
 86     			{ "textColor" , TextColor },
 87     			{ "fontSize" , FontConfiguration.FontSize },
 88     			{ "lineHeight", FontConfiguration.LineHeight},
 89     			{ "fontFamily" , FontConfiguration.FontConfiguration.FontFamily },
 90     			{ "fontWeight" , FontConfiguration.FontWeight },
 91     			{ "fontStyle" , FontConfiguration.FontStyle }
 92     		};
 93     		return FontConfig;
 94     	}
 95     
 96     	public string GenerateButtonConfigVariables(ButtonConfiguration BC, MasterConfig mc, int areaId) 
 97     	{
 98     		string ButtonLabelAlignment = BC.ButtonLabelAlignment;
 99     		switch (ButtonLabelAlignment)
100     		{
101     			case "align-left":
102     				ButtonLabelAlignment = "flex-start";
103     				break;
104     			case "align-center":
105     				ButtonLabelAlignment = "center";
106     				break;
107     			case "align-right":
108     				ButtonLabelAlignment = "flex-end";
109     				break;
110     			case "align-full":
111     				ButtonLabelAlignment = "space-between";
112     				break;
113     			default:
114     				ButtonLabelAlignment = "flex-start";
115     				break;
116     		}
117     	
118     		var btnStyleBlock = new System.Text.StringBuilder();
119     
120     		// General Config
121     		btnStyleBlock.Append(GenerateCssVar("btn-min-height", $"{mc.GeneralConfiguration.ButtonHeight}px"));
122     		btnStyleBlock.Append(GenerateCssVar("btn-border-radius", $"{mc.GeneralConfiguration.RoundedCornerValue}px"));
123     
124     		// Button Config
125     		btnStyleBlock.Append(GenerateCssVar("btn-border-width", $"{BC.BorderSize.ToString()}px"));
126     		btnStyleBlock.Append(GenerateCssVar("btn-label-alignment", ButtonLabelAlignment));
127     
128     		// Button Config Tab
129     		btnStyleBlock.Append(GenerateCssVar("btn-bg-color", BC.ButtonColorConfiguration.BackgroundColor.GetColorCode(areaId)));
130     		btnStyleBlock.Append(GenerateCssVar("btn-font-color", BC.ButtonColorConfiguration.FontColor.GetColorCode(areaId)));
131     		btnStyleBlock.Append(GenerateCssVar("btn-border-color", BC.ButtonColorConfiguration.BorderColor.GetColorCode(areaId)));
132     
133     		// Button Config Hover tab
134     		btnStyleBlock.Append(GenerateCssVar("btn-bg-color-hover", BC.ButtonHoverColorConfiguration.BackgroundColor.GetColorCode(areaId)));
135     		btnStyleBlock.Append(GenerateCssVar("btn-font-color-hover", BC.ButtonHoverColorConfiguration.FontColor.GetColorCode(areaId)));
136     		btnStyleBlock.Append(GenerateCssVar("btn-border-color-hover", BC.ButtonHoverColorConfiguration.BorderColor.GetColorCode(areaId)));
137     
138     		// Button Config Font Config
139     		btnStyleBlock.Append(GenerateCssVar("btn-font-size", BC.FontConfiguration.FontSize));
140     		btnStyleBlock.Append(GenerateCssVar("btn-font-config-color", BC.FontConfiguration.Color.GetColorCode(areaId)));
141     		btnStyleBlock.Append(GenerateCssVar("btn-font-line-height", BC.FontConfiguration.LineHeight));
142     		btnStyleBlock.Append(GenerateCssVar("btn-font-family", BC.FontConfiguration.FontConfiguration.FontFamily));
143     		btnStyleBlock.Append(GenerateCssVar("btn-font-weight", BC.FontConfiguration.FontWeight));
144     		btnStyleBlock.Append(GenerateCssVar("btn-font-transform", BC.FontConfiguration.FontStyle));
145     
146     		return btnStyleBlock.ToString();
147     	}
148     
149         public string GenerateCssVar(string name, string value)
150         {
151             if (!string.IsNullOrWhiteSpace(value)) {
152                 return $"--{name}: {value};";
153             } else {
154     			return "";
155     		}
156         }
157     }
158     
159     
160     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
161     @using Dynamicweb;
162     @using Dynamicweb.Content.Items;
163     @using Bluedesk.DynamicWeb.ItemTypes;
164     @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
165     
166     
167     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
168     @using Dynamicweb;
169     @using Dynamicweb.Content.Items;
170     @using Bluedesk.DynamicWeb.ItemTypes;
171     @using Bluedesk.DynamicWeb.ItemTypes.Extensions;
172     @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
173     @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration;
174     
175     @helper RenderButton(ButtonConfiguration ButtonConfiguration, string btnLink, string btnClass, string btnText, string ariaLabel = "", bool newWindow = false, string btnIcon = "", string btnExtraClass = "", string btnTextClass = "", string btnIconClass = "")
176     {
177     	string buttonID = ButtonConfiguration.Id;
178     	var master_configuration = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "MasterConfiguration");
179     	MasterConfig mc = master_configuration.Item.ToCodeFirstItem<MasterConfig>();
180     
181     	string FontAwesomeLibrary = mc.GeneralConfiguration.fontawesomeStyle;
182     	bool HideIcon = ButtonConfiguration.HideIcon;
183     	string CustomIconClass = !string.IsNullOrWhiteSpace(ButtonConfiguration.CustomIcon) ? ButtonConfiguration.CustomIcon : !string.IsNullOrWhiteSpace(btnIcon) ? btnIcon : "fa-chevron-right";
184     	string IconPositionClass = HideIcon ? "default-btn--no-icon" : mc.GeneralConfiguration.IconPosition == "left" ? "default-btn--icon-left" : "";
185     
186     	string target = newWindow ? "_blank" : "_self";
187     	string ariaText = !string.IsNullOrWhiteSpace(ariaLabel) ? "aria-label='" + ariaLabel + "'" : "";
188     
189     	string styleBlock = GenerateButtonConfigVariables(ButtonConfiguration, mc, Pageview.AreaID);
190     
191     	if (!string.IsNullOrWhiteSpace(btnLink) && !string.IsNullOrWhiteSpace(btnText))
192     	{
193     		<a href="@btnLink" class="btn default-btn default-btn--@buttonID @IconPositionClass @btnClass @btnExtraClass" target="@target" @ariaText style="@styleBlock">
194     			<span class="btn__text @btnTextClass">@btnText</span>
195     			@if (!HideIcon)
196     			{
197     				<i class="btn__icon @FontAwesomeLibrary @CustomIconClass @btnIconClass"></i>
198     			}
199     		</a>
200     	}
201     }
202     
203     @helper RenderFontConfig(Dictionary<string, string> FontConfig) 
204     {
205     	<text>color: @FontConfig["textColor"] !important;</text>
206     
207     	if (!string.IsNullOrWhiteSpace(FontConfig["textColor"]))
208     	{
209     		<text>
210     			color: @FontConfig["textColor"] !important;
211     		</text>
212     	}
213     
214     	if (!string.IsNullOrWhiteSpace(FontConfig["fontSize"]))
215     	{
216     		<text>font-size: @FontConfig["fontSize"] !important;</text>
217     	}
218     	if (!string.IsNullOrWhiteSpace(FontConfig["lineHeight"]))
219     	{
220     		<text>line-height: @FontConfig["lineHeight"] !important;</text>
221     	}
222     	if (!string.IsNullOrWhiteSpace(FontConfig["fontFamily"]))
223     	{
224     		<text>font-family: @FontConfig["fontFamily"] !important;</text>
225     	}
226     	if (!string.IsNullOrWhiteSpace(FontConfig["fontWeight"]))
227     	{
228     		<text>font-weight: @FontConfig["fontWeight"] !important;</text>
229     	}
230     	if (!string.IsNullOrWhiteSpace(FontConfig["fontStyle"]))
231     	{
232     		if (FontConfig["fontStyle"] != "none")
233     		{
234     			<text>text-transform: @FontConfig["fontStyle"] !important;</text>
235     		}
236     	}
237     }
238     
239     
240     @{
241     
242     	var colorService = new ColorSwatchService();
243     
244     	string fullWidthContainerClass = _data.Fullwidth ? "" : "container";
245     
246     	string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundConfiguration.BackgroundClass) : "";
247     	string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundColor) ? $"background-color: {_data.BackgroundConfiguration.BackgroundColor}; " : "";
248     	backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundImage) ? $"background-image: url({_data.BackgroundConfiguration.BackgroundImage}); " : "";
249     }
250     
251     
252     @functions {
253     	string getbackgroundclass(string backgroundClass)
254     	{
255     		return !string.IsNullOrWhiteSpace(backgroundClass) ? string.Format("bg-{0}", backgroundClass) : "";
256     	}
257     }
258     
259     @helper CTAParagraphImage(
260     	ParagraphImageResizable Image,
261     	bool hasContent,
262     	bool ImageAsBackground,
263     	string ImagePosition,
264     	bool ParallaxImage,
265     	bool Fullwidth,
266     	string imagesHeight,
267     	int paragraphHeight,
268     	double ColumnWidthSize,
269     	int AnimationDuration = 300,
270     	bool AnimateHalfBlock = false
271     )
272     {
273     	if (!string.IsNullOrWhiteSpace(Image.Image))
274     	{
275     
276     		string image = !string.IsNullOrWhiteSpace(Image.Image) ? Image.Image : null;
277     		imagesHeight = hasContent ? imagesHeight : "100%";
278     		imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
279     
280     		string imageParrallax = ParallaxImage ? "rellax" : "";
281     		string imageAsBackground = ImageAsBackground ? "cta-paragraph__image--is-background" : "";
282     		double imageWidth = 2000;
283     
284     		imageWidth = Fullwidth ? imageWidth : 1200;
285     		imageWidth = !ImageAsBackground ? imageWidth * ColumnWidthSize : imageWidth;
286     
287     		string strImageWidth = imageWidth + "px";
288     		string strImageWidthSize = imageWidth + "w";
289     
290     		string ImageUrl;
291     		if (image.EndsWith(".gif"))
292     		{
293     			ImageUrl = image;
294     		}
295     		else
296     		{
297     			ImageUrl = "/Admin/Public/GetImage.ashx?Image=" + image + "&Crop=7&Format=webp&Quality=90&Compression=80";
298     			ImageUrl = ImageUrl.Replace("?x", "&x");
299     		}
300     
301     		string animationDirection = AnimateHalfBlock ? ImagePosition.Equals("right") ? "fade-left" : "fade-right" : "";
302     
303     		if (!string.IsNullOrWhiteSpace(Image.Image))
304     		{
305     
306     			<figure class="cta-paragraph__image-container @imageAsBackground @Image.PositionY @Image.PositionX" style="@imagesHeight" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
307     
308     				<picture class="cta-paragraph__image @Image.BackgroundSize @imageParrallax">
309     					@if (ImageUrl.EndsWith(".gif"))
310     					{
311     						<source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
312     						<source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
313     						<img src="@ImageUrl" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
314     					}
315     					else
316     					{
317     						<source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
318     						<source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
319     						<img src="@ImageUrl&Width=@imageWidth" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
320     					}
321     				</picture>
322     
323     			</figure>
324     		}
325     	}
326     }
327     
328     @helper CTAParagraphContent(
329     	int paragraphID,
330     	string contentElementAlign,
331     	ParagraphHeader Header,
332     	ParagraphHeader SubHeader,
333     	ParagraphContent Content,
334     	CTAButton Button,
335     	CTAButton ExtraButton,
336     	ParagraphImage Image,
337     	bool strCenterVertical,
338     	Dictionary<string, string> subheaderFontConfig,
339     	Dictionary<string, string> headerFontConfig,
340     	Dictionary<string, string> contentFontConfig,
341     	string ImagePosition = "",
342     	int AnimationDuration = 300,
343     	bool AnimateHalfBlock = false
344     )
345     {
346     
347     	bool hasImage = !string.IsNullOrWhiteSpace(Image.Image) ? true : false;
348     	string noImageClass = hasImage ? "" : "no-image";
349     
350     	string centerTextClass = strCenterVertical ? "text-center" : "";
351     	string centerContent = !string.IsNullOrWhiteSpace(Image.Image) ? "" : "cta-paragraph__content--center";
352     
353     	string paragraphInstanceClass = "cta-paragraph__content--" + paragraphID;
354     
355     	string animationDirection = (AnimateHalfBlock && hasImage) ? ImagePosition.Equals("right") ? "fade-right" : "fade-left" : "";
356     
357     	//string button__fontfamily = !string.IsNullOrWhiteSpace(Button.Configuration.FontConfiguration.FontConfiguration.FontFamily) Button.Configuration.FontConfiguration.FontConfiguration.FontFamily ? : null;
358     
359     	if (!string.IsNullOrWhiteSpace(Button.ButtonText) || !string.IsNullOrWhiteSpace(Content.Text) || !string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
360     	{
361     
362     		<style>
363     
364     		.multicolumn--@paragraphID .cta-paragraph .cta-paragraph__subheader,
365     		.cta-paragraph--@paragraphID .cta-paragraph__subheader {
366     			@RenderFontConfig(subheaderFontConfig)
367     		}
368     
369     		.@paragraphInstanceClass .cta-paragraph__header {
370     			@RenderFontConfig(headerFontConfig)
371     		}
372     
373     		.@paragraphInstanceClass .cta-paragraph__text p,
374     		.@paragraphInstanceClass .cta-paragraph__text li {
375     			@RenderFontConfig(contentFontConfig)
376     		}
377     
378     		</style>
379     
380     		<section class="cta-paragraph__content @paragraphInstanceClass @centerContent @noImageClass" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
381     
382     			<article class="cta-paragraph__content-container @noImageClass">
383     
384     				@if (!string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
385     				{
386     					<header class="cta-paragraph__header @centerTextClass">
387     						@if (SubHeader != null)
388     						{
389     							@SubHeader.HeaderFormatted("cta-paragraph__subheader")
390     						}
391     						@Header.HeaderFormatted("cta-paragraph__header")
392     					</header>
393     				}
394     
395     				@if (!string.IsNullOrWhiteSpace(Content.Text))
396     				{
397     					<div class="cta-paragraph__text @centerTextClass">@Content.Text</div>
398     				}
399     
400     				@if (!string.IsNullOrWhiteSpace(Button.GetLink(Pageview)) && !string.IsNullOrWhiteSpace(Button.ButtonText))
401     				{
402     					<nav class="cta-paragraph__btn-navigation @centerTextClass">
403     						@RenderButton(Button.Configuration, Button.GetLink(Pageview), Button.Configuration.ButtonClass, Button.ButtonText, Button.ButtonAriaLabel, Button.NewWindow, "", "cta-paragraph__btn cta-paragraph__btn--first", "cta-paragraph__btn-label", "cta-paragraph__btn-icon")
404     						@RenderButton(ExtraButton.Configuration, ExtraButton.GetLink(Pageview), ExtraButton.Configuration.ButtonClass, ExtraButton.ButtonText, ExtraButton.ButtonAriaLabel, ExtraButton.NewWindow, "", "cta-paragraph__btn cta-paragraph__btn--extra", "cta-paragraph__btn-label", "cta-paragraph__btn-icon")
405     					</nav>
406     				}
407     
408     			</article>
409     		</section>
410     
411     	}
412     
413     }
414     
415     @helper CTAParagraphVideo(ParagraphVideo Video, string imagesHeight)
416     {
417     	if (!string.IsNullOrWhiteSpace(Video.YoutubeLink) || !string.IsNullOrWhiteSpace(Video.VimeoLink))
418     	{
419     		string YoutubeID = Video.YoutubeId;
420     		string YoutubeLink = Video.YoutubeLink;
421     
422     		string VimeoID = Video.VimeoId;
423     		string VimeoLink = Video.VimeoLink;
424     
425     		int CleanVideo = Video.Clean ? 1 : 0;
426     		int ShowControls = Video.ShowControls ? 1 : 0;
427     		int AutoPlay = Video.AutoPlay ? 1 : 0;
428     		int LoopVideo = Video.LoopVideo ? 1 : 0;
429     		int MuteAudio = Video.MuteAudio ? 1 : 0;
430     		string hideControlsClass = Video.ShowControls ? "video-player-wrapper--hidecontrols" : "";
431     		string origin = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain();
432     		imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
433     
434     		if (!string.IsNullOrWhiteSpace(YoutubeLink))
435     		{
436     			if(AutoPlay == 1) 
437     			{
438     				<section class="cta-paragraph__video-container" style="@imagesHeight">
439     					<div class="">
440     						<div class="video-player-wrapper @hideControlsClass">
441     							<iframe class="video-player" loading="lazy" data-video="@YoutubeID" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube-nocookie.com/embed/@YoutubeID?autoplay=@AutoPlay&controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=1"></iframe>
442     						</div>
443     					</div>
444     				</section>
445     			} 
446     			else 
447     			{
448     				<lite-youtube videoid="@YoutubeID" params="controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=1"></lite-youtube>
449     			}
450     		}
451     		if (!string.IsNullOrWhiteSpace(VimeoLink))
452     		{
453     			<section class="cta-paragraph__video-container" style="@imagesHeight">
454     				<div class="">
455     					<div class="video-player-wrapper">
456     						<iframe class="video-player" loading="lazy" data-video="@VimeoID" frameborder="0" allowfullscreen 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>
457     					</div>
458     				</div>
459     			</section>
460     		}
461     	}
462     }
463     
464     @helper CTAParagraphIcon(ParagraphIcon Icon, bool strCenterVertical)
465     {
466     	if (!string.IsNullOrWhiteSpace(Icon.FaIcon))
467     	{
468     		string centerIconClass = strCenterVertical ? "justify-center" : "justify-start";
469     		string iconSizeClass = string.Format("cta-paragraph__icon--{0}", Icon.FaIconSize);
470     
471     		<div class="cta-paragraph__icon-container">
472     			<div class="cta-paragraph__icon-inner-container @centerIconClass">
473     				<span class="cta-paragraph__icon @iconSizeClass">@Icon.FaIcon</span>
474     			</div>
475     		</div>
476     	}
477     }
478     
479     @helper RenderContentAlignment(BackgroundConfiguration data)
480     {
481     
482     	switch (data.ContentElementAlign)
483     	{
484     		case "align-left":
485     			<text>
486     				align-items: flex-start;
487     				text-align: left;
488     			</text>
489     			break;
490     		case "align-center":
491     			<text>
492     				align-items: center;
493     				text-align: center;
494     			</text>
495     			break;
496     		case "align-right":
497     			<text>
498     				align-items: flex-end;
499     				text-align: right;
500     			</text>
501     			break;
502     		case "align-full":
503     			<text>
504     				align-items: flex-start;
505     				text-align: justify;
506     			</text>
507     			break;
508     	}
509     
510     }
511     
512     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
513     @using Dynamicweb;
514     @using Dynamicweb.Content.Items;
515     @using Bluedesk.DynamicWeb.ItemTypes;
516     
517     <style>
518     	@@media screen and (min-width: 991px) {
519     		.cta-paragraph__container--@paragraphID {
520     			height: @ParagraphHeight !important;
521     		}
522     	}
523     
524     	.header--desktop.headerNew {
525     		position: relative;
526     	}
527     
528     		.header--desktop.headerNew.stickyheader {
529     			position: fixed;
530     		}
531     
532     	.full {
533     	}
534     
535     	.divided {
536     		
537     	}
538     
539     </style>
540     
541     
542     @if (_data != null)
543     {
544     
545     	var subheaderFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTASubheaderTextColor, _data.BackgroundConfiguration.FontConfigurationSubheader);
546     	var headerFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTAHeaderTextColor, _data.BackgroundConfiguration.FontConfigurationHeader);
547     	var contentFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTAContentTextColor, _data.BackgroundConfiguration.FontConfigurationContent);
548     
549     	string contentBackgroundColor = _data.BackgroundConfiguration.contentBackgroundColor;
550     	string contentBorderColor = _data.BackgroundConfiguration.contentBorderColor;
551     
552     	string contentBorderSize = _data.BackgroundConfiguration.contentBorderSize + "px";
553     
554     	bool Shadow = _data.BackgroundConfiguration.contentShadow;
555     
556     	string ctaBackgroundColor = _data.BackgroundConfiguration.BackgroundColor;
557     	string BackgroundPadding = _data.BackgroundConfiguration.backgroundPadding;
558     
559     	bool Containerfit = _data.BackgroundConfiguration.ContainerFit == "Fit" ? true : false;
560     	if (!string.IsNullOrWhiteSpace(contentRightClass)) {
561     		contentRightClass = Containerfit ? "" : contentRightClass;
562     	}
563     
564     
565     	string backgroundImageRepeatClass = _data.BackgroundConfiguration.BackgroundImageRepeat;
566     	string backgroundImageSizeClass = "";
567     
568     	string BackgroundImagePositionX = _data.BackgroundConfiguration.BackgroundImagePositionX;
569     	string BackgroundImagePositionY = _data.BackgroundConfiguration.BackgroundImagePositionY;
570     
571     
572     	string BackgroundImagePositionClass = "";
573     
574     	string BackgroundGradient = _data.BackgroundConfiguration.BackgroundGradient;
575     
576     	if (backgroundImageRepeatClass == "no-repeat")
577     	{
578     		BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX;
579     		backgroundImageSizeClass = _data.BackgroundConfiguration.BackgroundImageSize;
580     	}
581     
582     	string contentElementAlign = _data.BackgroundConfiguration.ContentElementAlign;
583     
584     	//subheaderFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, subheaderFontConfig["textColor"]);
585     	//headerFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, headerFontConfig["textColor"]);
586     	//contentFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, contentFontConfig["textColor"]);
587     
588     	ctaBackgroundColor = colorService.GetHexColor(Pageview.AreaID, ctaBackgroundColor);
589     	contentBackgroundColor = colorService.GetHexColor(Pageview.AreaID, contentBackgroundColor);
590     	contentBorderColor = colorService.GetHexColor(Pageview.AreaID, contentBorderColor);
591     
592     	string shadowClass = Shadow ? "contentShadow" : "";
593     
594     	<section class="cta-paragraph cta-paragraph--@paragraphID @backgroundClass @_data.CssClass @backgroundImageRepeatClass @BackgroundImagePositionClass @backgroundImageSizeClass @BackgroundPadding @ctaHasBackgroundImageClass" data-paragraphid="@paragraphID" id="@paragraphID" style="@backgroundStyle" data-aos="@DataAosValue" data-aos-duration="@AnimationDuration">
595     
596     		<div class="cta-paragraph__container cta-paragraph__container--@paragraphID @fullWidthContainerClass @clickableClass @contentRightClass @shadowClass">
597     
598     			<style>
599     				.cta-paragraph--@paragraphID {
600     					background-color: @ctaBackgroundColor;
601     					@if (!string.IsNullOrWhiteSpace(BackgroundGradient))
602     					{
603     						@BackgroundGradient
604     					}
605     				}
606     
607     				.cta-paragraph__container--@paragraphID
608     				{
609     					border: @contentBorderSize @contentBorderColor solid;
610     					@if (!string.IsNullOrWhiteSpace(contentBackgroundColor)) {
611     
612     						<text>background-color: @contentBackgroundColor</text>
613     
614     					}
615     				}
616     
617     				.cta-paragraph--@paragraphID .cta-paragraph__content-container
618     				{
619     					@RenderContentAlignment(_data.BackgroundConfiguration)
620     				}
621     
622     				.cta-paragraph--@paragraphID .cta-paragraph__content {
623     					@if (Containerfit)
624     					{
625     						<text>
626     							flex-grow: 0;
627     						</text>
628     					}
629     				}
630     
631     				.cta-paragraph--@paragraphID .cta-paragraph__image-container {
632     					@if (Containerfit)
633     					{
634     						<text>
635     							position: absolute;
636     							top: 0;
637     							left: 0;
638     							right: 0;
639     							bottom: 0;
640     							</text>
641     					}
642     				}
643     
644     				.cta-paragraph--@paragraphID .cta-paragraph__btn-navigation,
645     				.cta-paragraph--@paragraphID .cta-paragraph__container{
646     					@if (Containerfit)
647     					{
648     
649     						switch (_data.BackgroundConfiguration.ContainerFitContentAlignment) {
650     							case "TopLeft":
651     								<text>
652     									align-items: flex-start;
653     									justify-content: flex-start;
654     								</text>
655     								break;
656     							case "TopCenter":
657     								<text>
658     									align-items: flex-start;
659     									justify-content: center;
660     								</text>
661     								break;
662     							case "TopRight":
663     								<text>
664     									align-items: flex-start;
665     									justify-content : flex-end;
666     								</text>
667     								break;
668     							case "MiddleLeft":
669     								<text>
670     									align-items: center;
671     									justify-content : flex-start;
672     								</text>
673     								break;
674     							case "MiddleCenter":
675     								<text>
676     									align-items: center;
677     									justify-content: center;
678     								</text>
679     								break;
680     							case "MiddleRight":
681     								<text>
682     									align-items : center;
683     									justify-content : flex-end;
684     								</text>
685     								break;
686     							case "BottomLeft":
687     								<text>
688     									align-items : flex-end;
689     									justify-content : flex-start;
690     								</text>
691     								break;
692     							case "BottomCenter":
693     								<text>
694     									align-items: flex-end;
695     									justify-content: center;
696     								</text>
697     								break;
698     							case "BottomRight":
699     								<text>
700     									align-items: flex-end;
701     									justify-content: flex-end;
702     								</text>
703     								break;
704     
705     						}
706     
707     
708     					}
709     
710     				}
711     			</style>
712     
713     			@CTAParagraphImage(
714     				_data.Image,
715     				true,
716     				_data.ImageAsBackground,
717     				_data.ImagePosition,
718     				_data.ParallaxImage,
719     				_data.Fullwidth,
720     				"",
721     				_data.Height,
722     				ColumnWidthSize,
723     				AnimationDuration,
724     				AnimateHalfBlock
725     			)
726     			@CTAParagraphContent(
727     				paragraphID,
728     				contentElementAlign,
729     				_data.Header,
730     				_data.SubHeader,
731     				_data.Content,
732     				_data.Button,
733     				_data.ExtraButton,
734     				_data.Image,
735     				_data.CenterVertical,
736     				subheaderFontConfig,
737     				headerFontConfig,
738     				contentFontConfig,
739     				_data.ImagePosition,
740     				AnimationDuration,
741     				AnimateHalfBlock
742     			)
743     
744     			@if (clickableBlock)
745     			{
746     				<a href="@_data.Button.GetLink(Pageview)" class="cta-paragraph__clickable" @newWindow @ariaLabel></a>
747     			}
748     
749     		</div>
750     
751     		<style>
752     			.cta-paragraph--@paragraphID .cta-paragraph__gradient {
753     				@BackgroundGradient
754     			}
755     		</style>
756     
757     	</section>
758     }
759     

Error executing template "Designs/deBisschop_generated/Paragraph/CTAParagraph.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
   at Bluedesk.DynamicWeb.ItemTypes.CTAParagraph.get_BackgroundConfiguration()
   at CompiledRazorTemplates.Dynamic.RazorEngine_3293b55d49cf4d8a9b29146fb2146061.Execute() in E:\Dynamicweb.NET\Groco-DeBisschop\Production\host\files\Templates\Designs\deBisschop_generated\Paragraph\CTAParagraph.cshtml:line 246
   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     
  6     
  7     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
  8     @using Dynamicweb;
  9     @using Dynamicweb.Content.Items;
 10     @using Bluedesk.DynamicWeb.ItemTypes;
 11     
 12     @{
 13     
 14     	var paragraphID = Pageview.CurrentParagraph.ID;
 15     
 16     	CTAParagraph _data = ItemManager.Storage.GetById<CTAParagraph>(Pageview.CurrentParagraph.ItemId ?? "0");
 17     
 18     	string contentRightClass = _data.ImagePosition.Equals("right") ? "image-right" : "image-left";
 19     
 20     	string newWindow = _data.Button.NewWindow ? "target='_blank'" : "";
 21     	string ariaLabel = !string.IsNullOrWhiteSpace(_data.Button.ButtonAriaLabel) ? "aria-label='" + _data.Button.ButtonAriaLabel + "'" : "";
 22     	bool clickableBlock = !string.IsNullOrWhiteSpace(_data.Button.GetLink(Pageview)) && _data.Clickable;
 23     	string clickableClass = clickableBlock ? "cta-paragraph__container--clickable" : "";
 24     	string ctaHasBackgroundImageClass = _data.ImageAsBackground ? "cta-paragraph--hasbackgroundimg" : "";
 25     
 26     	string ParagraphHeight = _data.Height == 0 ? "auto" : _data.Height + "px";
 27     
 28     	bool hasContent = !string.IsNullOrWhiteSpace(_data.Button.ButtonText) || !string.IsNullOrWhiteSpace(_data.Content.Text) || !string.IsNullOrWhiteSpace(_data.Header.HeaderFormatted());
 29     	double ColumnWidthSize = hasContent ? 0.5 : 1;
 30     
 31     	// string backgroundClass = getbackgroundclass(_data.BackgroundConfiguration.BackgroundClass);
 32     
 33     	string AnimateDirection = !string.IsNullOrWhiteSpace(_data.AnimateDirection) ? _data.AnimateDirection : "";
 34     	bool AnimateHalfBlock = false;
 35     	int AnimationDuration = _data.AnimateDuration;
 36     	string DataAosValue = "";
 37     
 38     	switch (AnimateDirection)
 39     	{
 40     		case "left":
 41     			DataAosValue = "fade-left";
 42     			break;
 43     
 44     		case "right":
 45     			DataAosValue = "fade-right";
 46     			break;
 47     
 48     		case "up":
 49     			DataAosValue = "fade-up";
 50     			break;
 51     
 52     		case "down":
 53     			DataAosValue = "fade-down";
 54     			break;
 55     
 56     		case "center":
 57     			AnimateHalfBlock = true;
 58     			break;
 59     
 60     		case "":
 61     		case "none":
 62     			// No action
 63     			break;
 64     	}
 65     
 66     }
 67     
 68     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
 69     @using Dynamicweb;
 70     @using Dynamicweb.Content.Items;
 71     @using Bluedesk.DynamicWeb.ItemTypes;
 72     
 73     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
 74     @using Dynamicweb;
 75     @using Dynamicweb.Content.Items;
 76     @using Bluedesk.DynamicWeb.ItemTypes;
 77     
 78     @functions {
 79     	
 80     	Dictionary<string, string> GetFontConfiguration(string TextColor, FontConfigurationItemTab FontConfiguration) 
 81     	{
 82     		var colorService = new ColorSwatchService();
 83     		TextColor = !string.IsNullOrWhiteSpace(TextColor) ? TextColor : "" ;
 84     		TextColor = !TextColor.Contains("#") ? colorService.GetHexColor(Pageview.AreaID, TextColor) : TextColor;
 85     		Dictionary<string, string> FontConfig = new Dictionary<string, string>() {
 86     			{ "textColor" , TextColor },
 87     			{ "fontSize" , FontConfiguration.FontSize },
 88     			{ "lineHeight", FontConfiguration.LineHeight},
 89     			{ "fontFamily" , FontConfiguration.FontConfiguration.FontFamily },
 90     			{ "fontWeight" , FontConfiguration.FontWeight },
 91     			{ "fontStyle" , FontConfiguration.FontStyle }
 92     		};
 93     		return FontConfig;
 94     	}
 95     
 96     	public string GenerateButtonConfigVariables(ButtonConfiguration BC, MasterConfig mc, int areaId) 
 97     	{
 98     		string ButtonLabelAlignment = BC.ButtonLabelAlignment;
 99     		switch (ButtonLabelAlignment)
100     		{
101     			case "align-left":
102     				ButtonLabelAlignment = "flex-start";
103     				break;
104     			case "align-center":
105     				ButtonLabelAlignment = "center";
106     				break;
107     			case "align-right":
108     				ButtonLabelAlignment = "flex-end";
109     				break;
110     			case "align-full":
111     				ButtonLabelAlignment = "space-between";
112     				break;
113     			default:
114     				ButtonLabelAlignment = "flex-start";
115     				break;
116     		}
117     	
118     		var btnStyleBlock = new System.Text.StringBuilder();
119     
120     		// General Config
121     		btnStyleBlock.Append(GenerateCssVar("btn-min-height", $"{mc.GeneralConfiguration.ButtonHeight}px"));
122     		btnStyleBlock.Append(GenerateCssVar("btn-border-radius", $"{mc.GeneralConfiguration.RoundedCornerValue}px"));
123     
124     		// Button Config
125     		btnStyleBlock.Append(GenerateCssVar("btn-border-width", $"{BC.BorderSize.ToString()}px"));
126     		btnStyleBlock.Append(GenerateCssVar("btn-label-alignment", ButtonLabelAlignment));
127     
128     		// Button Config Tab
129     		btnStyleBlock.Append(GenerateCssVar("btn-bg-color", BC.ButtonColorConfiguration.BackgroundColor.GetColorCode(areaId)));
130     		btnStyleBlock.Append(GenerateCssVar("btn-font-color", BC.ButtonColorConfiguration.FontColor.GetColorCode(areaId)));
131     		btnStyleBlock.Append(GenerateCssVar("btn-border-color", BC.ButtonColorConfiguration.BorderColor.GetColorCode(areaId)));
132     
133     		// Button Config Hover tab
134     		btnStyleBlock.Append(GenerateCssVar("btn-bg-color-hover", BC.ButtonHoverColorConfiguration.BackgroundColor.GetColorCode(areaId)));
135     		btnStyleBlock.Append(GenerateCssVar("btn-font-color-hover", BC.ButtonHoverColorConfiguration.FontColor.GetColorCode(areaId)));
136     		btnStyleBlock.Append(GenerateCssVar("btn-border-color-hover", BC.ButtonHoverColorConfiguration.BorderColor.GetColorCode(areaId)));
137     
138     		// Button Config Font Config
139     		btnStyleBlock.Append(GenerateCssVar("btn-font-size", BC.FontConfiguration.FontSize));
140     		btnStyleBlock.Append(GenerateCssVar("btn-font-config-color", BC.FontConfiguration.Color.GetColorCode(areaId)));
141     		btnStyleBlock.Append(GenerateCssVar("btn-font-line-height", BC.FontConfiguration.LineHeight));
142     		btnStyleBlock.Append(GenerateCssVar("btn-font-family", BC.FontConfiguration.FontConfiguration.FontFamily));
143     		btnStyleBlock.Append(GenerateCssVar("btn-font-weight", BC.FontConfiguration.FontWeight));
144     		btnStyleBlock.Append(GenerateCssVar("btn-font-transform", BC.FontConfiguration.FontStyle));
145     
146     		return btnStyleBlock.ToString();
147     	}
148     
149         public string GenerateCssVar(string name, string value)
150         {
151             if (!string.IsNullOrWhiteSpace(value)) {
152                 return $"--{name}: {value};";
153             } else {
154     			return "";
155     		}
156         }
157     }
158     
159     
160     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
161     @using Dynamicweb;
162     @using Dynamicweb.Content.Items;
163     @using Bluedesk.DynamicWeb.ItemTypes;
164     @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
165     
166     
167     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
168     @using Dynamicweb;
169     @using Dynamicweb.Content.Items;
170     @using Bluedesk.DynamicWeb.ItemTypes;
171     @using Bluedesk.DynamicWeb.ItemTypes.Extensions;
172     @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
173     @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration;
174     
175     @helper RenderButton(ButtonConfiguration ButtonConfiguration, string btnLink, string btnClass, string btnText, string ariaLabel = "", bool newWindow = false, string btnIcon = "", string btnExtraClass = "", string btnTextClass = "", string btnIconClass = "")
176     {
177     	string buttonID = ButtonConfiguration.Id;
178     	var master_configuration = Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "MasterConfiguration");
179     	MasterConfig mc = master_configuration.Item.ToCodeFirstItem<MasterConfig>();
180     
181     	string FontAwesomeLibrary = mc.GeneralConfiguration.fontawesomeStyle;
182     	bool HideIcon = ButtonConfiguration.HideIcon;
183     	string CustomIconClass = !string.IsNullOrWhiteSpace(ButtonConfiguration.CustomIcon) ? ButtonConfiguration.CustomIcon : !string.IsNullOrWhiteSpace(btnIcon) ? btnIcon : "fa-chevron-right";
184     	string IconPositionClass = HideIcon ? "default-btn--no-icon" : mc.GeneralConfiguration.IconPosition == "left" ? "default-btn--icon-left" : "";
185     
186     	string target = newWindow ? "_blank" : "_self";
187     	string ariaText = !string.IsNullOrWhiteSpace(ariaLabel) ? "aria-label='" + ariaLabel + "'" : "";
188     
189     	string styleBlock = GenerateButtonConfigVariables(ButtonConfiguration, mc, Pageview.AreaID);
190     
191     	if (!string.IsNullOrWhiteSpace(btnLink) && !string.IsNullOrWhiteSpace(btnText))
192     	{
193     		<a href="@btnLink" class="btn default-btn default-btn--@buttonID @IconPositionClass @btnClass @btnExtraClass" target="@target" @ariaText style="@styleBlock">
194     			<span class="btn__text @btnTextClass">@btnText</span>
195     			@if (!HideIcon)
196     			{
197     				<i class="btn__icon @FontAwesomeLibrary @CustomIconClass @btnIconClass"></i>
198     			}
199     		</a>
200     	}
201     }
202     
203     @helper RenderFontConfig(Dictionary<string, string> FontConfig) 
204     {
205     	<text>color: @FontConfig["textColor"] !important;</text>
206     
207     	if (!string.IsNullOrWhiteSpace(FontConfig["textColor"]))
208     	{
209     		<text>
210     			color: @FontConfig["textColor"] !important;
211     		</text>
212     	}
213     
214     	if (!string.IsNullOrWhiteSpace(FontConfig["fontSize"]))
215     	{
216     		<text>font-size: @FontConfig["fontSize"] !important;</text>
217     	}
218     	if (!string.IsNullOrWhiteSpace(FontConfig["lineHeight"]))
219     	{
220     		<text>line-height: @FontConfig["lineHeight"] !important;</text>
221     	}
222     	if (!string.IsNullOrWhiteSpace(FontConfig["fontFamily"]))
223     	{
224     		<text>font-family: @FontConfig["fontFamily"] !important;</text>
225     	}
226     	if (!string.IsNullOrWhiteSpace(FontConfig["fontWeight"]))
227     	{
228     		<text>font-weight: @FontConfig["fontWeight"] !important;</text>
229     	}
230     	if (!string.IsNullOrWhiteSpace(FontConfig["fontStyle"]))
231     	{
232     		if (FontConfig["fontStyle"] != "none")
233     		{
234     			<text>text-transform: @FontConfig["fontStyle"] !important;</text>
235     		}
236     	}
237     }
238     
239     
240     @{
241     
242     	var colorService = new ColorSwatchService();
243     
244     	string fullWidthContainerClass = _data.Fullwidth ? "" : "container";
245     
246     	string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundConfiguration.BackgroundClass) : "";
247     	string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundColor) ? $"background-color: {_data.BackgroundConfiguration.BackgroundColor}; " : "";
248     	backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundConfiguration.BackgroundImage) ? $"background-image: url({_data.BackgroundConfiguration.BackgroundImage}); " : "";
249     }
250     
251     
252     @functions {
253     	string getbackgroundclass(string backgroundClass)
254     	{
255     		return !string.IsNullOrWhiteSpace(backgroundClass) ? string.Format("bg-{0}", backgroundClass) : "";
256     	}
257     }
258     
259     @helper CTAParagraphImage(
260     	ParagraphImageResizable Image,
261     	bool hasContent,
262     	bool ImageAsBackground,
263     	string ImagePosition,
264     	bool ParallaxImage,
265     	bool Fullwidth,
266     	string imagesHeight,
267     	int paragraphHeight,
268     	double ColumnWidthSize,
269     	int AnimationDuration = 300,
270     	bool AnimateHalfBlock = false
271     )
272     {
273     	if (!string.IsNullOrWhiteSpace(Image.Image))
274     	{
275     
276     		string image = !string.IsNullOrWhiteSpace(Image.Image) ? Image.Image : null;
277     		imagesHeight = hasContent ? imagesHeight : "100%";
278     		imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
279     
280     		string imageParrallax = ParallaxImage ? "rellax" : "";
281     		string imageAsBackground = ImageAsBackground ? "cta-paragraph__image--is-background" : "";
282     		double imageWidth = 2000;
283     
284     		imageWidth = Fullwidth ? imageWidth : 1200;
285     		imageWidth = !ImageAsBackground ? imageWidth * ColumnWidthSize : imageWidth;
286     
287     		string strImageWidth = imageWidth + "px";
288     		string strImageWidthSize = imageWidth + "w";
289     
290     		string ImageUrl;
291     		if (image.EndsWith(".gif"))
292     		{
293     			ImageUrl = image;
294     		}
295     		else
296     		{
297     			ImageUrl = "/Admin/Public/GetImage.ashx?Image=" + image + "&Crop=7&Format=webp&Quality=90&Compression=80";
298     			ImageUrl = ImageUrl.Replace("?x", "&x");
299     		}
300     
301     		string animationDirection = AnimateHalfBlock ? ImagePosition.Equals("right") ? "fade-left" : "fade-right" : "";
302     
303     		if (!string.IsNullOrWhiteSpace(Image.Image))
304     		{
305     
306     			<figure class="cta-paragraph__image-container @imageAsBackground @Image.PositionY @Image.PositionX" style="@imagesHeight" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
307     
308     				<picture class="cta-paragraph__image @Image.BackgroundSize @imageParrallax">
309     					@if (ImageUrl.EndsWith(".gif"))
310     					{
311     						<source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
312     						<source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
313     						<img src="@ImageUrl" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
314     					}
315     					else
316     					{
317     						<source media="(max-width: 400px)" srcset="@ImageUrl&Width=400">
318     						<source media="(max-width: 994px)" srcset="@ImageUrl&Width=994">
319     						<img src="@ImageUrl&Width=@imageWidth" loading="lazy" alt="@Image.ImageAlt" class="cta-paragraph__image @Image.BackgroundSize @imageParrallax" width="1980" height="500">
320     					}
321     				</picture>
322     
323     			</figure>
324     		}
325     	}
326     }
327     
328     @helper CTAParagraphContent(
329     	int paragraphID,
330     	string contentElementAlign,
331     	ParagraphHeader Header,
332     	ParagraphHeader SubHeader,
333     	ParagraphContent Content,
334     	CTAButton Button,
335     	CTAButton ExtraButton,
336     	ParagraphImage Image,
337     	bool strCenterVertical,
338     	Dictionary<string, string> subheaderFontConfig,
339     	Dictionary<string, string> headerFontConfig,
340     	Dictionary<string, string> contentFontConfig,
341     	string ImagePosition = "",
342     	int AnimationDuration = 300,
343     	bool AnimateHalfBlock = false
344     )
345     {
346     
347     	bool hasImage = !string.IsNullOrWhiteSpace(Image.Image) ? true : false;
348     	string noImageClass = hasImage ? "" : "no-image";
349     
350     	string centerTextClass = strCenterVertical ? "text-center" : "";
351     	string centerContent = !string.IsNullOrWhiteSpace(Image.Image) ? "" : "cta-paragraph__content--center";
352     
353     	string paragraphInstanceClass = "cta-paragraph__content--" + paragraphID;
354     
355     	string animationDirection = (AnimateHalfBlock && hasImage) ? ImagePosition.Equals("right") ? "fade-right" : "fade-left" : "";
356     
357     	//string button__fontfamily = !string.IsNullOrWhiteSpace(Button.Configuration.FontConfiguration.FontConfiguration.FontFamily) Button.Configuration.FontConfiguration.FontConfiguration.FontFamily ? : null;
358     
359     	if (!string.IsNullOrWhiteSpace(Button.ButtonText) || !string.IsNullOrWhiteSpace(Content.Text) || !string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
360     	{
361     
362     		<style>
363     
364     		.multicolumn--@paragraphID .cta-paragraph .cta-paragraph__subheader,
365     		.cta-paragraph--@paragraphID .cta-paragraph__subheader {
366     			@RenderFontConfig(subheaderFontConfig)
367     		}
368     
369     		.@paragraphInstanceClass .cta-paragraph__header {
370     			@RenderFontConfig(headerFontConfig)
371     		}
372     
373     		.@paragraphInstanceClass .cta-paragraph__text p,
374     		.@paragraphInstanceClass .cta-paragraph__text li {
375     			@RenderFontConfig(contentFontConfig)
376     		}
377     
378     		</style>
379     
380     		<section class="cta-paragraph__content @paragraphInstanceClass @centerContent @noImageClass" data-aos="@animationDirection" data-aos-duration="@AnimationDuration">
381     
382     			<article class="cta-paragraph__content-container @noImageClass">
383     
384     				@if (!string.IsNullOrWhiteSpace(Header.HeaderFormatted("cta-paragraph__header")))
385     				{
386     					<header class="cta-paragraph__header @centerTextClass">
387     						@if (SubHeader != null)
388     						{
389     							@SubHeader.HeaderFormatted("cta-paragraph__subheader")
390     						}
391     						@Header.HeaderFormatted("cta-paragraph__header")
392     					</header>
393     				}
394     
395     				@if (!string.IsNullOrWhiteSpace(Content.Text))
396     				{
397     					<div class="cta-paragraph__text @centerTextClass">@Content.Text</div>
398     				}
399     
400     				@if (!string.IsNullOrWhiteSpace(Button.GetLink(Pageview)) && !string.IsNullOrWhiteSpace(Button.ButtonText))
401     				{
402     					<nav class="cta-paragraph__btn-navigation @centerTextClass">
403     						@RenderButton(Button.Configuration, Button.GetLink(Pageview), Button.Configuration.ButtonClass, Button.ButtonText, Button.ButtonAriaLabel, Button.NewWindow, "", "cta-paragraph__btn cta-paragraph__btn--first", "cta-paragraph__btn-label", "cta-paragraph__btn-icon")
404     						@RenderButton(ExtraButton.Configuration, ExtraButton.GetLink(Pageview), ExtraButton.Configuration.ButtonClass, ExtraButton.ButtonText, ExtraButton.ButtonAriaLabel, ExtraButton.NewWindow, "", "cta-paragraph__btn cta-paragraph__btn--extra", "cta-paragraph__btn-label", "cta-paragraph__btn-icon")
405     					</nav>
406     				}
407     
408     			</article>
409     		</section>
410     
411     	}
412     
413     }
414     
415     @helper CTAParagraphVideo(ParagraphVideo Video, string imagesHeight)
416     {
417     	if (!string.IsNullOrWhiteSpace(Video.YoutubeLink) || !string.IsNullOrWhiteSpace(Video.VimeoLink))
418     	{
419     		string YoutubeID = Video.YoutubeId;
420     		string YoutubeLink = Video.YoutubeLink;
421     
422     		string VimeoID = Video.VimeoId;
423     		string VimeoLink = Video.VimeoLink;
424     
425     		int CleanVideo = Video.Clean ? 1 : 0;
426     		int ShowControls = Video.ShowControls ? 1 : 0;
427     		int AutoPlay = Video.AutoPlay ? 1 : 0;
428     		int LoopVideo = Video.LoopVideo ? 1 : 0;
429     		int MuteAudio = Video.MuteAudio ? 1 : 0;
430     		string hideControlsClass = Video.ShowControls ? "video-player-wrapper--hidecontrols" : "";
431     		string origin = Dynamicweb.Environment.Helpers.LinkHelper.GetHttpDomain();
432     		imagesHeight = !string.IsNullOrWhiteSpace(imagesHeight) ? "height: " + imagesHeight + ";" : "";
433     
434     		if (!string.IsNullOrWhiteSpace(YoutubeLink))
435     		{
436     			if(AutoPlay == 1) 
437     			{
438     				<section class="cta-paragraph__video-container" style="@imagesHeight">
439     					<div class="">
440     						<div class="video-player-wrapper @hideControlsClass">
441     							<iframe class="video-player" loading="lazy" data-video="@YoutubeID" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube-nocookie.com/embed/@YoutubeID?autoplay=@AutoPlay&controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=1"></iframe>
442     						</div>
443     					</div>
444     				</section>
445     			} 
446     			else 
447     			{
448     				<lite-youtube videoid="@YoutubeID" params="controls=@ShowControls&loop=@LoopVideo&playlist=@YoutubeID&playsinline=1&modestbranding=@CleanVideo&mute=@MuteAudio&rel=0&enablejsapi=1&origin=@origin&disablekb=1"></lite-youtube>
449     			}
450     		}
451     		if (!string.IsNullOrWhiteSpace(VimeoLink))
452     		{
453     			<section class="cta-paragraph__video-container" style="@imagesHeight">
454     				<div class="">
455     					<div class="video-player-wrapper">
456     						<iframe class="video-player" loading="lazy" data-video="@VimeoID" frameborder="0" allowfullscreen 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>
457     					</div>
458     				</div>
459     			</section>
460     		}
461     	}
462     }
463     
464     @helper CTAParagraphIcon(ParagraphIcon Icon, bool strCenterVertical)
465     {
466     	if (!string.IsNullOrWhiteSpace(Icon.FaIcon))
467     	{
468     		string centerIconClass = strCenterVertical ? "justify-center" : "justify-start";
469     		string iconSizeClass = string.Format("cta-paragraph__icon--{0}", Icon.FaIconSize);
470     
471     		<div class="cta-paragraph__icon-container">
472     			<div class="cta-paragraph__icon-inner-container @centerIconClass">
473     				<span class="cta-paragraph__icon @iconSizeClass">@Icon.FaIcon</span>
474     			</div>
475     		</div>
476     	}
477     }
478     
479     @helper RenderContentAlignment(BackgroundConfiguration data)
480     {
481     
482     	switch (data.ContentElementAlign)
483     	{
484     		case "align-left":
485     			<text>
486     				align-items: flex-start;
487     				text-align: left;
488     			</text>
489     			break;
490     		case "align-center":
491     			<text>
492     				align-items: center;
493     				text-align: center;
494     			</text>
495     			break;
496     		case "align-right":
497     			<text>
498     				align-items: flex-end;
499     				text-align: right;
500     			</text>
501     			break;
502     		case "align-full":
503     			<text>
504     				align-items: flex-start;
505     				text-align: justify;
506     			</text>
507     			break;
508     	}
509     
510     }
511     
512     @inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
513     @using Dynamicweb;
514     @using Dynamicweb.Content.Items;
515     @using Bluedesk.DynamicWeb.ItemTypes;
516     
517     <style>
518     	@@media screen and (min-width: 991px) {
519     		.cta-paragraph__container--@paragraphID {
520     			height: @ParagraphHeight !important;
521     		}
522     	}
523     
524     	.header--desktop.headerNew {
525     		position: relative;
526     	}
527     
528     		.header--desktop.headerNew.stickyheader {
529     			position: fixed;
530     		}
531     
532     	.full {
533     	}
534     
535     	.divided {
536     		
537     	}
538     
539     </style>
540     
541     
542     @if (_data != null)
543     {
544     
545     	var subheaderFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTASubheaderTextColor, _data.BackgroundConfiguration.FontConfigurationSubheader);
546     	var headerFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTAHeaderTextColor, _data.BackgroundConfiguration.FontConfigurationHeader);
547     	var contentFontConfig = GetFontConfiguration(_data.BackgroundConfiguration.CTAContentTextColor, _data.BackgroundConfiguration.FontConfigurationContent);
548     
549     	string contentBackgroundColor = _data.BackgroundConfiguration.contentBackgroundColor;
550     	string contentBorderColor = _data.BackgroundConfiguration.contentBorderColor;
551     
552     	string contentBorderSize = _data.BackgroundConfiguration.contentBorderSize + "px";
553     
554     	bool Shadow = _data.BackgroundConfiguration.contentShadow;
555     
556     	string ctaBackgroundColor = _data.BackgroundConfiguration.BackgroundColor;
557     	string BackgroundPadding = _data.BackgroundConfiguration.backgroundPadding;
558     
559     	bool Containerfit = _data.BackgroundConfiguration.ContainerFit == "Fit" ? true : false;
560     	if (!string.IsNullOrWhiteSpace(contentRightClass)) {
561     		contentRightClass = Containerfit ? "" : contentRightClass;
562     	}
563     
564     
565     	string backgroundImageRepeatClass = _data.BackgroundConfiguration.BackgroundImageRepeat;
566     	string backgroundImageSizeClass = "";
567     
568     	string BackgroundImagePositionX = _data.BackgroundConfiguration.BackgroundImagePositionX;
569     	string BackgroundImagePositionY = _data.BackgroundConfiguration.BackgroundImagePositionY;
570     
571     
572     	string BackgroundImagePositionClass = "";
573     
574     	string BackgroundGradient = _data.BackgroundConfiguration.BackgroundGradient;
575     
576     	if (backgroundImageRepeatClass == "no-repeat")
577     	{
578     		BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX;
579     		backgroundImageSizeClass = _data.BackgroundConfiguration.BackgroundImageSize;
580     	}
581     
582     	string contentElementAlign = _data.BackgroundConfiguration.ContentElementAlign;
583     
584     	//subheaderFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, subheaderFontConfig["textColor"]);
585     	//headerFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, headerFontConfig["textColor"]);
586     	//contentFontConfig["textColor"] = colorService.GetHexColor(Pageview.AreaID, contentFontConfig["textColor"]);
587     
588     	ctaBackgroundColor = colorService.GetHexColor(Pageview.AreaID, ctaBackgroundColor);
589     	contentBackgroundColor = colorService.GetHexColor(Pageview.AreaID, contentBackgroundColor);
590     	contentBorderColor = colorService.GetHexColor(Pageview.AreaID, contentBorderColor);
591     
592     	string shadowClass = Shadow ? "contentShadow" : "";
593     
594     	<section class="cta-paragraph cta-paragraph--@paragraphID @backgroundClass @_data.CssClass @backgroundImageRepeatClass @BackgroundImagePositionClass @backgroundImageSizeClass @BackgroundPadding @ctaHasBackgroundImageClass" data-paragraphid="@paragraphID" id="@paragraphID" style="@backgroundStyle" data-aos="@DataAosValue" data-aos-duration="@AnimationDuration">
595     
596     		<div class="cta-paragraph__container cta-paragraph__container--@paragraphID @fullWidthContainerClass @clickableClass @contentRightClass @shadowClass">
597     
598     			<style>
599     				.cta-paragraph--@paragraphID {
600     					background-color: @ctaBackgroundColor;
601     					@if (!string.IsNullOrWhiteSpace(BackgroundGradient))
602     					{
603     						@BackgroundGradient
604     					}
605     				}
606     
607     				.cta-paragraph__container--@paragraphID
608     				{
609     					border: @contentBorderSize @contentBorderColor solid;
610     					@if (!string.IsNullOrWhiteSpace(contentBackgroundColor)) {
611     
612     						<text>background-color: @contentBackgroundColor</text>
613     
614     					}
615     				}
616     
617     				.cta-paragraph--@paragraphID .cta-paragraph__content-container
618     				{
619     					@RenderContentAlignment(_data.BackgroundConfiguration)
620     				}
621     
622     				.cta-paragraph--@paragraphID .cta-paragraph__content {
623     					@if (Containerfit)
624     					{
625     						<text>
626     							flex-grow: 0;
627     						</text>
628     					}
629     				}
630     
631     				.cta-paragraph--@paragraphID .cta-paragraph__image-container {
632     					@if (Containerfit)
633     					{
634     						<text>
635     							position: absolute;
636     							top: 0;
637     							left: 0;
638     							right: 0;
639     							bottom: 0;
640     							</text>
641     					}
642     				}
643     
644     				.cta-paragraph--@paragraphID .cta-paragraph__btn-navigation,
645     				.cta-paragraph--@paragraphID .cta-paragraph__container{
646     					@if (Containerfit)
647     					{
648     
649     						switch (_data.BackgroundConfiguration.ContainerFitContentAlignment) {
650     							case "TopLeft":
651     								<text>
652     									align-items: flex-start;
653     									justify-content: flex-start;
654     								</text>
655     								break;
656     							case "TopCenter":
657     								<text>
658     									align-items: flex-start;
659     									justify-content: center;
660     								</text>
661     								break;
662     							case "TopRight":
663     								<text>
664     									align-items: flex-start;
665     									justify-content : flex-end;
666     								</text>
667     								break;
668     							case "MiddleLeft":
669     								<text>
670     									align-items: center;
671     									justify-content : flex-start;
672     								</text>
673     								break;
674     							case "MiddleCenter":
675     								<text>
676     									align-items: center;
677     									justify-content: center;
678     								</text>
679     								break;
680     							case "MiddleRight":
681     								<text>
682     									align-items : center;
683     									justify-content : flex-end;
684     								</text>
685     								break;
686     							case "BottomLeft":
687     								<text>
688     									align-items : flex-end;
689     									justify-content : flex-start;
690     								</text>
691     								break;
692     							case "BottomCenter":
693     								<text>
694     									align-items: flex-end;
695     									justify-content: center;
696     								</text>
697     								break;
698     							case "BottomRight":
699     								<text>
700     									align-items: flex-end;
701     									justify-content: flex-end;
702     								</text>
703     								break;
704     
705     						}
706     
707     
708     					}
709     
710     				}
711     			</style>
712     
713     			@CTAParagraphImage(
714     				_data.Image,
715     				true,
716     				_data.ImageAsBackground,
717     				_data.ImagePosition,
718     				_data.ParallaxImage,
719     				_data.Fullwidth,
720     				"",
721     				_data.Height,
722     				ColumnWidthSize,
723     				AnimationDuration,
724     				AnimateHalfBlock
725     			)
726     			@CTAParagraphContent(
727     				paragraphID,
728     				contentElementAlign,
729     				_data.Header,
730     				_data.SubHeader,
731     				_data.Content,
732     				_data.Button,
733     				_data.ExtraButton,
734     				_data.Image,
735     				_data.CenterVertical,
736     				subheaderFontConfig,
737     				headerFontConfig,
738     				contentFontConfig,
739     				_data.ImagePosition,
740     				AnimationDuration,
741     				AnimateHalfBlock
742     			)
743     
744     			@if (clickableBlock)
745     			{
746     				<a href="@_data.Button.GetLink(Pageview)" class="cta-paragraph__clickable" @newWindow @ariaLabel></a>
747     			}
748     
749     		</div>
750     
751     		<style>
752     			.cta-paragraph--@paragraphID .cta-paragraph__gradient {
753     				@BackgroundGradient
754     			}
755     		</style>
756     
757     	</section>
758     }
759