Circle Images For Your Presentation

  • 5
  • Article
  • Updated 3 years ago
  • (Edited)


For those who want to spice things up a little in their presentation, I have provided some code that will allow you to create circle versions of your images.

First, let’s go to our presentation and create a new placeholder. In your placeholder window, beside (Playlist is empty) select “Add” and then “Content” from the drop down.

Screen Shot 2015-10-06 at 14820 PMpng

From there you will be forwarded to our store. Search for our HTML widget (free). Click the “Add” button and you should then be brought back to your placeholder window. Click the configure link.

Screen Shot 2015-10-06 at 15756 PMpng

Select all and input the following code:

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>

<style>
.circle {
width:350px;
height:350px;
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius:50em;
background: url(YOURIMAGEURL);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
display:block;
}
</style>

</head>
<body>

<div class="circle">&nbsp;</div>

</body>
</html>



Click the “Save” button. Note: ‘YOURIMAGEURL’ is where you will place the external link to the image you want to transform into a circle. You can copy the direct link that our Storage app provides you after you upload your image by clicking the copy URL button:

Screen Shot 2015-10-06 at 15346 PMpng

 

Screen Shot 2015-10-06 at 15356 PMpng

Copy the link and paste it within the background:url bracket that I highlighted. Remember you can edit the dimensions of your eclipse image to suit your needs. I went ahead with 350 x 350px. Play around with it!

That just about wraps up the article. If you have any questions, let us know below in the comments!
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb

Posted 3 years ago

  • 5
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Cool thanks for sharing! I found a pen with diamonds the other day...
http://codepen.io/eltonmesquita/pen/xbaOmK