More in this section
Forums / General Discussions / How to set image css property in libary?

How to set image css property in libary?

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
3 posts, 1 answered
  1. Hooman
    Hooman avatar
    19 posts
    Registered:
    24 Jun 2016
    27 Jun 2016
    Link to this post
    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.
  2. Hooman
    Hooman avatar
    19 posts
    Registered:
    24 Jun 2016
    27 Jun 2016
    Link to this post
    Found about setting custom fields for content types.  Added a Css field to the images content type.  See http://docs.sitefinity.com/edit-an-existing-custom-field. 
    Answered
  3. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    27 Jun 2016 in reply to Hooman
    Link to this post

    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>
    }

     

3 posts, 1 answered