By default, your images inserted into posts and pages have no styling. However, Preferential does include some custom styles you can apply to your images which give you a choice of:
- Image Bar – The class for this is: class=”pref-img-bar”
- Image Border – The class for this is: class=”pref-img-border”
- Rounded Image – The class for this is: class=”pref-img-round”
To give you a better idea of what styles you get and how they look, you can check out the live demo site here:
Adding a Bar Style
This style adds a bottom border (bar) to your image:
When you insert an image, switch to the “Text” tab of your editor so that you will see the HTML image tag like this example:
<img src="image-path" alt="short description" width="300" height="200" />
We need to add a class to our image tag to first apply the custom style: pref-img-bar
<img class="pref-img-bar" src="image-path" alt="short description" width="300" height="200" />
Adding Colour
You can also add colour to your bar style by adding another class to your image tag, such as grey: border-grey
<img class="pref-img-bar border-grey" src="image-path" alt="short description" width="300" height="200" />
You can add the following colours:
- grey
- darkblue
- blue
- lightblue
- orange
- green
- red
- brown
- custom
Adding a Border Style
This style adds a border around your image:
When you insert an image, switch to the “Text” tab of your editor so that you will see the HTML image tag like this example:
<img src="image-path" alt="short description" width="300" height="200" />
We need to add a class to our image tag to first apply the custom style: pref-img-border
<img class="pref-img-border" src="image-path" alt="short description" width="300" height="200" />
Adding a Round Style
This style changes your image into a circle and adds an outer border to it:
Before you insert an image into your post or page, this particular style required a squared image with equal width and height dimensions. For example, a 300×300 pixel image is ideal because this style gives you a perfect circle (round). If you had a 300×200 image, then your image will have an oval shape to it. Some people may want that which is your choice of course.
When you insert an image, switch to the “Text” tab of your editor so that you will see the HTML image tag like this example:
<img src="image-path" alt="short description" width="300" height="200" />
We need to add a class to our image tag to first apply the custom style: pref-img-round
<img class="pref-img-round" src="image-path" alt="short description" width="300" height="300" />
Screencast – Image Styles