Creating your own custom image display sizes in WordPress

An image sized 600x400 px
An image sized 600×400 px 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.

Welcome President Donald Trump

 

“When you open your heart to patriotism, there is no room for prejudice.” – President Donald J. Trump

By. Prashant Solomon

So Donald John Trump took the oath of office on January 20, 2017 and is now the 45th President of the United States of America. I hope and pray that his term in office will be marked by stability around the world, new jobs in America, a better healthcare system and a more stable and safe world. Though his Inaugural Address lacked the poetic skills of JFK or even the eloquence of BO, it was typical Trump – say it as you mean it in simple straight language without mincing words. His comments about the Washington D.C. elite would have certainly ruffled a lot of feathers in the establishment, but that after all is what he has been saying all along. That is the message that got him elected in the first place. The people of the United States of America were sick and tired of the way things work in Washington D.C. and voted for not just change, but on the face of it – radical change. But having said all that, what struck a chord with me was that the first thing the new president did was to thank everyone, yes even the people of the world!

In my mind, Donald Trump is a very successful, intelligent man and while politeness and political correctness may not be his style, he has an ironic sense of humility. I have noticed how he thanks and praises people who work for him and others. While his attacks on his detractors may be vicious and unapologetic, his appreciation and swiftness to action is equally powerful. I am optimistic about him as president and hope he will lead the world to better days ahead. God bless him!

Some of my favourite quotes from his inaugural address –

  • When you open your heart to patriotism, there is no room for prejudice.
  • What truly matters is not which party controls our government, but whether our government is controlled by the people. January 20th, 2017 will be remembered as the day the people became the rulers of this nation again. The forgotten men and women of our country, will be forgotten no longer.
  • We are one nation and their pain is our pain. Their dreams are our dreams and their success will be our success. We share one heart, one home, and one glorious destiny.
  • The Bible tells us, how good and pleasant it is when God’s people live together in unity.
  • We must speak our minds openly, debate our disagreements, but always pursue solidarity.
  • We stand at the birth of a new millennium, ready to unlock the mysteries of space, to free the Earth from the miseries of disease and to harness the industries and technologies of tomorrow. A new national pride will stir our souls, lift our sights and heal our divisions.
  • It’s time to remember that old wisdom our soldiers will never forget, that whether we are black, or brown, or white, we all bleed the same red blood of patriots.