snipt

Ctrl+h for KB shortcuts

Text only

CIRCLE IMAGE

Step 1 - Add code to css file:

.circular-image img {
	width: 300px;
	height: 300px;                
	-webkit-border-radius: 150px;               
	-moz-border-radius: 150px;                
	-ms-border-radius: 150px;                
	-o-border-radius: 150px; 
	border-radius: 150px;                              
}
Step 2 – Wrap Images with DIVs

Once that’s set, go ahead and upload your image as you normally would and place it wherever you’d like (centered, aligned right, etc.).

Once your image is in place, switch to the “Text” view of your editor, place the following around the code you see for your image:

<div class="circular-image">code-for-image</div>

SPECIAL NOTE:
Important Notes, and an Alternative Method

There are a few important things to cover about the code above. I made the image you see above a perfect circle by setting the height and width in my CSS file – 300px by 300px. And then I set the border radius as half that—150px. You can change these dimensions if you want something larger or smaller. Just keep the ratio the same—i.e. if you make the size 400px by 400px, make the radius half that by bumping it up to 200px.

Description

Make image appear to be in a circle in WordPress
Link: http://premium.wpmudev.org/blog/make-images-in-wordpress-circular-with-css/
https://snipt.net/embed/589b0c6c5fd69429397101fb79e6f58d/
/raw/589b0c6c5fd69429397101fb79e6f58d/
589b0c6c5fd69429397101fb79e6f58d
text
Text only
23
2019-07-20T12:57:18
True
False
False
/api/public/snipt/141250/
-efd17181
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>Step 1 - Add code to css file: </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a>.circular-image img { </span><span id="L-4"><a name="L-4"></a> width: 300px; </span><span id="L-5"><a name="L-5"></a> height: 300px; </span><span id="L-6"><a name="L-6"></a> -webkit-border-radius: 150px; </span><span id="L-7"><a name="L-7"></a> -moz-border-radius: 150px; </span><span id="L-8"><a name="L-8"></a> -ms-border-radius: 150px; </span><span id="L-9"><a name="L-9"></a> -o-border-radius: 150px; </span><span id="L-10"><a name="L-10"></a> border-radius: 150px; </span><span id="L-11"><a name="L-11"></a>} </span><span id="L-12"><a name="L-12"></a>Step 2 – Wrap Images with DIVs </span><span id="L-13"><a name="L-13"></a> </span><span id="L-14"><a name="L-14"></a>Once that’s set, go ahead and upload your image as you normally would and place it wherever you’d like (centered, aligned right, etc.). </span><span id="L-15"><a name="L-15"></a> </span><span id="L-16"><a name="L-16"></a>Once your image is in place, switch to the “Text” view of your editor, place the following around the code you see for your image: </span><span id="L-17"><a name="L-17"></a> </span><span id="L-18"><a name="L-18"></a>&lt;div class=&quot;circular-image&quot;&gt;code-for-image&lt;/div&gt; </span><span id="L-19"><a name="L-19"></a> </span><span id="L-20"><a name="L-20"></a>SPECIAL NOTE: </span><span id="L-21"><a name="L-21"></a>Important Notes, and an Alternative Method </span><span id="L-22"><a name="L-22"></a> </span><span id="L-23"><a name="L-23"></a>There are a few important things to cover about the code above. I made the image you see above a perfect circle by setting the height and width in my CSS file – 300px by 300px. And then I set the border radius as half that—150px. You can change these dimensions if you want something larger or smaller. Just keep the ratio the same—i.e. if you make the size 400px by 400px, make the radius half that by bumping it up to 200px. </span></pre></div> </td></tr></table>
WPMUDEV.ORG, circle, css, html
--- 
+++ 
@@ -0,0 +1,23 @@
+Step 1 - Add code to css file:
+
+.circular-image img {
+	width: 300px;
+	height: 300px;                
+	-webkit-border-radius: 150px;               
+	-moz-border-radius: 150px;                
+	-ms-border-radius: 150px;                
+	-o-border-radius: 150px; 
+	border-radius: 150px;                              
+}
+Step 2 – Wrap Images with DIVs
+
+Once that’s set, go ahead and upload your image as you normally would and place it wherever you’d like (centered, aligned right, etc.).
+
+Once your image is in place, switch to the “Text” view of your editor, place the following around the code you see for your image:
+
+<div class="circular-image">code-for-image</div>
+
+SPECIAL NOTE:
+Important Notes, and an Alternative Method
+
+There are a few important things to cover about the code above. I made the image you see above a perfect circle by setting the height and width in my CSS file – 300px by 300px. And then I set the border radius as half that—150px. You can change these dimensions if you want something larger or smaller. Just keep the ratio the same—i.e. if you make the size 400px by 400px, make the radius half that by bumping it up to 200px.
  • Tammie
  • 3 years, 9 months ago