How to set image css property in libary? - General Discussions - General Discussions - Progress Community
 General Discussions

How to set image css property in libary?

  • How to set image css property in libary?
  • 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.
  • 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. 
  • 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>