I've created a responsive image holder as a grid editor, I'm wondering how to change the colour of a border of an element by having the user select a colour from a dropdown. This would be one of the properties of the grid editor when adding it into a piece of content.
I thought that I could do this by using a switch case statement but I'm not too sure how to implement this and how to link it up with the dropdown.
I would suggest not using a switch case. Instead of having a drop-down property, why don't use the Approved Color property? Then, in your View, you can do something like that:
var borderColor = Model.Content.GetPropertyValue("propertyAlias");
That way, even if you add more color to that property, this will always work. With a switch case statement, you would need to updated the code every time a new color is added to the drop-down.
Thank you very much for your reply and suggestion, I never knew about this property before!
Would you have any idea what I'm doing wrong here? I'm getting an error that borderColor does not exist int he current context when I add the image holder to a piece of content and load it in the browser:
@inherits UmbracoViewPage<Lecoati.LeBlender.Extension.Models.LeBlenderModel>
<script>
var borderColor = Model.Content.GetPropertyValue("approvedColour");
img style="@(!string.IsNullOrWhiteSpace(borderColor) ? "border-color: #" + borderColor : "" )"
</script>
@if (Model.Items.Any())
{
var item = Model.Items.ElementAt(0);
var imageList = item.GetValue<string>("circularResponsiveImage");
if (!string.IsNullOrWhiteSpace(imageList))
{
var imgList = imageList.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
var imgListCollection = Umbraco.TypedMedia(imgList);
if (imgListCollection != null)
{
foreach (var img in imgListCollection)
{
<img style = "padding: 0px;" src="@img.Url" alt="@img.GetPropertyValue("altText")" class="img-responsive img-circle" />
}
}
}
}
Changing the CSS through a switch case statement
Hi all,
I've created a responsive image holder as a grid editor, I'm wondering how to change the colour of a border of an element by having the user select a colour from a dropdown. This would be one of the properties of the grid editor when adding it into a piece of content.
I thought that I could do this by using a switch case statement but I'm not too sure how to implement this and how to link it up with the dropdown.
Does anybody have any suggestions?
Thanks,
David
Hi David,
I would suggest not using a switch case. Instead of having a drop-down property, why don't use the Approved Color property? Then, in your View, you can do something like that:
var borderColor = Model.Content.GetPropertyValue("propertyAlias");
img style="@(!string.IsNullOrWhiteSpace(borderColor) ? "border-color: #" + borderColor : "" )"
That way, even if you add more color to that property, this will always work. With a switch case statement, you would need to updated the code every time a new color is added to the drop-down.
Thanks,
Hi Carlos,
Thank you very much for your reply and suggestion, I never knew about this property before!
Would you have any idea what I'm doing wrong here? I'm getting an error that borderColor does not exist int he current context when I add the image holder to a piece of content and load it in the browser:
Again, thank you very much for your help.
Thanks,
David
is working on a reply...