1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Wishlist: add classes to images

Discussion in 'Website Customization' started by Anita Graham on Sep 6, 2018.

  1. Anita Graham

    By:Anita GrahamSep 6, 2018
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    27
    Likes Received:
    5
    Location:
    Jolimont, Western Australia, Australia
    I use a few images, and I use some custom css.
    A feature I've seen on other CMS in the editor/add image doover is the ability to add a class to an image being inserted.

    A case in point: on the site, I want general use photos to be framed. I use something like this:
    Code:
    img {
      border: 1px solid $RI_Platinum;
      padding: 4px;
      box-shadow: 1px 1px 5px $RI_Ash;
      margin: 10px
    }
    
    There are images that I don't want framed though - logos - for instance. I add the class no-frame manually to the images when I seem them framed.

    It would be easier - and less error prone - to be able to add the class during the insertion process.
     
  2. David H.

    By:David H.Sep 6, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    99
    Likes Received:
    16
    Gender:
    Male
    Location:
    Oakville, ON
    Thank you for the suggestion. I have passed it onto our Product team and they will review your suggestion as soon as they can. We are always making changes to ClubRunner and are receptive to suggestions from users like yourself. Due to the volume of requests we receive, we can't guarantee when or whether they will be done.

    In the mean time, you could use "Image Properties" to set the margin if needed.
    upload_2018-9-6_8-55-21.png

    HSpace controls "margin-bottom" and "margin-top".
    VSpace controls "margin-left" and "margin-right".
    The code would look like this:
    Code:
    <img src="https://clubrunner.blob.core.windows.net/00000000011/Images/250x250_T1819-EN.png" style="margin-bottom:5px; margin-left:10px; margin-right:10px; margin-top:5px"/>
     
  3. Anita Graham

    By:Anita GrahamSep 6, 2018
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    27
    Likes Received:
    5
    Location:
    Jolimont, Western Australia, Australia
    Thank you, but I know how to use the image control. In addition to avoiding inline styles, using a class gives the web designer a far wider range of options than the few offered by the current control, and allows each website to choose their own.
    Unframed symbol.jpg framedphoto.jpg
     
  4. Zach

    By:ZachSep 10, 2018
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    221
    Likes Received:
    36
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Hi Antia,

    I was doing some research and it seems that at this time there is a limitation with our editor for supporting inserting classes into elements. If you wanted to add and or remove classes from any elements within the ClubRunner editor that will need to be done through the source mode option manually and cannot be done through the popup interfaces.

    So after you insert your image into the editor, you can click the the source button to get into the raw html, and add/remove classes as required.
    Editor-Source-Button.jpg

    From here you can see the raw code as shown below
    Editor-Source-code-mode.jpg

    From here, we can add our html for the class

    Editor-Source-class-added.jpg


    I hope that helps!
     
  5. Anita Graham

    By:Anita GrahamSep 11, 2018
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    27
    Likes Received:
    5
    Location:
    Jolimont, Western Australia, Australia
    Thank you, but you have misread my post. I am already using the source editor, and custom css.
    However, it is not a good long-term solution because it limits what people unfamiliar with HTML and css can do.

    My original post was titled "Wishlist" because I would like the ability to add a class to an image added to the inline editor. It was "wishlist" because I know it will take time and effort to include, I would just like it to be considered as part of your development.
    With that facility, it would be easy to instruct others how to add a class to change the appearance of their image.

    I don't know enough about CKeditor to offer examples, but I have seen other CMS where this facility is part of the image options.
     
Top