Featured Blog: Piece O' Cake
Featured Blog: Red Brolly

Typepad 101: Add Circle Shaped Frames to Photos

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. This tip is suitable for bloggers at all levels using Basic Templates - no special tricks or upgrades needed! 

Swan bikes Swan

It might be hip to be square if you're Huey Lewis, but lately it seems that the circle is where it's at. Crisp geometric shapes abound in modern design, and you may have noticed circle shaped photos appearing recently on album covers, in magazines, and on Instagram. 

With just a little bit of coding magic, Typepad users can incorporate this fun trend into their blog design. Today, we'll show you how to add circular photos to your Sidebar, your SnapWidget, and your blog posts. You can see these projects in action on my test blog, Mary Mary, Quite Contrary

These projects work best with square-shaped images. Instagram photos are perfect for this kind of project, but you can use any image you like. Just crop the image into a square shape using Typepad's built-in image editing options or crop it before uploading using your favorite design software. If you don't have design software installed on your computer, check out Pic Monkey, a free and easy online tool for editing photos. 

  Circle shaped profile photo and sidebar image

 

Add Circle Shaped Photos to Your Sidebar

Maybe you'd like to add a different photo to your blog's sidebar, or even a linked image? Follow these directions to hook your Sidebar up with as many circle shaped images as you like. 

  1. Upload your image to your blog's File Manager at Library > File Manager. 
  2. Copy the url from your image by right clicking on the link in your File Manager. Paste the link into a plain text editor (e.g. Notepad, TextEdit) for future reference.
  3. Go to Design > Content, and select the module titled "Embed your own HTML" from the center column. Click "Add this module".  
  4. A window will pop up. Give the module a custom title so that you can locate it easily in the future. Add the following code to the HTML field:

    <a style="display: inline;" href=""><img style="width: 200px; height: 200px; border-radius: 200px;" title="Swan" src="http://mmcnallysay.typepad.com/.a/6a0192aafac0cc970d019b0006d8
    b0970b
    -200wi" alt="Swan" /></a> 

  5. Replace the image url with the one from your own image (highlighted in yellow). You can change the size of the image by changing the width, height, and border-radius indicators (highlighted in blue.)
  6. Click "OK" to close the window. Drag and drop the module to its desired position in the sidebar.
  7. Click "Save Changes" to finish up.

 

Add a Circle Shaped Frame to Your SnapWidget

We've shared a few tutorials recently showing you how to incorporate Instagram photos into your blog. Using SnapWidget's grid or slideshow style widgets, you can display the latest photo from your feed or your favorite hashtag. This tutorial will show you how to add a circle shaped frame to the widget, giving it a little extra style. 

  1. Start by creating a Grid type or Slideshow type SnapWidget at SnapWidget.com
  2. Grab the code for the widget, and paste it into a plain text editor (e.g. Notepad, TextEdit) for later use.
  3. Go to Design > Content and select the "Embed Your Own HTML" module from the center column. Click "Add this module". Rename the module so that it will be easy to find later. 
  4. Paste the code for the SnapWidget into the window, change the width and height values to your desired width (SnapWidget will have added an extra 5px to the value you input on their site), then add the following code right after the height tag (height:200px):

    ; border-radius: 200px;

  5. Change the value of the border-radius tag (highlighted in blue) to match the size of your SnapWidget. 
  6. Click "OK" to close the window. Drag and drop the module to its desired position in the sidebar. Click "Save Changes" to finish up.

Here's what my code looked like for a 200 pixel SnapWidget:

SnapWidget with a Circle Shaped Frame

Add a Circle Shaped Image to a Blog Post

Of course, you might also want to add a framed photo to a blog post. Adding a circle shaped frame is quick and easy. By adding just one line of code, you can add a striking visual element to your post. 

4687920065_872d0c2558_b

  1. Create a blog post on the Compose Page. Add all the post's text before adding your image. 
  2. Insert an image into your blog post using the Insert Image tool in the Rich Text Toolbar.
  3. Switch over to the HTML tab, then locate the code for the inserted image. It should look something like this:

     <a style="display: inline;" href="http://aviary.blob.core.windows.net/k-mr6i2hifk4wxt1dp-13110621/35917edc-0ec3-42f8-9439-9d58395e6971.jpg"><img title="4687920065_872d0c2558_b" src="http://mmcnallysay.typepad.com/.a/6a0192aafac0cc970d019b00be49ac970b-500wi" alt="4687920065_872d0c2558_b" /></a>

  4. Insert the following code before the line beginning with src=

    <img style="width: 500px; height: 500px; border-radius: 500px;" 

  5. Replace the values for the width, height, and border-radius tags (highlighted in blue) to match the images width. 
  6. Switch back to the Rich Text tab to check out the changes you've made.

Here's what my code looked like when adding a 400 pixel photograph:

Adding a Circle Shaped Photo to a blog post

We hope you'll have fun adding circle shaped frames to your blog. If you have any questions about this tutorial, or if you want to share a link to a post including circle shaped images, please hit us up in the comments!

comments powered by Disqus