One of the most common element everyone wants to add to their website are images. With Responsive Layout Maker, we offer you two options for adding them to your layout.
- The Export Path (Recommended)
- Replacing the SVG Code
In some regards, both options are similar; however, one offers a ‘quick connect’ where you can do this within the software, and the other will be handled by directly editing the exported HTML.
The Export Path (The Recommended Option)
We highly recommend you use this option over the other as it allows you to pre-add your image paths directly within Responsive Layout Maker. Adding the Export Path of an image can be accomplished in two ways. First you need to double click the image that you are going to edit. This brings up the Properties tab of that image on the right-hand side. Here you will find the Export Path option that allows you to enter in a URL or relative path to your image which are explained below.
Relative Path
If you wanted to simply enter the relative path to the image you would enter something like image-folder-name/image-file-name.png. Using a relative path to an images means whichever folder name you supply in the Export Path needs to also be in your exported project files. If the folder does not exist, you need to create a folder for your images in your local exported website folder.
Where should you store your images?
It is common practice to store images in their own directory (folder). RLM uses a folder called img which is located in the root directory of your project. In order to point to images in that directory you need to know where the directory is in relation to the root of your website or webpage you are working on.
Absolute Path
If you want to use an image already located someplace on the web, you can specify a URL as the source. The URL points to the location where the image is stored. An example would be http://www.mywebsite.com/imagefolder/imagename.png. Once you export your project, no other actions need to be taken as the image will be linked and will be displayed in your exported layout. While this is the easier of the two options, should those images ever get moved or deleted, your website will then display a broken image. Having these images located within your project gives you more control over your website.
Replacing the SVG Code
This option takes place after you have exported your project. This is basically just copying and replacing the image name for each image. For example, you would find each image in your exported code such as this one:
<img class="image-4-3 header-image" src="/img/image-3x2.svg" alt="Image">
You would then remove the image-3x2.svg and add the name of your image. Your code should look something like this:
<img class="image-4-3 header-image" src="/img/my-picture.png" alt="My Pretty Face">
Naming your images
No symbol, alpha numerical characters or spaces should be used when naming your images. When an image name has more than one word replace the space with a - (dash) or _ (underscore).
Missing some settings?
This is because Responsive Layout Maker Pro was used for the creation of this article. One or more of the settings used here might not be available in Responsive Layout Maker. For the most part however, you can continue through the article adjusting the settings that are available to you.
