Skip to content

How to Add Height, Width, and Alt Text Fields in Magento 2 Page Builder Slider and Render on Frontend?

I am trying to add custom fields to the Magento 2 Page Builder slider, specifically for Desktop Image Width, Desktop Image Height, Mobile Image Width, Mobile Image Height and Alt Text.

I want to create the following fields under the path:

Media > Slider > Slide > Edit
  • Desktop Image Height: To specify Desktop image height.
  • Desktop Image Width: To specify Desktop image width.
  • Mobile Image Height: To specify Mobile image height.
  • Mobile Image Width: To specify Mobile image width.
  • Alt Text: For image accessibility and SEO purposes.

enter image description here

These fields need to:

  1. Be saved properly when the form is submitted in the admin panel.
  2. Be rendered correctly on the frontend within the image HTML element.

Could someone guide me on how to achieve this?