I noticed that the main image (for example, ProductNumber.jpg) is repeated when rendering the alternate images (like ProductNumber-a.jpg). To fix it, I change the code in RenderCarousel in MainImage.cshtml around line 158 to this:
@RenderProductImage(GetProductImage(), slidesInView == 1, isModal ? "modal--full__img" : "", true, isModal)
@foreach (LoopItem alternativeImage in GetLoop("Ecom:Product.AlternativeImages"))
{
var alternativeImageUrl = alternativeImage.GetString("Ecom:Product.AlternativeImages.Image");
if (!string.IsNullOrEmpty(alternativeImageUrl))
{
if (alternativeImageUrl != GetProductImage())
{
@RenderProductImage(alternativeImageUrl, slidesInView == 1, isModal ? "modal--full__img" : "", false, isModal)
}
}
}
This checks if the path of the main image matches that of one of the alternative images. Is that the correct fix? Or is there a backend way of doing this?