How to resize boxes and get content to fit in a box?

Visual Editor Help
1

Builder content link
Landing page | Visual Editor | Builder.io

Builder public api key
97641f8ffe6c43fc9f4bc9d1c49c7e2a

What are you trying to accomplish
Following tutorial on how to build a landing page.
I cannot figure out how to get the image and text to fit in the box and how to resize the box. The tutorial does not really describe what to do.

Screenshots or video link

image
image1599×889 130 KB

Code stack you are integrating Builder with
Astro

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Resizing an image in Builder.io can be done either directly in the Visual Editor or by using the Image API. Here are the two primary methods:

Method 1: Resizing an Image in the Visual Editor

  1. Log in to Builder.io:
    Navigate to Builder.io and log in to your account.

  2. Open your Content:
    Open the page or section where your image is located.

  3. Select the Image:
    Click on the image you want to resize. This will bring up the options for that image in the right-hand sidebar.

  4. Resize the Image:

    • Use the width and height input fields in the sidebar to adjust the image dimensions.
    • You can set the width and height in pixels (px), percentages (%), or other CSS units.

Adjust Dimensions Example:

  • Set the width to 200px and height to 150px.

Method 2: Resizing an Image via the Image API

Builder.io provides an Image API that allows you to manipulate images on-the-fly by appending query parameters to the image URL.

  1. Get the Image URL:

    • Obtain the URL of the image you want to resize. This might look something like: https://cdn.builder.io/api/v1/image/{image-id}.

  2. Append Query Parameters:

    • Use query parameters to specify the dimensions. For example, if you want to resize the image to 200px by 150px, you would append ?width=200&height=150 to the URL.

Example:

Original URL:

https://cdn.builder.io/api/v1/image/{image-id}

Resized URL:

https://cdn.builder.io/api/v1/image/{image-id}?width=200&height=150

Supported Parameters:

The Image API supports various parameters for resizing and optimization:

  • width: Desired width of the image in pixels.
  • height: Desired height of the image in pixels.
  • format: Desired output format (e.g., webp, jpg).
  • quality: Quality of the image (e.g., quality=80).

Example Code Using Image API:

Here’s how you can use the Image API in your code:

import React from 'react';

const ResizedImage = ({ imageUrl, alt }) => {
  // Resize the image to 200x150 pixels using query parameters
  const resizedImageUrl = `${imageUrl}?width=200&height=150`;

  return <img src={resizedImageUrl} alt={alt} />;
};

export default ResizedImage;

Summary

  1. Visual Editor: For a WYSIWYG approach, use the Builder.io visual editor where you can simply click and adjust dimensions in the sidebar.
  2. Image API: For more control over image optimization and resizing, use Builder.io’s Image API by appending query parameters to the original image URL.

You can find more detailed documentation and examples in the official Image API Documentation.