Linking to Images

User 2592569 Photo


Registered User
17 posts

I have taken all of the tutorials offered for RLM and read the manual. I am beginning to grasp the concepts and have begun converting my website created in VSD to RLM. My current issue is that I have a fundamental lack of understanding of where images that are linked through RLM should reside. In VSD they reside in the "files" folder. When I review the HTML in the exported "index" file I do not see any link to a folder that may contain images even though the manual indicates that RLM uses a folder named "img" which I have put into the folder containing the exported files. I do see links to the relevant CSS folders in "index". Because I am not very fluent in HTML I do not know if I need to add a link to "img" in index or how to do that if I need to. Please advise on how I resolve this issue.

Also please advise if I need more esperience with HTML in order to use RLM. If that is the case I may need to rethink this change although I believe the break point functions in RLM will improve the experience of those trying to look at our website on devices other than a full size computer screen. We seem to be getting a lot more hits lately from those devices.

I have other questions on pages, buttons and columns but that can wait for another day. If I get by this issue with images I may be able to figure out the other questions on my own.

Thanks,

Larry
User 10077 Photo


Senior Advisor
1,096 posts

Sometimes, the thought of having to learn HTML seems overwhelming, but the little bit that helps you use RLM more easily is not hard at all. So don't let HTML stand in your way.

If you understand folders (a.k.a. "directories"), then you can do images. Your images can reside just about anywhere within your site. If you put all the images together in their own folder (which is a good practice), then when you put the image path in RLM, you include the folder name.

For example, your index.html file appears in the root of your web site. You might also have an image folder (called img) there as well. Therefore, you put your images in the img folder.

When you are working on the index page in RLM, for the image path, you would use:
img/imagename.jpg
That's because the image (imagename.jpg) is in the images folder (img). So you tell the web page how to find it by giving the directions to get there. Here is what the web page sees when it reads img/imagename.jpg

The slash separates the folder and filenames, so this one has two parts.
img - look in the images folder
imagename.jpg - and get this image

So which folder should images be put in?
The folders help keep things organized. You can use the existing img folder you have, or you might make one of your own. You might choose:

mycrazypictures/imagename.jpg
or iwearbluejeans/imagename.jpg
or imagefolder/imagename.jpg

Most people that I know just use images or img for the folder name. It really doesn't matter what folder you create. Just make sure you get the name of the folder spelled right when you put it in RLM.

Oh, one last thing. Be sure to use lowercase letters for your image file names and your folder names. Also, never use spaces in the file names or folder names. These two practices will save you a lot of headaches down the line.

You may already know all this, but I thought it wouldn't hurt to reply with it just in case others might need the info.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2592569 Photo


Registered User
17 posts

Thanks for the help -- I have a folder named img that is in the folder that contains all of the folders developed during export. When I preview the site, however, the picture is not shown. When I use the Inspect Element feature the address is correct. I am assuming that putting the img folder in the export folder is the correct location.
User 10077 Photo


Senior Advisor
1,096 posts

Do you have a web site address where we can take a look at it?
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 38401 Photo


Senior Advisor
10,951 posts

When you export your files you need to remove them from the export folder that has the name "_exported" in it. What you want to upload is the files and folders that are inside that export folder.

This will clear up any image issues you're having as it sounds like you're keeping the files within the exported folder and that is one folder deeper than you need to be. Just upload what's inside that folder and that should fix your issue up with images not showing. :)

You can just put them all in the "img" folder that the RLM creates. I tend not to do that mostly so I don't accidentally delete all my own images when I'm deleting the RLM files and replacing them, that's mainly why I create my own "images" folder. I also create my own so I can delete the default place holder images that RLM creates easier when I'm done.

I also tend to organize my images to a small degree so that they are easier to find for things I know I will be altering regularly or for things I want to be sure I can find easier such as creating folders for:

logo
products
clients

and whatever else you may need to create to keep them easier for you to locate as you use them or to replace them easier later. You can put as many folders deep as you need for organizing, just like you do on your computer.

Just reference the correct folder when you're doing this as those folders would be "inside" your images folder so what I have is:

images/logo/logo.png
images/products/product1.png

and so on for the file locations needed to point to your images.

You can do this with anything, not just images so if you have a folder you need to put downloadable things in you can create a folder in your root directory named "downloads" and then inside there put other folders to organize them if needed, and so on.

Hope that helps :)

User 2592569 Photo


Registered User
17 posts

Thanks again for the help.

I do not have a website using RLM -- I have been previewing on different Browsers. The website I am attempting to convert is horseshelpingheroesproject.com. Teenagers that look at the site tell me it is way out of date. They have not offered to help jazz it up. I developed this as my first attempt at a website using VSD which I found very intuitive. Most of RLM is intuitive as well except for linking in stuff.

I am obviously not following what you are telling me. No matter where I put the image -- it is a JPEG -- and use the full address for the image, RLM does not find it and does not develop an img folder when exporting. For grins I added an image link with no export file identified and RLM created an img folder and put a dummy SVG file in it. However, the alternate default "IMAGE LINK" appeared. Depending on the browser I use to preview the website I get an X in a box (internet explorer) or the default "Image" (Firefox) for the image element.

I have pretty much figured out the rest of the elements to develop my home page but without getting images I can't finish it. I also have a slide show and video to add to this page later and six more pages. Hopefully that will be easier.

Larry
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Larry,

Do you have a link to the site uploaded? Would be easier for us to determine what the issue is if we can actually see it. I'm still thinking the paths are incorrect, and that you just need to put the images into the correct location and upload the folder, or put the correct location into the path in RLM. Let us see what you have and we can give you a better idea of what might be going on there.
User 2592569 Photo


Registered User
17 posts

I thought I had sent a copy of the RLM file I have been working a few days ago but apparently did not. I have finally figured out how to get images linked but I have to do it manually. When I put in an image export link in the Image Element "design", I still do not get an "img" folder in the exported folder. In the HTML I get a reference to the file name I put in the Element design data, i.e., img/logo, but RLM doesn't generate the img folder although the manual and tutorials say it will. If I have to regenerate a new img folder every time I update the site (because a new export folder is generated and I am assuming that the image folder needs to be in that folder) it will be very time consuming. I am clearly still not following all that you have been trying to help me with.

Does Coffee Cup offer design services using RLM? I suspect that some of the additional items I will need to do to complete this site -- add pages, slide shows, videos, etc. -- will be much more complicated than image linking (which should be trivial). If CC does offer these services it may be more productive for me to purchase this service rather than taking your time and I should learn much faster.

Again thanks for your help
User 10077 Photo


Senior Advisor
1,096 posts

Laurence, email me at support@usconsumernet.org and let me see what I can do for you.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2747726 Photo


Registered User
27 posts

I'll go out on a limb here but I can relate to your problem and I think I understand where you're getting hung up. As a business owner, we tend to try and cut to the chase and ignore the minutia, but sometimes we miss a few fundamental tidbits of knowledge critical to the big picture.

For example, you're saying to yourself: How do I get the actual image to behave(and display) like the blank grey images in RLM? (btw, I recommend you add the actual images AFTER you export rlm into your page editor.)

But, if that's the kind of stuff you're struggling with, you're just probably needing a little coaching on where to place the html code specific for those images, slideshows, video links, etc. Am I off?


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.