WordPress For Beginners – Responsive SRCSET Images in Oxygen (Register & Use Custom Image Sizes!)

by | May 13, 2021 | 0 comments

WordPress For Beginners – Responsive SRCSET Images in Oxygen (Register & Use Custom Image Sizes!)

by | May 13, 2021 | Wordpress Tutorials for Beginners | 0 comments

WordPress For Beginners Tutorials and information. We source some of the best tutorials online to help you manage your wordpress website.




Ready to learn how to register custom image sizes in WordPress and use SRCSET functionality in Oxygen for fully responsive images?

In this tutorial you’ll learn:

• The difference between “responsive images” (width scales effectively without causing overflow issues) and “responsive SRCSET images” (loading multiple image sizes so the browser can choose the best size.

• The old non-SRCSET way to add images to Oxygen and why it’s less desirable.

• How to register custom image sizes in WordPress for use in Oxygen.

• How many custom image sizes you should be registering and exactly what those sizes are.

• How to insert SRCSET responsive images easily using the Oxygen builder.

• How to regenerate existing images so all their sizes are available in the Oxygen builder.

If you’re interested in the OxyNinja utility classes I used to quickly create responsive grids in this tutorial, you can get it here (it’s one of the absolute best investments you’ll make to your Oxygen workflow): https://go.digitalambition.co/oxyninja/

Grab the code for registering custom image sizes here: https://digitalambition.co/watch/responsive-srcset-images-in-oxygen-register-use-custom-sizes/

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Amplifylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to...

Rob - Amplylife.ca

Dieno Digital Marketing Services
5
2018-05-03T19:49:40+00:00

Rob - Amplylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to bring a high level of creativity, energy, expertise and professionalism to the project for their digital marketing needs. We are so excited for the chance to work more with Leland and Dieno Digital.

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.

Juju Hair Lounge

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything...

Leah

Dieno Digital Marketing Services
5
2018-07-09T03:06:21+00:00

Leah

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything I've learned to our Facebook business page!

Uniglobe Travel – Western Canada

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated...

Ciara

Dieno Digital Marketing Services
5
2018-07-10T03:22:20+00:00

Ciara

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated that there was some concrete, actionable advice given as well!
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>