
Change the aspect ratio of an image using CSS
24/09/2021In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
If you read my WordPress posts you will often see me ask you to enqueue a script or style sheet. This is bread and butter for WordPress theme and plugin development. It is how we call JavaScript scripts and CSS style sheets into our WordPress applications so you will need to know this for every theme you create, and the vast majority of plugins, too.
Don’t worry if you are unsure about how to do this, I’m going to show you.
Resources are enqueued through your theme or plugin functions.php file. We start by writing a function to handle our enqueues as a group.
function gb_scripts() {
}
We then call the script through an action with a low priority. This will cause it to load further down the page.
function gb_scripts() {
}
add_action('wp_enqueue_scripts', 'gb_scripts', 999);
Now that we have a function ready we can start by enqueuing a style sheet. We do this using the wp_enqueue_style() function. Here is how I call the main style sheet for Gav’s Blog.
wp_enqueue_style('gb-css', get_template_directory_uri() . '/css/style.min.css', array(), '', 'all');
Let’s break this down a bit:
Enqueuing scripts work roughly the same way as enqueuing style sheets. We use the wp_enqueue_script() function for this.
wp_enqueue_script('gb-js', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '', true);
Here is the code breakdown:
A basic theme enqueue function will look something like this:
Note: I’ve included a Google Fonts enqueue, too.
function gb_scripts() {
// Adding scripts file in the footer
wp_enqueue_script('gb-js', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '', true);
// Register main stylesheet
wp_enqueue_style('gb-css', get_template_directory_uri() . '/css/style.min.css', array(), '', 'all');
// Register Open Sans Google Fonts
wp_enqueue_style('open-sans-google-font', 'https://fonts.googleapis.com/css?family=Open+Sans', false);
}
add_action('wp_enqueue_scripts', 'gb_scripts', 999);
Sometimes you might like to include a resource on a specific post or template. For me I find this useful when I only need a resource for a specific article.
A good example of where everybody might be using this can be seen on my comments guide.
if (is_singular() && comments_open() && (get_option('thread_comments') == 1)) {
wp_enqueue_script('comment-reply', 'wp-includes/js/comment-reply', array(), false, true);
}
As you can see, I wrap the enqueue in an if statement so that my comment-reply script is only used when we are viewing a post (singular), the comments are open and when threaded comments are enabled.
In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
Here is how you can fix node incompatibility error, using "Node Sass does not yet support your current environment" as an example.
Need to make a directory in PHP? No Problem! mkdir has you covered... Need to recursively make directories in PHP? mkdir has you covered, too!
Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!