Add new image size with width set at 600px This is how we create a new image size ‘blog-large’ with a width set at 600px.
320px wideimage code#
Adding Custom Image SizesĪdding custom images sizes to Oxygen sites is done the usual WordPress way, but using a code snippets plugin instead of adding code to a theme. Here, the default size of 320px width we have set for the thumbnail size may not work if the height of the image isn’t also exactly 320px, which it won’t be unless the original image was also a perfect square. In order for any smaller image to be used for mobiles, there would also need to be smaller images that are also squares. Let’s say we need square images and are creating a custom image size that is a 800×800. This can make things more tricky when setting heights. The smaller image sizes will only be included in the markup if they have the same aspect ratio. Sometimes it maybe necessary to set the height as we need the cropping for some reason. The markup would then have our 600px image for desktop, but also include the smaller sizes of 480px and 320px. Alternatively, we could also create a new image size, which we’ll go through below.Īs long as we don’t set a height for any of our image sizes, we can then be sure that only the smallest size needed will be downloaded for different screen sizes. We could make, for example, the ‘large’ size have a width 600px instead of 992px. Then we could change one of WordPress’ default image sizes to that width and use that. If this 600px is a common enough size on our site, like it would be if this was the width of a blog post. Any more and then we’re going to be adding unnecessary weight to the page. Any less and the image will be blurry when it’s made to fit the container with CSS. It could be a thin blog post or maybe a column in a wide page layout.įor any images inside this container (or other containers of the same width), we know we want the image to have a width of 600px. Let’s say we have a container in a template with a maximum width of 600px on desktop screens. Meaning there is no image cropping so by default all images have exactly the same aspect ratio. This is working well out of the box because we’re only setting the widths for our image sizes, we’re not setting any heights. All of these image sizes have been added to the HTML because they are smaller versions of the image with the same aspect ratio as the large image. What we see in the markup is our large image (992px) being displayed for desktops, the medium large image (728px) automatically created by WordPress, our medium image (480px) and our thumbnail image (320px). The ‘large’ size has been selected to be used, which is 992px. Here we have a container of 992px with an image inside of it.
Similar to the post editor, when adding images from the image library with the image component, Oxygen will automatically attempt to add SRCSET images to the markup for us.
320px wideimage download#
This means smaller devices only download smaller images. The browser can then determine which is the best size to use, depending on what device the user is on. Any smaller versions of the image found with the same aspect ratio will also automatically be added into HTML for us. When an image is added to the content of a post or page, we choose the biggest size needed depending on the container size. These sizes can all be customised from the media settings and we can also add as new, custom sizes (explained at the end of the post).
When you add images to the media library WordPress automatically generates multiple copies of that same image at different sizes, Large, Medium-Large, Medium & Thumbnail. There are lots of resources explaining how these SRCSET image sizes work in general, but here’s a very simple overview of how it specifically works in WordPress…
Responsive Images were added natively to WordPress a few years back & support was added for them in the Image component in Oxygen in v2.2.
320px wideimage how to#
In this guide, we’ll go over some information on SRCSET images in WordPress, how to use them in Oxygen & how they can be used when we’re creating & using custom image sizes.