> 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="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2Fmj6EPB0Y5zY7qYaVQyg2%2Fimage.png?alt=media&amp;token=e409b896-6a16-4cbd-8897-b8c0810cca15" 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://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2F531Cpa0hOc2iCKPSAVlG%2Fimage.png?alt=media&amp;token=dbf08b74-db09-42d6-ab28-5bd9829c3175" 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="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2FRBCBC4z6LgL28OTQ5CFo%2Fimage.png?alt=media&amp;token=df4d4f2e-d288-4ef5-9059-1a65d2d32f3a" 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://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2Ff85VWO8fzpMihBIXdmYC%2Fimage.png?alt=media&amp;token=8f04451a-47b7-4513-8e25-a75b76dbf28c" 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="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2F94GvcFILmUGpuoRG0g0D%2Fimage.png?alt=media&amp;token=75f769fd-32ca-4305-a9e9-7d1851be18e4" 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://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2FzXJ5SeLi0U0bDnU2QD2I%2Fimage.png?alt=media&amp;token=f9033928-a50f-459e-a724-63218e6ffe9f" 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://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2FG2Xq3YzMqeqRxLawXsw5%2Fimage.png?alt=media&amp;token=ca0d7f8d-c3cf-4100-8240-d62b5d9b40dd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2FDnXafMcWSlt2VUqDGHvn%2Fimage.png?alt=media&amp;token=7dfcb872-9425-47ce-8764-ca0438696ac1" 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="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2FNpesvcF3fAfv5zkEE1vu%2Fimage.png?alt=media&amp;token=7d0ac4d6-d289-4742-b676-5a381f28c31e" alt=""><figcaption></figcaption></figure>