How to set image css property in libary?

Posted by Community Admin on 03-Aug-2018 17:45

How to set image css property in libary?

All Replies

Posted by Community Admin on 27-Jun-2016 00:00

We have various images in an image library.   How can I set the css property of  a particular image?  It seems I can only edit the title and alternate text.

Posted by Community Admin on 27-Jun-2016 00:00

Found about setting custom fields for content types.  Added a Css field to the images content type.  See docs.sitefinity.com/edit-an-existing-custom-field. 

Posted by Community Admin on 27-Jun-2016 00:00

Hi hooman.  As i right you understand, you want to add custom field for image.

You can do it in this way:

  1.  Go to SF backend
  2. Go to Content->Images
  3. Click Custom fields (in the right sidebar)
  4. Create custom field (ex. name CssClass)

 

And after that you need to edit widget designer. Example for feather:

  1. Find template inside your resource package /Mvc/View/Image/Image.cshtml or create new one
  2. Add  @Model.Item.Fields.CssClass

Template should looks like this:

@model Telerik.Sitefinity.Frontend.Media.Mvc.Models.Image.ImageViewModel
 
@if (string.IsNullOrEmpty(Model.LinkedContentUrl))
    <img class="@Model.CssClass @Model.Item.Fields.CssClass" src="@Model.SelectedSizeUrl" title="@Model.Title" alt="@Model.AlternativeText" />
else
    <a href="@Model.LinkedContentUrl">
        <img class="@Model.CssClass @Model.Item.Fields.CssClass" src="@Model.SelectedSizeUrl" title="@Model.Title" alt="@Model.AlternativeText" />
    </a>

 

This thread is closed