Dynamicweb Rapido

Die schnellste Möglichkeit Ihre E-Commerce Lösung in Betrieb zu nehmen. Rapido ist unser Framework zur Implementierung Ihrer E-Commerce Lösung und reduziert die Zeit und den Aufwand sowie das Risiko.

Error executing template "Designs/Rapido/Paragraph/ParagraphContainer.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
   at CompiledRazorTemplates.Dynamic.RazorEngine_120ca58010ea4fa893183030b3cad218.Execute() in E:\Dynamicweb.net\Solutions\Dynamicweb\dw2019.dynamicweb-cms.com\Files\Templates\Designs\Rapido\Paragraph\ParagraphContainer.cshtml:line 343
   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.b__0(TextWriter writer)
   at RazorEngine.Templating.RazorEngineServiceExtensions.WithWriter(Action`1 withWriter)
   at Dynamicweb.Rendering.Template.RenderRazorTemplate()

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

Rapido Vorteile

Weniger Zeit und Risiko

Weniger Zeit und Risiko​

• Konfiguration statt Coding reduziert das Projektrisiko

• Schnellere Implementierung

• Beschleunigen Sie Ihr digitales Geschäft

Befähigt Endnutzer​

Befähigt Endnutzer​

• Konfigurieren Sie Ihr Website Design und Layout

• Rapido verfügt über viele vorbereitete Widgets 

• Vollständig personalisierbar und erweiterbar

Aktualisierbar

Aktualisierbar

• Auf neue Versionen/Patches zu upgraden war noch nie einfacher

• Nutzen Sie unser Erweiterungsframework für Personalisierungen

• Rapido Funktionen werden stetig aktualisiert 

Weniger Coding, mehr Konfiguration

Rapido ist eine standardisierte Plattform die dafür entwickelt wurde E-Commerce Lösungen und Prototypen schnell bereitzustellen.

Rapido verfügt über eine weite Bandbreite and Optionen und Designs für eine effiziente Implementierung. Unsere Best-Practices sorgen für eine schnelle und hochwertige E-Commerce Bereitstellung -  Weniger Coding, Mehr Konfiguration.

Sehen Sie dieses 2-minütige Video über Rapido

Image
Image

Works on all devices

Deploying your Rapido solution is the best and most reliable way to get your new Ecommerce site up and running – at the fastest speed.

Rapido can be configured to the extreme and ships with a set of website settings allowing you to change layout options with only a few clicks. It has never been easier to be consistent in your visual identity.

Do you want to experience it yourself? Try our online trial version

Go live in no time

Our standard solution Dynamicweb Rapido consists of premade configurable frontend templates as well as several tools that work seamlessly with our All-in-One Business Suite, giving you a head-start and lowering your time-to-market.

Watch demo webinar: 4 Rapido features in just 30 minutes

Image
Error executing template "Designs/Rapido/Paragraph/ParagraphContainer.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
   at CompiledRazorTemplates.Dynamic.RazorEngine_120ca58010ea4fa893183030b3cad218.Execute() in E:\Dynamicweb.net\Solutions\Dynamicweb\dw2019.dynamicweb-cms.com\Files\Templates\Designs\Rapido\Paragraph\ParagraphContainer.cshtml:line 343
   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.b__0(TextWriter writer)
   at RazorEngine.Templating.RazorEngineServiceExtensions.WithWriter(Action`1 withWriter)
   at Dynamicweb.Rendering.Template.RenderRazorTemplate()

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

New marketing strategy and B2B website

Due to the easy design of the website and the requirements of Byosis, Dynamicweb was chosen in combination with Rapido. As a result, Byosis got a good, reliable B2B web platform that contains all of the marketing tools that Byosis needs - in no time. 

The key advantages

 

  • A solid foundation to expand on
  • Quick prototyping with your data
  • Seamless integration with Dynamicweb Business Suite
  • A standard implementation which is part of our regular QA test flow
  • A full component library for creating your content
  • Built-in best-practice principles from leading UX experts

Download the latest Rapido release presentation

Image
Image

Rapido development

If the configuration doesn't cut it, Rapido gives you access to a clean, maintainable, and highly customizable code base for developing custom projects. Your Dynamicweb Partner assists you to accomplish anything you want using a variety of front-end technologies. 

Watch the latest Rapido release webinar

Rapido Factsheet

Implementation framework to improve time-to-market, reduce risk and development time with Dynamicweb projects.

Image
Nicolai Gosvig

Request a demo

Need a guided tour of Rapido?

I’m here if you want to get more details about our fast launch solution. 
We could also arrange a tailored demo, if you're interested?

Nicolai Gosvig
Product Specialist

Want more information?


Do you have questions or would you like to try a tailored demo?


Sign up for future Dynamicweb events and webinars. 


Be inspired - download white papers, watch webinars etc.

Error executing template "Designs/Rapido/Paragraph/ParagraphContainer.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
   at CompiledRazorTemplates.Dynamic.RazorEngine_120ca58010ea4fa893183030b3cad218.Execute() in E:\Dynamicweb.net\Solutions\Dynamicweb\dw2019.dynamicweb-cms.com\Files\Templates\Designs\Rapido\Paragraph\ParagraphContainer.cshtml:line 343
   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.b__0(TextWriter writer)
   at RazorEngine.Templating.RazorEngineServiceExtensions.WithWriter(Action`1 withWriter)
   at Dynamicweb.Rendering.Template.RenderRazorTemplate()

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

Latest Marketing blogs

Latest CMS blogs