# Image

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F7yv7cTBaCouSqceohYx7%2Fimage.png?alt=media&#x26;token=f040ecd7-32c0-491b-bd75-57c6edbedffa" alt=""><figcaption></figcaption></figure>

FoxStudio makes adding and customizing images simple and intuitive. This guide walks you through the steps to add and edit images effectively in FoxStudio.

## How to add an image

{% hint style="success" %}
**Steps:**

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. Select **Media** > **Images** or in **Quick add**, select **Image** element.
3. Drag the image onto your canvas.
   {% endhint %}

## How to edit an image

Once you've added the image, you can customize it to match your design.

{% hint style="success" %}
**Steps:**

1. **Select** the relevant image element in the editor.
2. Use the tools bar above the selected image element to quickly edit it.

All the formatting tools below can be found in the right-handsided **Inspector** panel.
{% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F9TwaWOEmyLYmo6l7FND3%2Fimage.png?alt=media&#x26;token=309e0412-8095-4ebc-a3fb-c1f5185b9a8c" alt=""><figcaption></figcaption></figure>

### Image fit

Adjust how the image fits within its container:

* **Keep image ratio**: Maintains the original aspect ratio of the image while resizing it to fit within the container.
* **Fill bounding box**: Stretches the image to fill the entire container, which may distort its aspect ratio.
* **Fit to bounding box**: Scales the image to fit within the container while ensuring the entire image is visible, with possible empty spaces.

{% tabs %}
{% tab title="Keep image ratio" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FQPPmREuxZ68rwf3LLRfH%2F2024-09-1210-16-53-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=e8d6bca6-eb8f-4e5f-bb90-512e7dc6b593" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fill bounding box" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FN5HIDGO1zMyv6YowAK6H%2F2024-09-1210-18-50-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=51bacf17-94a1-4ba2-9ed6-286653fb20a2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fit to bouding box" %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FMQ4oksBtGJ91FjpCMn63%2F2024-09-1210-21-42-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=516a0da8-ce56-4f6e-8f15-677326721e61" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Image shape

Select from pre-defined shapes (e.g., circle, hexagon, triangle) to apply unique styling to your image.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FnhXykxOmynlfvRyxP5ZE%2Fimage.png?alt=media&#x26;token=c9973747-6892-4cd2-9d0d-8b31d1aa0a0d" alt=""><figcaption></figcaption></figure>

### Click action

Define what happens when users click on an image.

* **None**: No action is taken when the image is clicked. This is ideal for decorative or static images.
* **Open link**: Redirect users to a specific URL when the image is clicked.
* **Send email**: Opens the user's default email client to send an email.
  * You can specify:
    * **Email Address**: The recipient's email address.
    * **Subject**: The default subject line for the email.
* **Call phone**: Initiates a phone call when the image is clicked. Enter the phone number in the provided field.
* **Jump to anchor**:&#x20;

  * Scrolls the user to a specific section of the page.
  * Select or enter the anchor ID to link to the corresponding section.

  :question: Learn more: [create-an-anchor-link](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/create-an-anchor-link "mention")
* **Open pop-up**: Displays a pop-up window containing additional information, media, or content when the image is clicked.
