Divi-Engine/code-snippets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed typo and better heading

Browse Source
This commit is contained in:
Pavak Paul 2023-08-25 17:33:30 +05:30
parent 3136777370
commit 597f6c0d9d
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
set-custom-thumbnail-size/README.md
View File

@ -1,19 +1,19 @@
# Register Custom Sizes for Thumbnail Module
# Register Custom Thumbnail Sizes in WordPress
This guide will allow you to register custom sizes to your WordPress. When you upload a new image to your media library, WordPress will autometically resize and/or crop the image to the specified sizes. In this example, we'll register a couple of resolutions: 512px x 384px and 640px x 480px. We'll also enable hard crop, so the images will be cropped.
This guide will allow you to register custom sizes to your WordPress. When you upload a new image to your media library, WordPress will automatically resize and/or crop the image to the specified sizes. In this example, we'll register a couple of resolutions: 512px x 384px and 640px x 480px. We'll also enable hard crop, so the images will be cropped.
<!-- You can then select that specific size for the Thumbnail module. This will let you select a particular aspect ratio so all the images can appear the same size. -->
### Prerequisite
- You need to have a child theme. If you don't have one, there are tons of free plugin available at the [WordPress Plugin Repository](https://wordpress.org/plugins/search/child+theme/) That can help you create a child theme.
- You need to have a child theme. If you don't have one, there are tons of free plugins available at the [WordPress Plugin Repository](https://wordpress.org/plugins/search/child+theme/) That can help you create a child theme.
### Steps to register a custom size in WordPress:
1. Edit `functions.php` on your child theme. You can edit in one of the following ways:
- In the WordPress Dashboard, go to `Appearrence` > `Theme File Editor` and select `functions.php`.
- In the WordPress Dashboard, go to `Appearance` > `Theme File Editor` and select `functions.php`.
![Theme File Editor](screenshots/theme_file_editor.jpg)
- You can edit the file directly either by using FTP, or your hosting panel's web file manager. Either way, you should take a backup before making any changes to the file.
2. Add the following code ad the end of the file:
2. Add the following code at the end of the file:
```php
// Add new image sizes:
add_image_size( 'thumb-512x384', 512, 384, true );
@ -31,17 +31,17 @@ function my_custom_image_sizes( $sizes ) {
### Understanding and Customizing the Code
In the line `add_image_size( 'thumb-512x384', 512, 384, true );`, we are calling the `add_image_size` function of WordPress to add a custom thumbnail size.
- `thumb-512x384` is the name of the thumbnail size. You can name it anything you want, just make sure there is no spaces or special characters other than `-` and `_` in the name.
- The Arguments `512` and `384` defines the weidth and height of the thumbnail size in pixel value. You can customize the values as you want.
- `true` is a boolean value, that specifies whether the images should be cropped to preserve the aspect racio of the resolution provided. This is called hard crop. By default, it's set to `false`, so if you don't want the images to crop, you can simply remove the argument and the line can look like this:
- `thumb-512x384` is the name of the thumbnail size. You can name it anything you want, just make sure there are no spaces or special characters other than `-` and `_` in the name.
- Arguments `512` and `384` define the width and height of the thumbnail size in pixel value. You can customize the values as you want.
- `true` is a boolean value, that specifies whether the images should be cropped to preserve the aspect ratio of the resolution provided. This is called a hard crop. By default, it's set to `false`, so if you don't want the images to crop, you can simply remove the argument and the line can look like this:
`add_image_size( 'thumb-512x384', 512, 384 );`.
We will discuss customizing the hard crop position in a little bit.
For the line `'thumb-512x384' => __( 'Thumbnail 512x384px' ),`, we are registering the sizes.
- `thumb-512x384` is the size we added earlier and `Thumbnail 512x384px` is the label that will be displayed in the WordPress:
- `thumb-512x384` is the size we added earlier and `Thumbnail 512x384px` is the label that will be displayed in WordPress:
![Custom sizes showing in WordPress](screenshots/custom-sizes-showing-in-wordpress.jpg)
You can provide a sutable title and can use spaces in the label.
You can provide a suitable title and can use spaces in the label.
#### Hard Crop Positioning
@ -50,37 +50,37 @@ You can set the position of Hard Crop like this:
```php
add_image_size( 'thumb-512x384', 512, 384, array( 'left', 'top' ) );
```
In this example, we are cropping from the top left corner. the first value in the array is the x axis (horizontal) crop position, the second is the y axis (vertical) crop position. The supported values for X and Y axis are:
In this example, we are cropping from the top left corner. the first value in the array is the x-axis (horizontal) crop position, the second is the y-axis (vertical) crop position. The supported values for the X and Y axes are:
- X: `left`, `center`, or `right`.
- Y: `top`, `center`, or `bottom`.
This way you can set 9 crop positions. When you don't specify a crop position array, it defaults to center.
### Re-generarting existing images
### Re-generating existing images
Once you add and registe custom thumbnail sizes in your child theme's `functions.php`, you need to regenerate thumbnails for the existing images in the media library so that those images will be available for the already uploaded images. You can either do it using a plugin or by using [WP-CLI](https://wp-cli.org/) in the command line:
Once you add and register custom thumbnail sizes in your child theme's `functions.php`, you need to regenerate thumbnails for the existing images in the media library so that those images will be available for the already uploaded images. You can either do it using a plugin or by using [WP-CLI](https://wp-cli.org/) in the command line:
#### 1. Use a plugin to regenerate the thumbnails
You can find many plugins in the [WordPress plugin repository](https://wordpress.org/plugins/search/regenerate+thumbnail/) that'll let you regenerarte thumbnails. You can try the plugin [Regenerate Thumbnails](https://wordpress.org/plugins/regenerate-thumbnails/). I've used it before and it works well.
You can find many plugins in the [WordPress plugin repository](https://wordpress.org/plugins/search/regenerate+thumbnail/) that'll let you regenerate thumbnails. You can try the plugin [Regenerate Thumbnails](https://wordpress.org/plugins/regenerate-thumbnails/). I've used it before and it works well.
#### 2. Use WP-CLI to regenerate the thumbnails
If you love the command line like me, then this method is for you. You can use [WP-CLI](https://wp-cli.org/) to [regenrate the thumbnails](https://developer.wordpress.org/cli/commands/media/regenerate/) of the existing images. All you have to do is `cd` to the WordPress root directory and enter this command:
If you love the command line like me, then this method is for you. You can use [WP-CLI](https://wp-cli.org/) to [regenerate the thumbnails](https://developer.wordpress.org/cli/commands/media/regenerate/) of the existing images. All you have to do is `cd` to the WordPress root directory and enter this command:
```sh
wp media regenerate
```
WP CLI also lets you generrarte only the missing images, specify attachment ID of the images to only regenerate specific images, and last but not the list, only regenerrate specific thumbnail sizes. You can find all the details [here](https://developer.wordpress.org/cli/commands/media/regenerate/#options).
WP CLI also lets you generate only the missing images, specify the attachment ID of the images to only regenerate specific images, and last but not the list, only regenerate specific thumbnail sizes. You can find all the details [here](https://developer.wordpress.org/cli/commands/media/regenerate/#options).
### Using Custom Thumbnail Sizes With Divi Engine Plugin Modules
Using custom thumbnail sizes is a great method to be used with our [Divi Machine](https://diviengine.com/product/divi-machine/) `Thumbnail` & `ACF Item` modules and the `LL Thumbnail` module from [Divi BodyCommerce](https://diviengine.com/product/divi-bodycommerce/). You can also use it with the `Thumbnail` module that comes with [Divi Ajax Filter](https://diviengine.com/product/divi-ajax-filter/).
Custom thumbnail sizes with hard crop mode is very useful to be used inside [Loop Layouts](https://help.diviengine.com/article/874-divi-machine-custom-loop-layout) if you want all the images in an [Archive Loop](https://help.diviengine.com/article/906-archive-loop) to look the same:
Custom thumbnail sizes with hard crop mode are very useful to be used inside [Loop Layouts](https://help.diviengine.com/article/874-divi-machine-custom-loop-layout) if you want all the images in an [Archive Loop](https://help.diviengine.com/article/906-archive-loop) to look the same:
- Thumbnail and LL Thumbnail: You can set a custom registered size in the `Thumbnail Image Size` field:
![Thumbnail Image Size](screenshots/thumbnail-image-size.jpg)
- ACF Item module: When using an Image ACF Image field, you can set a custom thumbnail size in the `ACF Item` module settings > `Image, file, url, phone, email & Link Settings` section > `Image Only` tab:
![ACF Item module Image Size](screenshots/acf-item-module-image-size.jpg)
You can also registe specific sizes to better optimize your pages. For example, you can have different sizes fo different grid sizes as a 4 column grid takes half the size of a 2 column grid. You can also use them for better responsive optimizations using different sizes per device type (Use Divi's `Visibility` options).
You can also register specific sizes to better optimize your pages. For example, you can have different sizes for different grid sizes as a 4-column grid takes half the size of a 2-column grid. You can also use them for better responsive optimizations using different sizes per device type (Use Divi's `Visibility` options).