Wordpress

How to Add Custom Styling to Images Using Classes

The way WordPress generates IDs and classes can be helpful in a number of ways, particularly when you want to add custom styling to images. In this tutorial, I will show you how classes and IDs can be manipulated to style images.

You will need:

  • A development installation of WordPress
  • An editable theme

Adding custom styling to images

When you upload an image to your post, you are asked to specify its alignment and size. WordPress adds a class to the <img> tag based on your choice. Following are the classes for alignment:

  • .alignnone
  • .aligncenter
  • .alignright
  • .alignleft

And these are the classes for size:

  • .size-full
  • .size-large
  • .size-medium
  • .size-thumbnail

You can use these classes to style your images. Most themes use CSS to style each class appropriately, like this:

123

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

.alignleft {float: left;}

.alignright {

float: right;

}

.aligncenter {

display: block;

margin-left: auto;

margin-right: auto;

}

img.alignleft {

margin: 12px 24px 12px 0;

margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;

}

img.alignright {

margin: 12px 0 12px 24px;

margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;

}

img.aligncenter {

margin-top: 12px;

margin-top: 0.857142857rem;

margin-bottom: 12px;

margin-bottom: 0.857142857rem;

}

img.size-full,

img.size-large,

img.header-image,

img.wp-post-image {

max-width: 100%;

height: auto;

}

The CSS above not only adds styling to the alignment of images, but also adds margins so that the images will not stray out of their containing element. You can see the effect of adding margins to images below:

custom styling to images using classes

Similarly, you can add further styling to images. For example, the first image in the above screenshot is aligned right. If the website is seen on a smaller screen, the image stays the same size but the text is displayed a bit untidily.

 custom styling to images using classes images small screen

You can add styling to ensure that all right-aligned images will take less than 50% of the screen’s width by adding the following code in your CSS file:

123 img.alignright {max-width: 50%;}

Now, if the page is viewed on a smaller screen, the text will wrap neatly around the image.

 custom styling to images using classes images small screen with styling

You can also add decorative styling to images. For example, you can add decorative styling to full-sized center-aligned images by adding the following to your CSS file:

123

4

5

img.size-full.aligncenter {width: 75%;padding: 5px;

border: 2px dotted #ccc;

}

This code will reduce the image’s size and add a nice border.

 custom styling to images using classes full size image with styling

There are several other ways you can add styling to your images using classes. So much so that it would be almost impossible to list them all here.

About the author

Tabish Shaikh

Website designer, website developer, blogger and a writer. These are the things I like, love and live for. Having years of experience in each field. Developing sites since childhood. Getting the most complicated things done is my specialty. Providing each and everything of top most quality to each and every client.

Leave a Comment


*