> For the complete documentation index, see [llms.txt](https://docs.theshoppad.com/blogstudio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theshoppad.com/blogstudio/customize-the-app/add-and-adjust-images-on-your-article.md).

# Add and adjust images on your article

Add photos and GIFs to a Blog Studio article, then adjust image settings, change a section's background image and resize pictures.

Follow the steps below on how to add and adjust images on your article. Topics discussed in this document are:

* [Add images on your article](https://docs.theshoppad.com/blogstudio/customize-the-app/add-and-adjust-images-on-your-article/#add-images)
* [Add GIF images on your article](https://docs.theshoppad.com/blogstudio/customize-the-app/add-and-adjust-images-on-your-article/#add-gif-images)
* [Adjust images on your article](https://docs.theshoppad.com/blogstudio/customize-the-app/add-and-adjust-images-on-your-article/#adjust-images)
* [Adjust a section's background image](https://docs.theshoppad.com/blogstudio/customize-the-app/add-and-adjust-images-on-your-article/#adjust-section)
* [Resize images](https://docs.theshoppad.com/blogstudio/customize-the-app/add-and-adjust-images-on-your-article/#resize-image)

## Add images on your article

To add images to your article, you can click on the **Content Block icon**, under the **+ icon**. You can select the drop-down menu on top and select Photos or other different content blocks. 

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2812%29.png" alt=""><figcaption></figcaption></figure>

Once you have found the perfect content block, you can drag and drop it into your article until you see a gray box. Once you do, release your cursor and you can see the added content block on your article.

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2813%29.png" alt=""><figcaption></figcaption></figure>

## Add GIF images on your article

In order to add a GIF image to your article, click onto the image, then select the **Link icon**.

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2814%29.png" alt=""><figcaption></figcaption></figure>

Upload the GIF image with the **Image icon** and wait until the image link is refreshed. Click **Ok** and see the image displaying on your article.

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2815%29.png" alt=""><figcaption></figcaption></figure>

## Adjust images on your article

When you click on an image, you will see three icons:

* **Image icon:** Upload a different image from your device
* **Link icon:** Contains the image's url, title, link, and Open New Window settings
* **Pencil icon:** Resize the image

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2816%29.png" alt=""><figcaption></figcaption></figure>

On the bottom of the selected image, you will see three icons:

* **+ icon**: Add more content blocks
* **... icon**: More settings - Move Up, Move Down, Duplicate, Settings
* **x icon**: Remove the image

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2817%29.png" alt=""><figcaption></figcaption></figure>

From the image above, the Settings button will contain a variety of formatting settings that you can play with.

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2819%29.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2820%29.png" alt=""><figcaption></figcaption></figure>

## Adjust a section's background image

When clicking on the section, you will see a green image icon on the bottom of the section. Clicking on it will allow you to change the section's background.&#x20;

<figure><img src="https://docs.theshoppad.com/blogstudio/assets/image%20%2821%29.png" alt=""><figcaption></figcaption></figure>