Banner block preview not showing in Litium 7.0

Questions
1

Litium version: 7.0

Hi,
When adding blocks in Litium 7.0, the banner blocks is not getting previewed in backoffice.

image
image1683×904 196 KB

Below is the _BlockContainter.cshtml

image

2

Can you include the code for you banner block also? Please, format code using markdown tags instead of putting image with the code there to make it easier to copy/paste your code into an installation for testing.

3

Sure… Here is my code

BannerBlockContainer.cs

using System.Web.Mvc;
using Litium.Accelerator.Builders.Block;
using Litium.Web.Models.Blocks;

namespace Litium.Accelerator.Mvc.Controllers.Blocks
{
    public class BannerBlockController : ControllerBase
    {
        private readonly BannersBlockViewModelBuilder _builder;

        public BannerBlockController(BannersBlockViewModelBuilder builder)
        {
            _builder = builder;
        }

        [HttpGet]
        public ActionResult Index(BlockModel currentBlockModel)
        {
            var model = _builder.Build(currentBlockModel);
            return PartialView("~/Views/Block/Banners.cshtml", model);
        }
    }
}

BannerBlockViewModelBuilder.cs

using Litium.Accelerator.ViewModels.Block;
using Litium.Runtime.AutoMapper;
using Litium.Web.Models.Blocks;

namespace Litium.Accelerator.Builders.Block
{
    public class BannersBlockViewModelBuilder : IViewModelBuilder<BannersBlockViewModel>
    {
        /// <summary>
        /// Build the banner block view model
        /// </summary>
        /// <param name="blockModel">The current banner block banner</param>
        /// <returns>Return the banner block view model</returns>
        public virtual BannersBlockViewModel Build(BlockModel blockModel)
        {
            return blockModel.MapTo<BannersBlockViewModel>();
        }
    }
}

BannerBlockItemViewModel.cs

using AutoMapper;
using JetBrains.Annotations;
using Litium.Accelerator.Constants;
using Litium.FieldFramework;
using Litium.FieldFramework.FieldTypes;
using Litium.Runtime.AutoMapper;
using Litium.Web.Models;
using System;
using System.Globalization;

namespace Litium.Accelerator.ViewModels.Block
{
    public class BannerBlockItemViewModel : IAutoMapperConfiguration
    {
        public ImageModel MobileImage { get; set; }
        public ImageModel Image { get; set; }
        public EditorString BlockRichText { get; set; }

        [UsedImplicitly]
        void IAutoMapperConfiguration.Configure(IMapperConfigurationExpression cfg)
        {
            cfg.CreateMap<MultiFieldItem, BannerBlockItemViewModel>()
               .ForMember(x => x.BlockRichText, m => m.MapFrom(c => c.Fields.GetValue<string>(BlockFieldNameConstants.BlockRichText, CultureInfo.CurrentUICulture)))
               .ForMember(x => x.Image, m => m.MapFrom(c => c.Fields.GetValue<Guid>(BlockFieldNameConstants.BlockImagePointer, CultureInfo.CurrentUICulture).MapTo<ImageModel>()))
               .ForMember(x => x.MobileImage, m => m.MapFrom(c => c.Fields.GetValue<Guid>(BlockFieldNameConstants.BlockMobileImagePointer, CultureInfo.CurrentUICulture).MapTo<ImageModel>()));
        }

        [UsedImplicitly]
        private class LinkUrlResolver : IValueResolver<MultiFieldItem, BannerBlockItemViewModel, string>
        {
            public string Resolve(MultiFieldItem source, BannerBlockItemViewModel destination, string destMember, ResolutionContext context)
            {
                var linkToPage = source.Fields.GetValue<PointerPageItem>(BlockFieldNameConstants.LinkToPage)?.MapTo<LinkModel>();
                if (!string.IsNullOrEmpty(linkToPage?.Href))
                {
                    return linkToPage.Href;
                }
                return "";
            }
        }
    }
}

BannersBlockViewModel.cs

using System;
using System.Linq;
using System.Collections.Generic;
using AutoMapper;
using Litium.Runtime.AutoMapper;
using Litium.Web.Models.Blocks;
using Litium.FieldFramework;
using Litium.Blocks;
using JetBrains.Annotations;
using Litium.Accelerator.Builders;
using Litium.Accelerator.Constants;
using Litium.Web.Models;
using Litium.FieldFramework.FieldTypes;

