Cropping an Image in WordPress

Introduction

In this post I will attempt to shed some light on the issue involving the placement of dynamically sized and dimensioned images.

The problem

Often when working in a html environment I find myself with the situation of needing to create a fixed image size that is repeated through out a WordPress site, be it a series of featured blog images or a slider. The problem though is that there is no guarantee that whoever is using the site will upload the correct image size, and of course you can make one of the dimensions fixed (and for responsive layout make a % value).

 

 <img src="https://richymiles.files.wordpress.com/2014/08/meandnix.jpg?w=300" alt="meandnix" width="50%" >

But then we still have the issue of dimension, as although the image will be proportional, it wont necessarily have the correct dimensions. The best solution that I have come up with of late is that of background images.

.-background-image {
width: 100%;
height: 400px;
background-repeat: no-repeat;
 background-position: top;
background-size: cover;
}

Lets break this down one line at a time:

The width property is the one that I would leave at 100% as I would rather have a varying width than a varying height for the sake of responsive design.

Therefore, we set the height property to a fixed px value that we want our image to stay at regardless of the dimension of the image, which in my case is 400px.

The “background-repeat: no-repeat; ” is there to stop the background repeating (obviously), if you would like the background to repeat or create a recurring pattern over your designated size then you will want to set this value to “background-repeat: repeat;”

 background-position: top; is a tough cookie to deal with because this dictates where the centre of the image will gravitate to when it starts cropping.

I like the position “top” because this automatically centres the image horizontally and places the focal point to the top vertically.

background-size: cover; is really where this technique comes to life as setting this value to “contain” will give you the effect of a normal <img> tag while “cover” will cause the image to begin cropping when it hits a certain value.

The next issue is one of the image source, this is declared by using this value “background-image:url(”);”

The best way to get dynamic content into this place though is through doing a bit of inline styling:

 <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
 $url = $image['0']; ?>
 <div class="slider-image" style="background-image:url('<?php echo $url; ?>');"> </div>

Within a WordPress context the above lines of code should be used within the loop wit the $post->ID value being the key here to pulling in the dynamic content.

I hope this post had shed some light on the issue, if you have any improvements, suggestions or questions feel free to leave a comment.

Advertisements

4 thoughts on “Cropping an Image in WordPress

    • Thanks for the feedback,
      The alternative of course is to embed the style in tags in the same file as we cant write php tag in a css file, when this code recurs in an environment such a loop its really going to look like a mess.
      Whichever way you swing it, mixing php and css is always going to look a bit ugly. Otherwise, I too get a tingly feeling of disgust when I see inline styling, its almost as bad as the important! tag!

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s