• 5th June 2023 3:20 am
FREE weekly seminars

Images in Theme Design

  • Marketing, Theme Design

To cover all the theme options for this subject we need to think about where you are starting from.

  • You could be using a standard theme, even TwentySeventeen.
  • You could have purchased a designer or build theme, maybe even DIVI,
  • You could have a bespoke design made for you.
  • You could be using a template builder like the wp-types toolset.

In almost all cases, you should be using a child theme. That will allow us to change the design subtly without losing the original and its updates.

Your theme will have imposed standard sizes for all your images and you need to work out what these are and see how they will work with some example images you would like to use. The most important issues are

  • Are your original images big enough to look good at all sizes shown by the theme?
  • Does the theme crop your images in any way, and if so does that affect their effectiveness?
  • Do your images ‘make sense’ at all the sizes used.
  • Do your image work in with the colours used by the theme on the pages.
If you find it all working well then great work? – But I assume, from experience, that it is not all perfect.
You may want to create some guidance notes for the creation of images with respect to colours, size, position of focal points of pictures. The reason for making some rules is that you then have an easy set of steps to ‘pump out’ your images in the future. I am hoping you will be creating a great number of content posts, and you want this process to be as easy as possible. The fewer distractions and hiccups along the way, the less stressful this content creation is going to be and the smoother the ride for you the better.
The posts I create on this website already have designed in their distribution to other social media sites, and how I expect them to integrate with video too. That took a few days of planning and refining, but now I believe it works well.

Tweaking with a child theme

Hands up here, the current theme we have is created by us in the toolset of wp-types. That means we were able to set the sizes and positions of all the images ourselves.

Early on we found that although most of the images are created by finding a sympathetic theme from unsplash.com, we would also be using a few screen captures and other non-standard images. This means that we know that images will be ‘hard-cropped’ by the WordPress media upload process. The width of our images will be the fixed point and the height may change.  Therefore we try to keep the aspect ration pretty close to keep as much uniformity as possible.

If you want to make changes to your images then there are two places you will have to look.

Firstly you need to make sure that WordPress is going to create the size of images you want. This means changing the sizes in the media image of WordPress. You also need to know if the theme, or a plugin, is creating another size of an image.  You could then consider changing any of these by adding code in your functions.php file.

Secondly, you need to look at how your theme is going to output your images. not only on a standard page but also when the screen size changes for tablets and phone screens. If any of these need a tweak, then you will hopefully be able to override the settings using CSS style changes which you can add to the style.css of your child theme.

Photo by rawpixel.com on Unsplash

More Articles