Image settings – labels, styles, linking, and alignment
Once you add an image to your post, you have several ways to optimize and edit it.
We’ve prepared a video to help you learn everything you can do with your posts' images.
And if you prefer a plain ol’ text version, scroll below the video for our written guide.
DropInBlog allows you to optimize your images for search engines.
You can easily add alternative text and captions to ensure search engine crawlers and users with screen readers know what’s in an image even if it doesn’t show on a page.
To add the alt text to your image, click anywhere on the image. From the menu that appears, select the “T” icon.
After clicking this icon, a window will appear below your image. Here, you can add the alt text for your image.
Alt text should generally contain the keyword you are targeting and/or a description of the image.
Select Update to save your changes.
To add a caption to your image, click on the image again. This time, select the second icon from the left – an image with a line right beneath it.
When you click on this icon, the editor will add a text box with the default “Image Caption” text.
Click inside this box to edit the caption.
Once done, click outside the box, and the changes you made will be automatically saved.
Image captions can be used to describe something in the image such as “Our Founder, Mr. Smith,” or they can be used to give credit to the person who took the image, e.g., “Photo by Andrew Smith / Unsplash.”
All images you add to your blog posts have a light border and shadow around them by default.
You can easily remove that border if you don’t want it to show around your images (If you’d like to change this globally it can be done in the Design Customizations).
Click on the image and select the icon of a rectangle with a star in it.
This will open a dropdown with the following options: No Border and Wide Breakout.
Selecting the No Border option will remove the default image border.
The second option will adjust the size of your image to the width of the editor.
The image below is a preview of the Wide Breakout image style.
You can also apply two styles at once.
For example, you can select Wide Breakout and No Border.
The styles you select will have a gray background, as shown in the image below.
If you want to change the default border style for your images on a global level for all posts on your blog, follow these steps:
Go to the Code & Layout page.
Under Advanced → Design Customizations, find Image Frame.
Select the desired option from the dropdown menu.
Don’t forget to save your changes by clicking the Save Design Customizations button.
If you want to add a link to your image, you can do that too.
Click on the image first, then select the link icon.
Clicking the link icon will open a new window below the image, where you can do the following:
Insert a link
Select the appropriate “Rel” attribute
Set the link to open in a new tab
Once done, click Insert to save the changes.
Another thing you can do with the images you add to your posts is to change their display settings.
Click anywhere on the image first, and select the Display icon – it looks like a regular webpage with an image and some text that someone shrunk.
The dropdown that appears will show two options: Inline and Break Text.
An Inline image will appear on the same line as the text, while Break Text will divide images and text.
The difference between these two options is best seen when you align an image left or right.
To access image alignment settings, click on the image, then select the alignment icon.
From the dropdown menu, you can select the alignment position – left, none, or right.
If you select Inline as your preferred display style and align the image left or right, the text will wrap around your image.
In general, we recommend selecting Break Text as the default Display option and setting the Image Style to Wide Breakout. These settings will make your images more responsive, and they might even look nicer.
You uploaded your image and added it to your blog, but now you’d like to move it to another position. No problem!
Click the image and, while holding the mouse button, drag it to the area where you want it to appear and drop it there.
That’s all there’s to it!
If you want to replace an image you already added to your post, click on it and look for the icon with two horizontal arrows pointing in opposite directions.
Upon clicking on this icon, a new window will appear below your image.
Click on the file icon to open the File Manager, and select one of the existing images.
Alternatively, you can upload a new image.
Hover over the image you want to add to your post and select Insert.
To confirm your choice, click the Replace button in the window below the image.
If you want to remove the image completely, select the trash icon upon clicking on your image.
These are all the things you can do with your images inside the DropInBlog editor.
Happy blogging!
We’ve prepared a video to help you learn everything you can do with your posts' images.
And if you prefer a plain ol’ text version, scroll below the video for our written guide.
Optimizing images for SEO
DropInBlog allows you to optimize your images for search engines.
Adding alt text
You can easily add alternative text and captions to ensure search engine crawlers and users with screen readers know what’s in an image even if it doesn’t show on a page.
To add the alt text to your image, click anywhere on the image. From the menu that appears, select the “T” icon.
After clicking this icon, a window will appear below your image. Here, you can add the alt text for your image.
Alt text should generally contain the keyword you are targeting and/or a description of the image.
Select Update to save your changes.
Adding image captions
To add a caption to your image, click on the image again. This time, select the second icon from the left – an image with a line right beneath it.
When you click on this icon, the editor will add a text box with the default “Image Caption” text.
Click inside this box to edit the caption.
Once done, click outside the box, and the changes you made will be automatically saved.
Image captions can be used to describe something in the image such as “Our Founder, Mr. Smith,” or they can be used to give credit to the person who took the image, e.g., “Photo by Andrew Smith / Unsplash.”
Image styles & borders
All images you add to your blog posts have a light border and shadow around them by default.
You can easily remove that border if you don’t want it to show around your images (If you’d like to change this globally it can be done in the Design Customizations).
Click on the image and select the icon of a rectangle with a star in it.
This will open a dropdown with the following options: No Border and Wide Breakout.
Selecting the No Border option will remove the default image border.
The second option will adjust the size of your image to the width of the editor.
The image below is a preview of the Wide Breakout image style.
You can also apply two styles at once.
For example, you can select Wide Breakout and No Border.
The styles you select will have a gray background, as shown in the image below.
If you want to change the default border style for your images on a global level for all posts on your blog, follow these steps:
Go to the Code & Layout page.
Under Advanced → Design Customizations, find Image Frame.
Select the desired option from the dropdown menu.
Don’t forget to save your changes by clicking the Save Design Customizations button.
Adding links to images
If you want to add a link to your image, you can do that too.
Click on the image first, then select the link icon.
Clicking the link icon will open a new window below the image, where you can do the following:
Insert a link
Select the appropriate “Rel” attribute
Set the link to open in a new tab
Once done, click Insert to save the changes.
Image display and alignment
Another thing you can do with the images you add to your posts is to change their display settings.
Click anywhere on the image first, and select the Display icon – it looks like a regular webpage with an image and some text that someone shrunk.
The dropdown that appears will show two options: Inline and Break Text.
An Inline image will appear on the same line as the text, while Break Text will divide images and text.
The difference between these two options is best seen when you align an image left or right.
To access image alignment settings, click on the image, then select the alignment icon.
From the dropdown menu, you can select the alignment position – left, none, or right.
If you select Inline as your preferred display style and align the image left or right, the text will wrap around your image.
In general, we recommend selecting Break Text as the default Display option and setting the Image Style to Wide Breakout. These settings will make your images more responsive, and they might even look nicer.
Moving images within your posts
You uploaded your image and added it to your blog, but now you’d like to move it to another position. No problem!
Click the image and, while holding the mouse button, drag it to the area where you want it to appear and drop it there.
That’s all there’s to it!
Replacing and deleting images
If you want to replace an image you already added to your post, click on it and look for the icon with two horizontal arrows pointing in opposite directions.
Upon clicking on this icon, a new window will appear below your image.
Click on the file icon to open the File Manager, and select one of the existing images.
Alternatively, you can upload a new image.
Hover over the image you want to add to your post and select Insert.
To confirm your choice, click the Replace button in the window below the image.
If you want to remove the image completely, select the trash icon upon clicking on your image.
These are all the things you can do with your images inside the DropInBlog editor.
Happy blogging!
Updated on: 27/11/2024
Thank you!