1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
2 @using System.Collections.Generic
3 @using System
4 @using System.Text.RegularExpressions
5 @using Dynamicweb.Core
6
7 @functions {
8 public string GenerateRgba(string color, double opacity)
9 {
10 color = color.Replace("#", "");
11 if (color.Length == 6) {
12 return "rgba(" + Convert.ToInt32(color.Substring(0, 2), 16) + ", " + Convert.ToInt32(color.Substring(2, 2), 16) + ", " + Convert.ToInt32(color.Substring(4, 2), 16) + ", " + opacity + ");";
13 } else {
14 return Convert.ToInt16(color).ToString();
15 }
16 }
17 }
18
19 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
20 @using Dynamicweb.Frontend
21
22 @helper RenderContent(ItemViewModel item, bool isCarousel = false)
23 {
24 string cardClass = item.GetBoolean("ShowAsCard") ? "paragraph-card" : "grid__cell";
25 cardClass = Pageview.Device.ToString() != "Tablet" ? cardClass : "grid__cell";
26
27 string contentPosition = item.GetList("ContentPositions").SelectedValue;
28 string innerPadding = item.GetList("InnerPadding") != null ? "paragraph-container__body--padding-" + item.GetList("InnerPadding").SelectedValue : "";
29
30
31 switch (contentPosition)
32 {
33 case "title-top":
34 <div class="@cardClass @innerPadding dw-mod">
35 @RenderHeading(item)
36 @RenderImage(item, isCarousel)
37 @RenderText(item)
38 @RenderModule(item)
39 </div>
40 @RenderButton(item)
41 break;
42 case "image-left":
43 <div class="grid">
44 <div class="grid__col-3">
45 @RenderImage(item, isCarousel)
46 </div>
47 <div class="grid__col-9 @innerPadding dw-mod">
48 @RenderHeading(item)
49 @RenderText(item)
50 @RenderModule(item)
51 @RenderButton(item)
52 </div>
53 </div>
54 break;
55 case "image-right":
56 <div class="grid">
57 <div class="grid__col-9 @innerPadding dw-mod">
58 @RenderHeading(item)
59 @RenderText(item)
60 @RenderModule(item)
61 @RenderButton(item)
62 </div>
63 <div class="grid__col-3">
64 @RenderImage(item, isCarousel)
65 </div>
66 </div>
67 break;
68 case "all-centered":
69 <div class="@cardClass @innerPadding dw-mod">
70 <div class="u-ta-center">
71 @RenderImage(item, isCarousel)
72 @RenderHeading(item)
73 @RenderText(item)
74 @RenderModule(item)
75 </div>
76 </div>
77 @RenderButton(item)
78 break;
79 case "middle-center":
80 case "middle-left":
81 @*Part of styles is placed in Paragraph.cshtml & ParagraphContainer.cshtml*@
82 <div>
83 <div class="@cardClass @innerPadding dw-mod">
84 <div class="@(contentPosition == "middle-center" ? "u-ta-center" : "")">
85 @RenderImage(item, isCarousel)
86 @RenderHeading(item)
87 @RenderText(item)
88 @RenderModule(item)
89 </div>
90 </div>
91 @RenderButton(item)
92 </div>
93 break;
94 //for "image-top" and "image-centered"
95 default:
96 <div class="@cardClass">
97 @RenderImage(item, isCarousel)
98
99 <div class="@innerPadding dw-mod">
100 @RenderHeading(item)
101 @RenderText(item)
102 @RenderModule(item)
103 </div>
104 </div>
105 @RenderButton(item)
106 break;
107 }
108 }
109
110 @helper RenderHeading(ItemViewModel item)
111 {
112 if (item.GetBoolean("ShowTitle") != false && !string.IsNullOrEmpty(item.GetString("Title")))
113 {
114 string headerMargin = item.GetString("Text") != "" && item.GetString("Image") != "" ? "u-margin-bottom" : "";
115 headerMargin = Model.GetModuleOutput() == "" ? headerMargin : "u-margin-bottom";
116 string url = item.GetString("Link");
117
118 if (!String.IsNullOrEmpty(url))
119 {
120 if (item.GetBoolean("H1_Title") != false)
121 {
122 <a href="@url">
123 <h1 class="u-no-margin h2 @headerMargin">@item.GetString("Title")</h1>
124 </a>
125 }
126 else
127 {
128 <a href="@url">
129 <h2 class="u-no-margin @headerMargin">@item.GetString("Title")</h2>
130 </a>
131 }
132
133 }
134 else
135 {
136 if (item.GetBoolean("H1_Title") != false)
137 {
138 <h1 class="u-no-margin h2 @headerMargin">@item.GetString("Title")</h1>
139 }
140 else
141 {
142 <h2 class="u-no-margin @headerMargin">@item.GetString("Title")</h2>
143 }
144
145 }
146 }
147 }
148
149 @helper RenderButton(ItemViewModel item)
150 {
151 string url = item.GetString("Link");
152 string linkText = item.GetString("LinkText");
153 string secondaryUrl = item.GetString("SecondaryLink");
154 string secondaryLinkText = item.GetString("SecondaryLinkText");
155 string footerCssClass = "";
156 string cardFooterClass = item.GetBoolean("ShowAsCard") ? "paragraph-card-footer" : "grid__cell-footer";
157 cardFooterClass = Pageview.Device.ToString() != "Tablet" ? cardFooterClass : "";
158 string alingClass = "";
159 string spacing = item.GetList("InnerPadding") != null ? "paragraph-container__button--spacing-" + item.GetList("InnerPadding").SelectedValue : "";
160
161
162 if (item.GetList("ContentPositions").SelectedValue == "all-centered" || item.GetList("ContentPositions").SelectedValue == "middle-center")
163 {
164 footerCssClass = "grid--justify-center";
165 alingClass = "grid--justify-center";
166 }
167
168 if ((!string.IsNullOrEmpty(url) && !string.IsNullOrEmpty(linkText)) || (!string.IsNullOrEmpty(secondaryUrl) && !string.IsNullOrEmpty(secondaryLinkText)))
169 {
170 <div class="grid__cell @footerCssClass @cardFooterClass">
171 <div class="paragraph-container__button @spacing @alingClass dw-mod">
172
173 @if (!string.IsNullOrEmpty(url) && !string.IsNullOrEmpty(linkText))
174 {
175 string buttonStyle = !String.IsNullOrEmpty(item.GetList("ButtonDesign").SelectedValue) ? item.GetList("ButtonDesign").SelectedValue : "primary";
176 if (url.Contains("http"))
177 {
178 <a href="@url" class="btn btn--@buttonStyle dw-mod" target="_blank" rel="noopener">@linkText</a>
179 }
180 else if (url.Contains("/"))
181 {
182 <a href="@url" class="btn btn--@buttonStyle dw-mod" target="_blank">@linkText</a>
183 }
184 else
185 {
186 <a href="@url" class="btn btn--@buttonStyle dw-mod">@linkText</a>
187 }
188 }
189
190 @if (!string.IsNullOrEmpty(secondaryUrl) && !string.IsNullOrEmpty(secondaryLinkText))
191 {
192 string secondaryButtonStyle = !String.IsNullOrEmpty(item.GetList("SecondaryButtonDesign").SelectedValue) ? item.GetList("SecondaryButtonDesign").SelectedValue : "primary";
193 if (secondaryUrl.Contains("http"))
194 {
195 <a href="@secondaryUrl" class="btn btn--@secondaryButtonStyle u-margin-left dw-mod" rel="noopener">@secondaryLinkText</a>
196 }
197 else if (secondaryUrl.Contains("/"))
198 {
199 <a href="@secondaryUrl" class="btn btn--@secondaryButtonStyle u-margin-left dw-mod">@secondaryLinkText</a>
200 }
201 else
202 {
203 <a href="@secondaryUrl" class="btn btn--@secondaryButtonStyle u-margin-left dw-mod">@secondaryLinkText</a>
204 }
205 }
206 </div>
207 </div>
208 }
209 else
210 {
211 <div class="grid__cell-footer @footerCssClass @cardFooterClass"></div>
212 }
213 }
214
215 @helper RenderText(ItemViewModel item)
216 {
217 if (!string.IsNullOrWhiteSpace(item.GetString("Text")))
218 {
219 string url = item.GetString("Link");
220 if (!String.IsNullOrEmpty(url))
221 {
222
223 <a href="@url">
224 @item.GetString("Text")
225 </a>
226 }
227 else
228 {
229 @item.GetString("Text")
230 }
231
232
233
234
235 }
236 }
237
238 @helper RenderModule(ItemViewModel item)
239 {
240 @Model.GetModuleOutput();
241 }
242
243 @helper RenderImage(ItemViewModel item, bool isCarousel)
244 {
245 if (!string.IsNullOrEmpty(item.GetString("Image")) && item.GetList("ImageStyle").SelectedValue != "background")
246 {
247 string url = item.GetString("Link");
248
249 <div class="u-margin-bottom">
250 @if (!String.IsNullOrEmpty(url))
251 {
252 <a href="@url">
253 @RenderImageElement(item, isCarousel)
254 </a>
255 }
256 else
257 {
258 @RenderImageElement(item, isCarousel)
259 }
260 </div>
261 }
262 }
263
264 @helper RenderImageElement(ItemViewModel item, bool isCarousel)
265 {
266 string image = item.GetFile("Image") != null ? item.GetFile("Image").PathUrlEncoded : "";
267 string imageFocalPointParameters = item.GetFile("Image") != null ? "&" + item.GetFile("Image").GetFocalPointParameters() : "";
268 string imageFilterColor = item.GetList("ColorForTheFilter") != null ? item.GetList("ColorForTheFilter").SelectedValue : "none";
269 string imageFilterPrimary = item.GetList("ImageFilterPrimary") != null ? item.GetList("ImageFilterPrimary").SelectedValue : "none";
270 string imageFilterSecondary = item.GetList("ImageFilterSecondary") != null ? item.GetList("ImageFilterSecondary").SelectedValue : "none";
271 string imageFilterBall = item.GetList("ImageStyle").SelectedValue == "ball" ? "image-filter--ball" : "";
272 string altText = item.GetString("Title");
273 string imgCssClass = "";
274 string imgCrop = item.GetList("ImageCrop") != null ? item.GetList("ImageCrop").SelectedValue : "5";
275 bool fillCanvas = item.GetBoolean("FillCanvas");
276 string fillCanvasString = fillCanvas ? "&FillCanvas=true" : "";
277 string imageBoxWidth = "480";
278 int imageWidth = 1240;
279 int imageHeight = 950;
280 if (item.GetList("Width").SelectedValue != "auto")
281 {
282 imageWidth = Int32.Parse(item.GetList("Width").SelectedValue) < 8 ? 620 : 1240;
283 imageHeight = Int32.Parse(item.GetList("Width").SelectedValue) < 8 ? 496 : 950;
284 }
285 string placeHolderImage = "/Files/Images/placeholder.gif";
286
287 if (imageFilterPrimary == "colorize")
288 {
289 imageFilterPrimary = imageFilterColor;
290 }
291
292 if (item.GetList("ContentPositions").SelectedValue == "image-centered" || item.GetList("ContentPositions").SelectedValue == "all-centered" || item.GetList("ContentPositions").SelectedValue == "middle-center")
293 {
294 imgCssClass = "grid__cell-img--centered";
295 }
296
297 <div class="image image-filter image-filter--@imageFilterPrimary @imageFilterBall dw-mod js-main-image-filter @(item.GetList("ContentPositions").SelectedValue == "middle-center" ? "u-middle" : "")">
298 <div class="image-filter image-filter--@imageFilterSecondary @imageFilterBall dw-mod">
299
300 @if (item.GetList("ImageStyle").SelectedValue == "ball")
301 {
302 imgCssClass += " grid__cell-img--ball";
303 if (!isCarousel)
304 {
305 <img class="grid__cell-img @imgCssClass b-lazy" src="@placeHolderImage" data-src="/Admin/Public/GetImage.ashx?width=@imageBoxWidth&height=@imageBoxWidth&crop=@imgCrop&Compression=75&DoNotUpscale=true&FillCanvas=true&image=@image+@imageFocalPointParameters" alt="@altText">
306 }
307 else
308 {
309 <img class="grid__cell-img @imgCssClass" src="/Admin/Public/GetImage.ashx?width=@imageBoxWidth&height=@imageBoxWidth&crop=@imgCrop&Compression=75&DoNotUpscale=true&image=@image+@imageFocalPointParameters" alt="@altText">
310 }
311 }
312 else
313 {
314 string retinaImage = "/Admin/Public/GetImage.ashx?width=" + imageWidth * 2 + "&height=" + imageHeight * 2 + "&crop=" + imgCrop + "&Compression=75" + fillCanvasString + "&DoNotUpscale=true&image=" + image + imageFocalPointParameters;
315 string largeImage = "/Admin/Public/GetImage.ashx?width=" + imageWidth + "&height=" + imageHeight + "&crop=" + imgCrop + "&Compression=75" + fillCanvasString + "&DoNotUpscale=true&image=" + image + imageFocalPointParameters;
316 string smallImage = "/Admin/Public/GetImage.ashx?width=" + imageWidth + "&height=" + imageHeight + "&crop=" + imgCrop + "&Compression=75" + fillCanvasString + "&DoNotUpscale=true&image=" + image + imageFocalPointParameters;
317
318 if (!isCarousel)
319 {
320 <img class="@imgCssClass b-lazy" src="@placeHolderImage" data-src="@largeImage|@retinaImage" data-src-small="@smallImage" alt="@altText">
321 }
322 else
323 {
324 <img class="@imgCssClass" src="@largeImage" alt="@altText">
325 }
326 }
327 </div>
328 </div>
329 }
330
331 @{
332 string fontColor = !string.IsNullOrEmpty(Model.Item.GetString("FontColor")) && !Model.Item.GetString("FontColor").StartsWith("#") ? "u-" + Model.Item.GetString("FontColor").Replace(" ", "-").ToLower() : "";
333 string backgroundColor = !string.IsNullOrEmpty(Model.Item.GetString("BackgroundColor")) && !Model.Item.GetString("BackgroundColor").StartsWith("#") ? "u-" + Model.Item.GetString("BackgroundColor").Replace(" ", "-").ToLower() + "--bg" : "";
334 string colorSettings = Model.Item.GetString("FontColor").StartsWith("#") || Model.Item.GetString("BackgroundColor").StartsWith("#") ? "style=\"" : "";
335 string fontColorHex = Model.Item.GetString("FontColor").StartsWith("#") ? "color: " + Model.Item.GetString("FontColor") + ";" : "";
336 string backgroundColorHex = Model.Item.GetString("BackgroundColor").StartsWith("#") ? "background-color: " + Model.Item.GetString("BackgroundColor") + ";" : "";
337 colorSettings += fontColorHex;
338 colorSettings += backgroundColorHex;
339 colorSettings += Model.Item.GetString("FontColor").StartsWith("#") || Model.Item.GetString("BackgroundColor").StartsWith("#") ? "\"" : "";
340
341 string paragraphContainerClasses = "";
342 string containerClasses = "";
343 string gridClasses = "grid ";
344
345 string spacingSize = Model.Item.GetList("Spacing") != null && Model.Item.GetList("Spacing").SelectedValue != "" ? Model.Item.GetList("Spacing").SelectedValue : "lg";
346 string placeHolderImage = "/Files/Images/placeholder.gif";
347 int columnCount = 0;
348 int paragraphCount = 0;
349 int totalParagraphs = Model.Item.GetItems("Paragraph").Count;
350 int totalSlides = 1;
351
352 switch (Model.Item.GetList("Width").SelectedValue)
353 {
354 case "center":
355 containerClasses += "center-container paragraph-container ";
356 paragraphContainerClasses += " " + fontColor + " " + backgroundColor;
357 break;
358 case "full":
359 containerClasses += fontColor + " " + backgroundColor + " ";
360 paragraphContainerClasses += "paragraph-container--full-width ";
361 break;
362 case "combi":
363 paragraphContainerClasses += "paragraph-container--full-width " + fontColor + " " + backgroundColor + " ";
364 containerClasses += "center-container paragraph-container ";
365 break;
366 default:
367 paragraphContainerClasses += "center-container ";
368 break;
369 }
370
371 if (spacingSize == "none")
372 {
373 containerClasses += "paragraph-container--spacing-none ";
374 }
375
376 //background
377 string containerBackgroundImage = "";
378 string containerBackgroundImageLarge = "";
379 string containerBackgroundImageMedium = "";
380 string containerBackgroundImageSmall = "";
381 string containerBackgroundImageFilterColor = Model.Item.GetList("ColorForTheFilter") != null ? Model.Item.GetString("ColorForTheFilter").Replace(" ", "-").ToLower() : "none";
382 string containerBackgroundImageFilterPrimary = Model.Item.GetList("ImageFilterPrimary") != null ? Model.Item.GetList("ImageFilterPrimary").SelectedValue : "none";
383 string containerBackgroundImageFilterSecondary = Model.Item.GetList("ImageFilterSecondary") != null ? Model.Item.GetList("ImageFilterSecondary").SelectedValue : "none";
384 string containerBackgroundImageFilterColorCode = Model.Item.GetString("ColorForTheFilter").StartsWith("#") && containerBackgroundImageFilterPrimary == "colorize" ? "style=\"background-color: " + GenerateRgba(Model.Item.GetString("ColorForTheFilter"), 0.3) + "\"" : "";
385
386 if (containerBackgroundImageFilterPrimary == "colorize" && !containerBackgroundImageFilterPrimary.StartsWith("#"))
387 {
388 containerBackgroundImageFilterPrimary = containerBackgroundImageFilterColor;
389 }
390
391 if (Model.Item.GetFile("BackgroundImage") != null)
392 {
393 string focalPointParameters = Model.Item.GetFile("BackgroundImage") != null ? "&" + Model.Item.GetFile("BackgroundImage").GetFocalPointParameters() : "";
394 containerBackgroundImage = "/Admin/Public/GetImage.ashx?width=2500&height=1100&crop=0&Compression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("BackgroundImage").PathUrlEncoded + focalPointParameters;
395 containerBackgroundImageLarge = "/Admin/Public/GetImage.ashx?width=1920&height=845&crop=0&Compression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("BackgroundImage").PathUrlEncoded + focalPointParameters;
396 containerBackgroundImageMedium = "/Admin/Public/GetImage.ashx?width=1024&height=450&crop=0&&FillCanvas=TrueCompression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("BackgroundImage").PathUrlEncoded + focalPointParameters;
397 containerBackgroundImageSmall = "/Admin/Public/GetImage.ashx?width=640&height=544&crop=0&&FillCanvas=TrueCompression=85&DoNotUpscale=true&image=" + Model.Item.GetFile("BackgroundImage").PathUrlEncoded + focalPointParameters;
398 }
399 else if (string.IsNullOrEmpty(backgroundColor))
400 {
401 backgroundColor = "u-color-light--bg";
402 }
403
404 //separation line
405 bool haveSeparationLine = Model.Item.GetBoolean("SeperationLineAfter");
406 if (haveSeparationLine && Model.Item.GetList("Width").SelectedValue != "center")
407 {
408 paragraphContainerClasses += "multiple-paragraphs-container--seperation-line-after ";
409 }
410 else if (haveSeparationLine)
411 {
412 containerClasses += "multiple-paragraphs-container--seperation-line-after ";
413 }
414
415 //height
416 if (!string.IsNullOrEmpty(Model.Item.GetList("Height").SelectedValue))
417 {
418 if (Model.Item.GetList("Height").SelectedValue != "screen") {
419 gridClasses += "paragraph-container--height-" + Model.Item.GetList("Height").SelectedValue + " ";
420 } else {
421 gridClasses += " screen-height";
422 }
423 }
424
425 if (Model.Item.GetString("MakeParagraphsCenterAligned") != null && Model.Item.GetBoolean("MakeParagraphsCenterAligned"))
426 {
427 gridClasses += "grid--justify-center ";
428 }
429
430 string containerId = "Paragraph_" + Model.ID;
431 string carouselContainerClass = "";
432 string carouselSlideClass = "";
433
434 //Set as carousel
435 if (Model.Item.GetBoolean("EnableCarousel"))
436 {
437 containerClasses += "carousel";
438 containerClasses.Replace(" paragraph-container ", "");
439
440 carouselContainerClass += "carousel__container js-carousel-slides dw-mod ";
441
442 carouselSlideClass += "carousel__slide dw-mod ";
443
444 containerId = "Carousel_" + Model.ID;
445 }
446
447 //getting video ID from youtube URL
448 bool videoIsYouTube = false;
449 string videoCode = Model.Item.GetString("VideoURL");
450 Regex regex = new Regex(@".be\/(.[^?]*)");
451 Match match = regex.Match(videoCode);
452 string videoId = "";
453 if (match.Success)
454 {
455 videoId = match.Groups[1].Value;
456 videoIsYouTube = true;
457 }
458 else
459 {
460 regex = new Regex(@"v=([^&]+)");
461 match = regex.Match(videoCode);
462 if (match.Success)
463 {
464 videoId = match.Groups[1].Value;
465 videoIsYouTube = true;
466
467 }
468 }
469
470 regex = new Regex(@"vimeo\.com\/([0-9]+)");
471 match = regex.Match(videoCode);
472
473 if (match.Success)
474 {
475 videoId = match.Groups[1].Value;
476 videoIsYouTube = false;
477 }
478
479 }
480
481 <div class="grid__col-md-12 grid__col--bleed">
482 <section class="multiple-paragraphs-container @paragraphContainerClasses multiple-paragraphs-container--spacing-@spacingSize dw-mod" @colorSettings>
483 <div class="background-image image-filter image-filter--@containerBackgroundImageFilterPrimary dw-mod" @containerBackgroundImageFilterColorCode>
484 <div class="background-image__wrapper image-filter image-filter--@containerBackgroundImageFilterSecondary dw-mod">
485 <img class="background-image__cover dw-mod b-lazy" src="@placeHolderImage" data-src="@containerBackgroundImage" data-src-small="@containerBackgroundImageSmall" data-src-medium="@containerBackgroundImageMedium" data-src-large="@containerBackgroundImageLarge" alt="">
486 @if (!string.IsNullOrEmpty(videoId) && videoIsYouTube)
487 {
488
489 <div class="video-background">
490 <div class="video-background__container">
491 <div class="js-youtube-video" data-video="@videoId" id="ytPlayer@(Model.ID)"></div>
492 </div>
493 </div>
494 }
495 else if (!string.IsNullOrEmpty(videoId))
496 {
497 <div class="video-background">
498 <div class="video-background__container">
499 <div><iframe src="https://player.vimeo.com/video/@videoId?autoplay=1&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
500 <script src="https://player.vimeo.com/api/player.js"></script>
501 </div>
502 </div>
503 }
504 </div>
505 </div>
506 <div class="@containerClasses dw-mod" id="@containerId">
507 <div class="@carouselContainerClass">
508 <div class="@carouselSlideClass">
509 <div class="@gridClasses dw-mod">
510 @foreach (var paragraph in Model.Item.GetItems("Paragraph"))
511 {
512 int columnWidth = 12;
513 string columnCssClasses = "";
514 bool hideParagraph = Pageview.Device.ToString() == "Mobile" && paragraph.GetList("WidthMobile").SelectedValue.ToLower() == "hide" ? true : false;
515
516 if (paragraph.GetList("Width").SelectedValue != "auto") {
517 columnWidth = Pageview.Device.ToString() != "Mobile" ? Int32.Parse(paragraph.GetList("Width").SelectedValue) : 12;
518
519 if (columnCount < 12)
520 {
521 columnCount += columnWidth;
522 }
523 else
524 {
525 columnCount = columnWidth;
526 }
527
528 columnCssClasses = "grid__col-sm-" + columnWidth + " ";
529 } else {
530 columnCssClasses = "grid__col-auto ";
531 }
532
533 if (paragraph.GetList("WidthMobile").SelectedValue != "hide")
534 {
535 columnCssClasses += "grid__col-xs-" + paragraph.GetList("WidthMobile").SelectedValue + " ";
536 }
537
538 if (Model.Item.GetList("Height").SelectedValue == "screen")
539 {
540 columnCssClasses += " screen-height";
541 }
542
543 string backgroundImage = "";
544 string backgroundImageLarge = "";
545 string backgroundImageMedium = "";
546 string backgroundImageSmall = "";
547 int backgroundImageWidth = 2500;
548 int backgroundImageLargeWidth = 1920;
549 int backgroundImageMediumWidth = 1300;
550 int backgroundImageSmallWidth = 1024;
551 string imageStyle = paragraph.GetList("ImageStyle").SelectedValue;
552 string backgroundImageFilterColor = paragraph.GetList("ColorForTheFilter") != null ? paragraph.GetString("ColorForTheFilter").Replace(" ", "-").ToLower() : "none";
553 string backgroundImageFilterPrimary = paragraph.GetList("ImageFilterPrimary") != null ? paragraph.GetList("ImageFilterPrimary").SelectedValue : "none";
554 string backgroundImageFilterSecondary = paragraph.GetList("ImageFilterSecondary") != null ? paragraph.GetList("ImageFilterSecondary").SelectedValue : "none";
555 string backgroundImageFilterColorCode = paragraph.GetString("ColorForTheFilter").StartsWith("#") && backgroundImageFilterPrimary == "colorize" ? "style=\"background-color: " + GenerateRgba(paragraph.GetString("ColorForTheFilter"), 0.3) + "\"" : "";
556
557 if (columnWidth < 12) {
558 backgroundImageWidth = 1250;
559 backgroundImageLargeWidth = 960;
560 }
561
562 if (imageStyle == "background" && paragraph.GetFile("Image") != null)
563 {
564 string cropMode = paragraph.GetList("ImageCrop") != null ? paragraph.GetList("ImageCrop").SelectedValue : "0";
565 string focalPointParameters = paragraph.GetFile("Image") != null ? "&" + paragraph.GetFile("Image").GetFocalPointParameters() : "";
566 backgroundImage = "/Admin/Public/GetImage.ashx?width=" + backgroundImageWidth + "&height=1100&crop=" + cropMode + "&Compression=85&DoNotUpscale=true&image=" + paragraph.GetFile("Image").PathUrlEncoded + focalPointParameters;
567 backgroundImageLarge = "/Admin/Public/GetImage.ashx?width=" + backgroundImageLargeWidth + "&height=845&crop=" + cropMode + "&Compression=85&DoNotUpscale=true&image=" + paragraph.GetFile("Image").PathUrlEncoded + focalPointParameters;
568 backgroundImageMedium = "/Admin/Public/GetImage.ashx?width=" + backgroundImageMediumWidth + "&height=572&crop=" + cropMode + "&Compression=85&DoNotUpscale=true&image=" + paragraph.GetFile("Image").PathUrlEncoded + focalPointParameters;
569 backgroundImageSmall = "/Admin/Public/GetImage.ashx?width=" + backgroundImageSmallWidth + "&height=450&crop=" + cropMode + "&Compression=85&DoNotUpscale=true&image=" + paragraph.GetFile("Image").PathUrlEncoded + focalPointParameters;
570 }
571
572 if (backgroundImageFilterPrimary == "colorize" && !paragraph.GetString("ColorForTheFilter").StartsWith("#"))
573 {
574 backgroundImageFilterPrimary = backgroundImageFilterColor;
575 }
576
577 string paragraphContainerPadding = paragraph.GetBoolean("HidePadding") ? "paragraph-container--no-padding" : "";
578 string contentPosition = paragraph.GetList("ContentPositions").SelectedValue;
579 string contentPositionClasses = contentPosition == "middle-center" || contentPosition == "middle-left" ? "grid--justify-center " : "";
580 string link1 = paragraph.GetString("Link");
581
582 if (!hideParagraph) {
583 <div class="@columnCssClasses paragraph-container @paragraphContainerPadding dw-mod @contentPositionClasses">
584 @if (imageStyle == "background" && paragraph.GetFile("Image") != null)
585 {
586
587 if (!String.IsNullOrEmpty(link1))
588 {
589 <a href="@link1" style="display: block; width: 100%; height: 100%;">
590 <div class="background-image image-filter image-filter--@backgroundImageFilterPrimary dw-mod" @backgroundImageFilterColorCode>
591 <div class="background-image__wrapper image-filter image-filter--@backgroundImageFilterSecondary dw-mod">
592 <img class="background-image__cover dw-mod b-lazy" src="@placeHolderImage" data-src="@backgroundImage" data-src-small="@backgroundImageSmall" data-src-medium="@backgroundImageMedium" data-src-large="@backgroundImageLarge" alt="">
593 </div>
594 </div>
595 </a>
596 }
597 else{
598
599 <div class="background-image image-filter image-filter--@backgroundImageFilterPrimary dw-mod" @backgroundImageFilterColorCode>
600 <div class="background-image__wrapper image-filter image-filter--@backgroundImageFilterSecondary dw-mod">
601 <img class="background-image__cover dw-mod b-lazy" src="@placeHolderImage" data-src="@backgroundImage" data-src-small="@backgroundImageSmall" data-src-medium="@backgroundImageMedium" data-src-large="@backgroundImageLarge" alt="">
602 </div>
603 </div>
604 }
605 }
606
607
608 @RenderContent(paragraph, Model.Item.GetBoolean("EnableCarousel"))
609 </div>
610
611 paragraphCount++;
612 if (paragraphCount != totalParagraphs)
613 {
614 string breakMarkup = string.Empty;
615 if (columnCount == 12)
616 {
617 breakMarkup = "</div></div><div class=\"" + carouselSlideClass + "\"><div class=\"" + gridClasses + " dw-mod\">";
618 totalSlides++;
619 }
620 @breakMarkup
621 }
622 }
623 }
624 </div>
625 </div>
626 </div>
627
628 @if (Model.Item.GetBoolean("EnableCarousel") && totalSlides > 1)
629 {
630 bool enableDots = Model.Item.GetBoolean("ShowDots");
631 <script>
632 document.addEventListener("DOMContentLoaded", function () {
633 new CarouselModule("#@containerId", {
634 slideTime: @Model.Item.GetString("SlideTime"),
635 dots: @(Model.Item.GetBoolean("ShowDots").ToString().ToLower())
636 });
637 })
638 </script>
639 }
640 </div>
641 </section>
642 </div>
