Smooth Step CMS | Video tutorial
Text from photo management video demonstration
In this chapter I am going to explain how to work with images.
Let's open “example” page that we have created and edited in our previous video tutorials.
We can easily add a floating image to each text block that we create. Only one image per block can be added so we would recommend creating short text blocks if you want many photos on the page.
I am going to click on our second text block and choose “add an image” in contextual menu. This immediately adds an empty image that we can edit.
Let's click on it to open our photo plugin. Here we can upload, resize and style images.
Firstly I am going to change the height of the empty image to fit the paragraph of text, let's set it to 160 pixels and click on “upload” button.
In “Upload image” dialog I am going to choose a test photo that is located in my computer.
Content management system sets this uploaded image as original. We have to click “resize” button to resize the image to the size we have set. I am going to add a little bit of sharpening to make the photo more vivid. We can align it to be at the right if needed; different border styles can also be chosen.
After performing resizing a second image appears exactly how it is going to be seen on the web. Our content management system also indicates size in kilobytes of our web image, we can decrease compression quality and resize again for faster web site performance.
Original image is saved because we might need to resize it in the future. For example we decide to make it bigger if we add more text to the block that holds the image. Let's open image tool and change width to 270, height to 200, then click “resize” and “save”.
Smooth Step CMS features powerful image resizing technology. It determines the best way to crop the photo if original and resized image proportions are different.
We have created this tool to be as easy and as automated as possible as many web site owners don't know much about complex photo editing software.