The picture block is one of the most powerful and key elements you can use to build your site. Picture block allows you to add an image, including an SVG, to your site and resize, reshape and add alt text. Check out the below guide for all the details.
Please note, if you signed up before the 13th of November 2023 you may have the original picture block for you to edit. Here is how to edit this version of the Old Picture Block
For the different types of image layouts you can use (a background image, gallery of images, etc.) please check out this guide: The different image functions you can use on your website
Navigate the picture block guide:
How to add an image
How to edit the picture block
- Adjust the height of the image
- Replace a current image
- Add a link to the image
- Add Alt text to the image
- Add an Image shape
- Corner Design functions
- Reposition an image on your website
- Delete an image
- Copy an image design
- Image mobile settings
- Advanced image sizing: Fit/Fill Image
How to add an image
- To get started, login to your Rocketspark website and go to the Editor.
- On the desired page and stack, click the blue plus icon to add a new block.
- A pop-up will appear for you to select "Picture"
- Select the image file from your computer and click "Open"
Below are the supported image formats for a picture block
Learn more here: What types of images can I upload?
How to edit a picture block
- Hover over the image and find the edit pencil icon.
- The picture block editing controls will appear, follow the guide below to learn the functions
***Best Practice***
If you want to play around with the editor controls for the image, we would recommend that you first duplicate the stack and make the duplicated stack hidden.
When making changes, make sure to "Save Changes" when you are happy with the edits!
Adjust the height of the image
To make the image larger, Click the bottom arrow + Drag your mouse downwards
To make the image smaller, Click the bottom arrow+ Drag your mouse upwards
If you want to scale down the image to fit the height and see all of the uploaded image, click on the grey icon with white arrows and the image will scale to fit the height.
For more adjustments to the image sizing, you can play around with the stack width and spacing settings: How to adjust content width & spacing for a stack? Also, the Advanced image sizing.
Replace a current image
You can easily replace the current image with a new image.
- In the image editor, click "Replace"
- Your content files on your device will appear for you to choose a new image and open it.
Add a link to the image
- In the image editor, click the icon "Add a Link"
- A pop-up will appear for you to choose the link destination
- Click the desired column (a specific page, a blog post, a product in the store, or an external website URL) and choose the link destination.
- Click "Save Changes" and test this image link to ensure it is working correctly.
Add Alt text to the image
Alt text is a hidden description for images (What is Alt text?). Search engines use alt text to understand what's in pictures to help your website show up higher in search results.
- In the image editor, click the icon "Add Alt Text"
- Enter the description of the image for SEO purposes. If you are unsure, you can use an Alt Text Generator.
*Please note, that you will not be able to add text directly on the picture block. Instead, add text in a separate block next to the image: How do I add text to my website? If you want text on an image, you can use the "grid gallery" feature: How do I add a grid gallery to my website?
Image shape
- In the image editor, click "Change Shape"
- Choose a shape (oval, triangle, circle...)
- If you want to display the full image instead, click "Remove Shape"
Corner Design functions
- In the image editor, click "Change Shape"
- Toggle over to "Corners" settings
- You can change the corner radius - this radius will apply to each corner of the image
- If you click "Control corners individually" you can create a fun and unique design with corner-specific settings!
Reposition an image on your website
You can reposition the picture block to any other stack on the page or within the same stack.
- Hover over the image and find the four arrow icon.
- Click the arrow icon + Drag your mouse to reposition the image on the page.
Delete an image
Before deleting an image, make sure you don't need this. To have a copy of the picture block, you can create a hidden stack to hold this content: How to use the Hide/show stack feature
- Hover over the image and find the Trash Can icon.
- Click the icon to delete the picture block.
Copy an image design
If you have created a picture block that you want to use multiple times throughout the website, you can copy the stack.
- Hover over the picture block and find the settings on the right-hand side of the stack
- Click "Copy Stack"
- A pop-up will appear - you can choose to copy the stack to the same page or choose a different page on your website.
- Further, remove any content from the copied stack that you do not want to display.
Image mobile settings
After you have added and edited the picture block, make sure to review what this looks like for your mobile view.
- Hover over the picture block and find the settings on the right-hand side of the stack.
- Click the color wheel to edit the stack design.
- Click the "Width & Spacing" dropdown.
-
Toggle over to the Mobile view and adjust the width and spacing for the image to fit the margins best for mobile.
- Make sure to save your changes once you are happy.
If you need help or have questions, please contact support@rocketspark.com