'How to add styles to Sitecore Gallery module if Im using the same module on other pages
I have been stuck for hours. I have 4 Gallery modules I need to add styles/css on 1 module . When I tried to add class on Gallery-main I noticed that my entire module got the class name so I cannot edit the css of 1 module because it will affect the other module. Is there anyone who can help here so I can solve my problem ?
<div class="Gallery-container pham1">
<gallery v-cloak>
<gallery-main class="pham" :show-expand="@Model.ShowExpandButton.ToString().ToLower()">
@{
var a = new Foundation.AdvancedImage.Helper();
foreach (var childImage in Model.Children)
{
string imageText = "";
if (Model.ShowImageCaptionInNormalMode)
{
imageText = childImage.Image?.GetTarget<ItemWrapper>()?.InnerItem()?["Description"];
}
var model = childImage.Image.GetSourceSet(Model.BreakPoints, imageClass: "Image--fill");
model.DesktopColumns = Model.DesktopColumns;
model.TabletColumns = Model.TabletColumns;
var previewUrl = childImage.Image?.GetSourceUri(new AdvancedImageFieldWrapperOptions() { CropWidth = 276, CropHeight = 155 });
<gallery-item :preview="'@previewUrl'" :caption="'@imageText'">
@Html.Partial("~/Views/Ahhg/SrcsetPicture.cshtml", model)
</gallery-item>
}
}
</gallery-main>
<gallery-full>
@{
foreach (var childImage in Model.Children)
{
string imageText = "";
if (Model.ShowImageCaptionInFullScreenMode)
{
imageText = childImage.Image?.GetTarget<ItemWrapper>()?.InnerItem()?["Description"];
}
var model = childImage.Image.GetSourceSet(ModuleBreakpoints.FullScreenGallery, wrapper: false, ignoreContainer: true);
var previewUrl = childImage.Image.GetSourceUri(new AdvancedImageFieldWrapperOptions() { CropWidth = 276, CropHeight = 155 });
<gallery-item :preview="'@previewUrl'" :caption="'@imageText'" :fit="true">
@Html.Partial("~/Views/Ahhg/SrcsetPicture.cshtml", model)
</gallery-item>
}
}
</gallery-full>
</gallery>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|