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

# Add and adjust images on your article

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](#add-images)
* [Add GIF images on your article](#add-gif-images)
* [Adjust images on your article](#adjust-images)
* [Adjust a section's background image](#adjust-section)
* [Resize images](#resize-image)

### Add images on your article <a href="#add-images" id="add-images"></a>

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.&#x20;

<figure><img src="/files/2EBbS3eDWA2x7OmSD2by" 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="/files/01glnmh9A3LzpXg2h456" alt=""><figcaption></figcaption></figure>

### Add GIF images on your article <a href="#add-gif-images" id="add-gif-images"></a>

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

<figure><img src="/files/ol1xJHXDI6gJKLWeQfNr" 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="/files/rdLIUs5S5W5duYknYLVQ" alt=""><figcaption></figcaption></figure>

### Adjust images on your article <a href="#adjust-images" id="adjust-images"></a>

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="/files/4XuxPjs7PVu3BZI2BfZU" 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="/files/RLmctSZgpeSxNmu4z5YK" 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="/files/bNUlK99wteleoEys2yaz" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9USrxVcT9WzQnpHXyUJE" alt=""><figcaption></figcaption></figure>

### Adjust a section's background image <a href="#adjust-section" id="adjust-section"></a>

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="/files/pnTkqAzH9Pu986BbArsM" alt=""><figcaption></figcaption></figure>