I love things to be in a logical order. When it comes to websites, how people think and move from one page to the next is really important. If you jump the gun your reader will feel jarred, brushed off even. You could miss making an important connection. And then there's just plain old messy which is just no good.

One annoyance I have with out of the box Wordpress is this layout:

My problem with this layout is if someone has something to say they have the distractions of other posts which they may like... and the comments bit is buried down the bottom. I want to encourage people to write a comment before they go elsewhere. I want to move it up to the first thing they encounter at the end of a post, then sharing stuff, then related articles.

You'll need to be able to edit the .js file of your theme for this bitsie of code.

See the Pen Place comments above related posts in wordpress by Sarah Crawford (@ALinedDesign) on CodePen.

The result? Take a squiz below! If time has elapsed and my comments aren't open any more, here's what it would have looked like:

 

Neater, more logical, more engaging. Winner!

If you'd love this layout but are terrified of code, give me a shout and I'll help you out.

That about me bit in your sidebar of a reminder to your readers that, "Hellooooo! I am here! I own this place and if you think it's pretty kewl we should definitely connect and make lovely business together".

It's important.

Choosing a nice picture and presenting it well is also important.

 

Well, that's not exactly professional... Out of focus areas, burned out areas, colours not so great. Yeah, nah.

Look at the camera, you silly bird! Colours have flared, burnt out areas in the background. Nope.

In focus, edited within brand colours, shows personality, professional. WINNER.

What format will you choose? In a frame? A circle? An overlay of some kind? An underlay?

Options. Lots of them. But Let's choose three to start with.

 

You might be lucky enough to have a frame to use, which MUST have a transparent centre. It will be in png format.

Remember, if the video goes too fast for you, remember you can pause it.

First, get yourself an account at Canva.  Once you start using it, you'll be back here constantly!

Click create a design, then use custom dimensions. You want to make sure that your canvas has the same dimensions as your frame. To find out what those dimensions are, find your image and click on it. Then press CMD+I (on Mac) to see what the dimensions are in px. Type those dimensions into your project, and then Design!

Next, you need to upload your images. The Upload button is at the bottom of the sidebar on the left. One uploaded (how cute is that duckie!), simply drag and drop onto your design. You will see that your frame is transparent in the middle. Position it on top using the Arrange button in the top right toolbar. You'll find that if you drag your images too far off the canvas the arrange option disappears. Don't worry too much about having everything neatly at the edges as we'll trim it all later. Just focus on getting the layering right.

Once done, click Untitled Design up the top and give it a name. Then click Download, and download as .png.

You can actually run through the same process as above if you have a frame which is a white background with a circle cut from the middle. In fact, you can download one here.

You'll need to add your image to the sidebar (see above in the frame section for a video). This gets your image in the sidebar, though square for the time being.  With a bit of CSS/HTML styling you can make your image into a circle .  You really must start with a square image in order to get a nice trim using this method.

The traditional route is putting a border-radius on your image. The border radius property makes this curved or not curved on the edges by the amount you specify. You can specify a percentage or pixels. What's the difference?

 

 

border-radius: 999pxborder-radius: 50%

 

 

I reckon pixels are great for buttons and fields, but percentages suit our purpose a bit better for an image trim.

See the Pen A better circle crop for images by Sarah Crawford (@ALinedDesign) on CodePen.

 

 

Even better? You can use a clipping path. It guarantees a circle at all screen widths, and image aspect ratios. No funky ovals here.

See the Pen A better circle crop for images by Sarah Crawford (@ALinedDesign) on CodePen.

 

Love my image? It's got an svg overlay, which has a transparent background so it doesn't interfere with my photo. You can also use transparent png files for this version. This is an advanced bit of code: you need to understand that svg and png need different styling in terms of position, and width/height set.

 

See the Pen About me image with an overlay by Sarah Crawford (@ALinedDesign) on CodePen.

 

Want to make the overlay an underlay instead? Switch up the z-index (higher sits on top). You won't need to worry so much about having a transparent image with an underlay.  Watercolour splodges, for example, are likely not transparent so best behind your image. For example...

Now a bit of backwards to go forward - get that image into your site then into the sidebar.

First, upload your image to Wordpress. Click Media > Add New > Select Files.  When your image is finished uploading, click edit.  When you enter the editing window, click edit image. To crop your image, which you will need to do when you have saved from Canva, select the part you want to keep and then click the crop icon in the top left of the editing window. Then save your work.

Select your file's URL and copy it.

Now, click Appearance >Widgets. Find the Text Widget. This  Widget allows you to use html code in a Widget area. Stay with me here. You use html code to get your image to appear.

Add the Text Widget to your sidebar. Paste your URL into the content box, clicking the 'text' option rather than the 'visual' option. Then add the code you need to execute whatever version of image you'd like, replacing the code for my image with yours.

Save your widget when complete.

 

So, what do you think? Inspired? Ready to make your sidebar about me image shine?

If you need any expert help reach out and say howdy!

You know when those little standard built in features get in the way of things looking pretty? I know you do. One of my pet peeves it the title display tooltip on image hover. It can happen on images and links, and happens for saaaahhhh many reasons.

Don't know what I mean? This thing here. UGLEH.

It hangs over pretty images, and in the cases of nice portfolio galleries and menus it can actually get in the way of content. What makes it happen in the first place? Themes and/or browsers grabbing the title of the image or link, or the alt text, and displaying it to be helpful. And sometimes it is! But not always, and for some clients downright bloody annoying.

Time to go, tooltip text. Time is up.

Options for dismissal? Delete all your alt text and image titles. NO!!!!! Total sarcasm there. An SEO disaster. Search engines wouldn't know what your images were about and Yoast would get all red lighty on you.

Here's the good and working solution. It removes the title of links, not holus bolus all image titles and alt text.

To run this one, you need an enququed js file in your theme. And the confidence to drop something in it.

See the Pen Disable tooltip on image link hover by Sarah Crawford (@ALinedDesign) on CodePen.

Howzat? Good, hey!

To scared to give this a go yourself? Hit me up and I'll give you a hand.

What built in solutions do you find irritating? Let me know and we can find a solution together.

a lined design logo with circular tagline salt pink rgb
We’re a creative brand and web design agency based in Hobart, Tasmania servicing clients all around Australia and the world. We specialise in helping creative entrepreneurs shine online.
data privacy certified agency partner
members
Awiaartboard 1
members
Agda
proud sponsor
Kivaartboard 2
Wpe Badge Hq
your voice matters
lgbtq+ rainbow flag quasar progress variant
Copyright © 2016 – 2022 Sarah Crawford t/as A Lined Design
magnifiercrosschevron-downcross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram