How to reference images that have been imported

I've added my menu using a Custom Code box, and in that code I am adding a couple images. Right now it seems the only way I can reference those images is to put the Absolute path in it which isn't what I want to end up having to do if I don't have to. Is there a way to reference the imported items directly? If not can we get something added for this so we can utilize what we're importing in manual items? I've tried various ways to write the path to reference them after export, but it just doesn't seem to work. Any assistance here would be appreciated. Thanks!

Once you convert to HTML or directly use the Custom Code feature, you can't then use drag and drop into that Custom Code so you won't be able to drag an image into it.

So the only way you will be able to reference an image is to type in the image path.

Images that are directly in the Images section of the Design pane can be referenced as

  • src="image_name.jpg" < only use if the image exists in the same directory as the page that calls it
  • src="/image_name.jpg" < better to use so any page can use regardless of page directory path

Images that are in a folder in the Images section of the Design pane can be referenced as

  • src="/[folder name]/image_name.jpg"

Images that are in multi folders in the Images section of the Design pane can be referenced as

  • src="/[folder name]/[folder name]/image_name.jpg"

So the best idea is that you should align your BSS app Images folder(s) with that of your export, so you won't need to change your HTML when you export.

Saj

Thanks, I was afraid that was the answer Saj, but at least I know now lol.

How are you writing your code for images?

I guess I'm not really understanding what your trying to do and what you want to do based on the Tip that you did a write-up with.

Saj

Looking at your source code, I'm seeing assets/img/logo/.....

Here is what I have to do, because I can't use the assets folder, so I have to edit post export my HTML.

I reference my images as I need them in the app setting my images directory path appropriately to what I do with my export. Export. Then I use Notetab ++ to find and replace src="assets/img to src="/img. I then have to copy the images from the assets/img folder to the appropriate server folder for /img.

So my HTML always looks like src="/img/image-name.jpg" whether it's in the app or exported. I have to do this on every export but only the HTML change unless I also make image changes. Also on any other assets such as css etc... I would need to do this.

So based on your source code it seems like it's pretty straight forward for you. In your app you would have your Images set up as /img/logo/image-name.jpg etc... and you'd then export and copy the assets folder (if you need to do that at all). Because the app exports everything into the assets folder and writes to your HTML with that included in the image/css/js calls.

Saj

When you export isn't it creating all your CSS, Images, JS and Bootstrap folders in an asset's folder? When I export it I get all my html files in the root directory and a folder named assets. Inside the assets folder are folders for: bootstrap css img js

So to reference an image when I'm working with a Custom Code box, I just reference it exactly as I showed in the Tips and Tricks post. Then on export I don't have to do any adjusting of the code to fix the images.

Now keep in mind I'm on Mac version, so if you're not getting an assets folder, or if you're moving things out of it that would be different and you'd have to edit your links in the html pages to adjust the paths. Also keep in mind that this is "only" when working with custom code boxes. Images placed with the drag/drop in the app itself I don't have to ever edit anything for the paths to be correct on export.

I had those 2 facebook icons that I had to work around this with because my menu is within a custom code box. This means I can't see the images in the app or preview unless I reference an absolute url. So I uploaded them to the server that they will be on in the end since they had to be there anyways, and I used that url to work with my menu until I got everything place where I wanted it, then I changed the facebook image paths to the relative path that references it using the:

assets/img/facebook...png

Then on export they are already there, no need to edit the pages after exporting which is what I'm trying very very hard to not have to do that so it's not a lot of tedious stuff and I can edit the site using BSS rather than having to do it in DW.

I do get an assets folder but it's not useful to me because the way our webserver is setup is that things like the images aren't even located in the same folder that the layout it's self is. It uses symbolic linking and such to represent to the client a working site. So everything ending up in the assets all needs to be more to where my webserver expects it when I export.

My custom code boxes seem to work fine with relative paths I currently have my entire main navbar as custom code because I have a lot of links that I wasn't going to do by drag and drop. So the branded image is as this < img id="hp_pic_logo_img" class="img-responsive" src="/img/7044.gif" alt=""> and it shows fine in the app and as a preview.

I just had to have the image imported into the app in an img folder. I just made the folder img then moved the image into it and updated the custom code to add /img before the image name.

Now I don't know (but I kind of doubt) that me being on Windows would actually have anything to do with that because it's a reference in the app it's self an not my local system until I export anyways.

The app uses relative paths when you drag and drop so you should be able to then also use relative paths in custom code. For the most part you shouldn't need to use absolute paths unless you are pull images from an outside source such as another website. I personally do think that the app should be writing it's drag/dropped file references with a preceeding "/" though.

I would be glad to take a look your code if you think something is a miss as to why relative linking isn't working for you...

Saj

Hmm going to try this now, but I have a question on how you have it set up. If you create an "img" folder in the app, that will then export it to:

assets/img/img/imagename.jpg

How does that allow it to then show up in the uploaded website if it's referencing:

img/imagename.jpg

?

Doesn't make any sense to me, seems that it would have to be:

../../img/imagename.jpg

And then it wouldn't show up in the app or preview, but should show up in the site when uploaded. If I'm getting my head around this correctly that is lol.

I created category folders in my app to put specific images in specific areas so they are more easily found. The way you are explaining it, I "should" be able to reference them as:

category-folder/imagename.jpg

And it should work... going to try it right now, hang tight! haha.

Ok you are right that they do show up in the app if I put the folder name and then the image name. That does help a lot actually, but....

If I leave it this way, it is definitely not going to show up in the website when uploaded, because that's not the correct location of the image on export. That does give me an idea that would probably be faster and easier than editing the code after export though. I think what I'll do is create a folder on the server for images that are within the Custom Code boxes. Not as if it's going to matter to anyone but me where they reside and as long as I know why there's 2 image folders that's all that counts right?

This would allow them to work both in app/preview and when exported and uploaded. That make more sense maybe? Makes more sense to me than having to edit every page of a website that has the same image on it (header, footer, etc.). Move the images after export instead of editing code. I like that idea! I can create a folder in the app even just for that and all I'll have to do is move that folder to the image folder I create in the root directory. Sounds much more feasible to me. Quick fix, even though it could still use some love on this issue I think so we don't have to find work arounds for it, it's a simple work around.

So here's my plan:

I'm creating a folder in the app called "custom-code-img", then moving the images to that folder that are only in custom code boxes, moving the "custom-code-img" folder to the root directory on export. Done!

That should work fine for me, and I bet it would work much easier for you too rather than having to edit the code after export. I don't pretend to understand at all what you're talking about with your server and how it links to your images (no don't explain it, it's probably over my head anyways haha), but this might work for you too?

I have a feeling you are over thinking this :) and I think that has to do with my use of the folder /img I should have used something else it was just meant as an example and not literal.

By default the app takes into consideration the Design pane's Images section as the folder /img in assets. So I took a better look at what is really going on there.

Since the app actually exports as assets/img/...

If in the app you drag and drop your FB image from /social to the body element then select the image in Overview pane and bring up the HTML pane it tells you the exact src url to reference, even if you are to use that image in your custom code.

It would read like this src="social/social_facebook_box_blue_48.png"

Your export will read as src="assets/img/social/social_facebook_box_blue_48.png", the app prepended assets/img/ to the src url. I just tried this as an example to really see what happens for myself.

So in short there is no difference between drag/dropped image src url and custom code image src url. Just add your logos and social folders etc.. to the Images section of the Design pane and move the images to the appropriate folder and then reference your images as (regardless of custom code or not):

  • src="social/social_facebook_box_blue_48.png"
  • src="logos/pcusa-logo-trans-150x200.png"

I hope that clears this up for you.

Saj

Wow, I just tested that and you're completely right, I was very much overthinking it lol. I totally didn't understand that it added the assets/folder to the path of items within the Custom Code box as well as other areas, but I definitely see that now and am so glad I asked this question! Thanks much for sticking with this old lady till she saw the light haha. I truly appreciate your help on this and so many other things. :)