Creating your own custom image display sizes in WordPress

Creating custom image display sizes in WordPress is something that can make your site really attractive!

Are you having problems with WordPress image display sizes?

There are some tutorials available on YouTube and Google, but none seemed to work properly for me.

Recently, I decided to revamp this website and since I am a web designer and have dabbled in stuff like PHP/MySQL etc in the past, I decided to do it myself. So, first I installed WordPress on my server and got some cool themes and plugins and created a new site (The theme on my site is Executive Pro). I think the new site looks pretty cool.

However, my images were being displayed in the wrong sizes. Somehow my images on posts were always coming in thumbnail size despite changing the image display size options in the Media Library.

An image sized 400x264
An image sized 400×264 px in WordPress

I went to Style.css and made some changes to the IMG tag and was excited when I saw that an image of my books was now displaying in the correct size as I wanted. Was the problem solved? Not yet.

I found a picture of President Donald Trump’s swearing-in for a new post I was writing. But this picture, which I wanted as a wide banner like image was being displayed as a small image – like my book cover images on my Books page. I changed the image size in Style.css again. The Donald Trump image got fixed, but now my Books cover images were large, stretched and distorted.

Create your own custom IMG class

I used YouTube and Google to find a solution to this. Most of the solutions I found involved resizing images in the Media Library or resorting to coding. The resizing part didn’t work and I did not want to get into PHP coding. For almost three days, I tried to find solutions to no avail. But last night, I got an idea that so far seems to work well – creating IMG classes for specific posts or pages.

So for example, I wanted my book IMG size to be 166×248 pixels. When you look at the code in Text mode on the post editor, the IMG tag had been designated a particular class by WordPress and while the IMG code showed these dimensions, the IMG somehow never displayed correctly.

Then I thought just like we can create STYLES for text, why not for IMAGES? I wanted that my book cover images should be assigned a class which I called ‘book’. So I went to the Style.css file and found:

#primary img {

                      width: 100%;
                      height: 100%;
}

and then I inserted the following code in the STYLE.CSS file immediately after this:

#primary img.book {

width: 166px:
height: 248px;
}

Basically, I created a new class of images sized particularly for my book cover images. Then in the BOOKS page, I deleted the WORDPRESS CLASS that had been created by default at the IMG tag and added class=”book” into the code. It worked like a charm. So far, so good. I hope it helps you as well.

About Prashant Solomon 39 Articles
Author, businessman, journalist, seeker of truth, lover of humanity and God.

Be the first to comment

Leave a Reply

Your email address will not be published.