Okay
  Public Ticket #279419
Styling Images to be circular (like Gallery Images)
Closed

Comments

  • Andy started the conversation
    September 10, 2014 at 1:52am

    How can I style images on my site to appear circular, like the gallery images in the Fineliner demo site?

  •  296
    Paul replied
    September 10, 2014 at 8:41am

    Hi Andy,

    The concept is; create a custom CSS class (for creating round shape styling) and put the class for the image element.

    Please try this:

    1. Go to "Style Customizer > Others > Custom CSS" and enter this new class:

    .img-round img {
border-radius: 50em;
}

    2. On the page edit screen, click the pencil icon of the image element to open its window (screenshot: http://cl.ly/image/16020Z0O370g ).

    3. Then enter that created class into the "Extra class name" field of the element (as showing in the above screenshot).

    That image should now use the CSS class with the round shape. (Make sure your image is square so it will be equally round.)

    Hope this helps!

    Regards,
    Paul

  • Andy replied
    September 10, 2014 at 10:51am

    Hi Paul,

    Thank you VERY much for your help!  It is much appreciated.

    Your solution appears to do the trick.

    My resulting image is not perfectly round,  BUT I suspect that is because the source image is slightly rectangular (see attached screenshot).

    I will try again with a square image later, and expect I'll get a perfect circle then.

    Thanks!  :-)

    Andy.

  •  296
    Paul replied
    September 11, 2014 at 8:02am

    You're welcome, Andy! 

    P.S. Yes, the source image should be square so it will be all equally round. :)