namespace Litium.Accelerator.ViewModels.Block
{
    public class BannersBlockViewModel : IViewModel, IAutoMapperConfiguration
    {
        public Guid SystemId { get; set; }

        public List<BannerBlockItemViewModel> Banners { get; set; } = new List<BannerBlockItemViewModel>();

        [UsedImplicitly]
        void IAutoMapperConfiguration.Configure(IMapperConfigurationExpression cfg)
        {
            cfg.CreateMap<BlockModel, BannersBlockViewModel>()
               .ForMember(x => x.Banners, m => m.MapFrom<BannersResolver>());
        }

        private class BannersResolver : IValueResolver<BlockModel, BannersBlockViewModel, List<BannerBlockItemViewModel>>
        {
            private readonly FieldTemplateService _fieldTemplateService;

            public BannersResolver(FieldTemplateService fieldTemplateService)
            {
                _fieldTemplateService = fieldTemplateService;
            }

            public List<BannerBlockItemViewModel> Resolve(BlockModel block, BannersBlockViewModel bannersViewModel, List<BannerBlockItemViewModel> destMember, ResolutionContext context)
            {
                var result = new List<BannerBlockItemViewModel>();
                var blockTemplate = _fieldTemplateService.Get<FieldTemplateBase>(block.FieldTemplateSystemId);
                if (blockTemplate.FieldGroups.Any(x => x.Id == "Banners"))
                {
                    var banners = block.GetValue<IList<MultiFieldItem>>(BlockFieldNameConstants.Banners);
                    if (banners != null)
                    {
                        result.AddRange(banners.Select(c => c.MapTo<BannerBlockItemViewModel>()));
                    }
                }
                else if (blockTemplate.FieldGroups.Any(x => x.Id == "Banner"))
                {
                    var linkToPage = block.GetValue<PointerPageItem>(BlockFieldNameConstants.Link)?.MapTo<LinkModel>();
                    var banner = new BannerBlockItemViewModel()
                    {
                        BlockRichText = block.GetValue<string>(BlockFieldNameConstants.BlockRichText),
                        Image = block.GetValue<Guid>(BlockFieldNameConstants.BlockImagePointer).MapTo<ImageModel>(),
                        MobileImage = block.GetValue<Guid>(BlockFieldNameConstants.BlockMobileImagePointer).MapTo<ImageModel>()
                    };
                    result.Add(banner);
                }

                return result;
            }
        }
    }
}

Banners.cshtml

@model Litium.Accelerator.ViewModels.Block.BannersBlockViewModel
@{
    var hasBanner = Model.Banners != null && Model.Banners.Any();
    var MediumColumn = hasBanner ? 12 / Math.Min(Model.Banners.Count, 4) : 12;
}

@if (hasBanner)
{
    <div class="banner-block block">
        @foreach (var banner in Model.Banners)
        {
            var hasMobileImg = banner.MobileImage != null ? "hide-mobile" : "";
       <div class="banner">
            <div class="col-xs-12 col-md-3">
            </div>
            <div class="banner__text col-xs-12 col-md-5"><span>@banner.BlockRichText</span></div>
            @if (banner.Image != null)
            {
                <div class="banner__img banner__img--desktop @hasMobileImg" style="background-image: url('@(banner.Image?.GetUrlToImage(Size.Empty, new Size(1885, -1)).Url)')"></div>
                
            }
            @if (banner.MobileImage != null)
            {
                <div class="banner__img banner__img--mobile hide-desktop" style="background-image: url('@(banner.MobileImage?.GetUrlToImage(Size.Empty, new Size(959, -1)).Url)')"></div>

            }
        </div>
        }
    </div>
 
}

_BlockContainer.cshtml

@model List<Litium.Web.Models.Blocks.BlockModel>

@foreach (var item in Model)
{
    <section class="block__container" data-litium-block-id="@item.SystemId">
        @Html.Block(item)
    </section>
}
4

Can you see the block when previewing? On the right hand side, choose the context menu(the one with three dots), then choose Preview.

The thumbnail can be generated only if it can be rendered. Some common reasons that makes it hidden:

  • Not visible for any user/group. Check its permission.
  • Only visible for some specific groups. Check Audience and Permission.
  • Not active in any channel, or the active date is either in future or in the past. Check its channel setting.
5

If none of my suggestion works, maybe upgrading to latest version? There might be some bug fixes related to thumbnail fixed in latest version.

1 Like
6

When i choose preview, it previews the page. Seems like upgrading makes it work. Doing so

7

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.