+1-888-365-2779
Try Now
More in this section

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

How to set image css property in libary?

3 posts, 1 answered
  1. Hooman
    Hooman avatar
    19 posts
    Registered:
    24 Jun 2016
    27 Jun
    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
    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 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