Needing some help remembering how to use the modal ID F3

At the beginning of this year I put together a site that makes extensive use of modals. This month I’ve needed to update the image that is in that modal and it seems to be more involved then just replacing the image which is what I tried to do first. If I do that the image only loads locally and no image comes up once the page is online.

To start with it seems like these images need to be stored in the resource folder? So I deleted the old one and placed the new one there.

I’m a bit confused at the way the modal IDs are set up. When I look at the modal trigger in the menu-bar it is “ISO9001” this matches the modal ID of the image which is in the footer as I would expect. There is another link in the main body of that which for some reason has a different ID “ISO9001GoldBadge.”

I was wondering if anyone knows what the reasoning might have been for making a different ID for the same image? Might have that been because the one that is in the partial footer needs a different ID then the modal / ID that is on the homepage?

I’ve attached the file that has the homepage with the modals on it so if I didn’t explain my problem all that well perhaps someone could figure it out by looking at the file.

https://www.dropbox.com/scl/fi/n0n52h64eux7rn2gh8d99/Cascade-ISO-Modal-Button.zip?rlkey=0w38c2g8jtkpe1obr8tk61zfp&dl=0

Hi Kip.

Your modal has the ID of ISO9001. In order to trigger the modal with your image, it also needs to have the same ID.

1 Like

That makes sense why the ID names should match. That is how I understand it from reading the tech notes. What I wonder is before I change the ID from “ISO9001GoldBadge" to “ISO9001” How did the different name get there?

Could have that just been an accident? If it was an accident then why was the modal functioning for six months?! That is why I keep thinking I did that intentionally but I can’t figure that out.

There is also a problem I still have even when the ID matches such in the navigation bar. When ISO9001 is in both places it brings up an image but it is the wrong one (it is the one that was there before.) The image needs to say “Re-Issued: 13-Jul-2024” down in the corner and for some reason I can’t get the old one that doesn’t have that line removed.

Also I was wondering what “use link to trigger modal tool” means? Isn’t an ID different from a link? So it seems like I would not want to click that button?

Screenshot 2024-07-30 at 10.02.54 AM

Screenshot 2024-07-30 at 10.11.07 AM

Both Add Link to Image and Use link to trigger Modal tool need to be checked - just don’t put a link in, and make sure your Unique Modal ID is pointing to the correct Modal, which, as the Field ID suggests, needs to be unique.

CleanShot 2024-07-31 at 11.06.34@2x

You can have multiple triggers launching the same Modal.

As to how your Modal ID got changed… It won’t have changed itself, so you must have changed it, for some reason.

All of this is in the Documentation.

There is something convoluted about interchanging the word “link” with “trigger.” Usually the word “hyperlink” implies going to a different page. We have the word trigger to use with a modal so I wish it didn’t switch back and forth between the two.

I watched the video for modal and I don’t remember an explanation for these things that need to be checked. So here is the question I still have (and I did read the notes and the video) I have this PDF on the homepage twice. Is there any reason for it to be there twice?

One image is in the footer partial. Can I delete the modal that is only on the homepage right next to its trigger and have that trigger connect with the footer too so that I can simplify this process?

It doesn’t “switch back and forth”.

The “Link” tells that tool (Image, Button, whatever) that it’s going to be clickable in the visitor’s browser. If you change the default, and set a link, it’ll override the Modal triggering, so don’t fiddle with this bit. Just check the box.

The “Trigger” tells the tool that you want the “Link” to display a Modal (instead of hyperlinking to another page/anchor), and which Modal to display when it’s clicked.

As mentioned above, Modal IDs have to be unique, so if you have a Modal called iso9001 in the Footer partial, you can’t have another instance of the Modal also called iso9001 on the same page. If the Modal is in the partial, you don’t need a duplicate (or the same Modal with a different name) - all tools that trigger it just need to point to the single Unique Modal ID instance. And, of course, you’d need the partial with the Modal in on every page in your project that you want it to be trigger-able.

So, no, there’s no reason for the PDF to be on the page twice, and you should always be looking not to over-complicate things.

For example, my contact_us form Modal sits in my Footer partial. I can then trigger it on every page, from as many triggers as I need to. One Modal, multiple triggers.

1 Like

Still doesn’t work. It comes up in RW but not when you view in the browser.

https://www.dropbox.com/scl/fi/z6lwl72njp2fiobq6abx1/Cascade-ISO-Modal-Button-August-Version.zip?rlkey=p6etm49n7w189m57lnz9qer82&dl=0

This test project worked fine for me in both RW and the browser (Safari) - I get the whole Modal with the Certificate.

If I go to your actual site (from your original post), the ISO9001 Modal comes up blank, so something you’ve changed in the test version seems to have fixed the problem (for me, at least).

I’d suggest trawling through the master project, to check for what’s different, and then Republish All Files.

I haven’t tried republishing all files yet. I am not sure which differences I would be looking for between the two except I wonder if it is getting confused about having both of the ISO certificates stored on the server.

I tried logging in to the server but wasn’t able to do it for some reason but it seems like it would help to delete the old file maybe? Perhaps I’ll start by republishing all files.

Also one thing to point out, if I haven’t already, the link that goes to the ITAR modal is able to come up. So really I think it is coming down to figuring out what is different between the ISO modal and the ITAR modal. It seems like they are both set up identically now.

It shouldn’t get confused by both ISO certs on the server, as long as they’re both there for a reason, and they’re named differently. If you don’t need two, then get rid of one of them.

The fact that the ITAR Modal is working fine does suggest that perhaps the ISO Modal is struggling to find the ISO cert, for some reason. I’d do a Republish All Files to see if that fixes it - I guess it’s a possibility that something’s gone screwy on the server.

Failing that, I can’t see a blog on the site, so you’re probably OK to FTP in, delete the site, and Republish All Files - obviously at your own risk!

As an aside, wherever possible, you’d be better off using warehoused images on the server, and using remote images. Storing a large number of images in RW Resources isn’t very efficient - it bloats the project file, and slows down publishing. Most FTP apps will have a menu option to Copy URL, so it’s easy to paste the link into Image:Remote, for example.

ISP should be able to help with logging in to the server with an FTP app.

I finally logged into the FTP program that I wasn’t able to do before. I realized one guy switched the URL a few months ago so I needed to update the the URL field with the correct one. Once I got in I deleted the old PDF file that was in the modal to make sure there was a conflict there and republished all files again. The image in the modal still will not show up.

I am trying to think if there are any problems with deleting the whole site on the server and starting over. I still don’t understand why fixing one little modal in Foundry 3 would be this much work. Can you explain why deleting the all the files might solve the problem? Also I keep getting “authentication failed” errors which is further complicating the problem. Maybe I have to ask the host why that keeps happening.

It doesn’t sound like “fixing one little modal in Foundry” in the problem. It is a lot of other things that seem to be your problem. I wouldn’t blame Foundry in this instance, IMHO.

I’ve never had a problem with the modals that are on my Foundry 2 sites. I’m not sure how many things outside of the stack would be the issue. The strange thing is that it is partially working. It will fire up in RW but not the browser, not even locally on the browser.

I don’t know what else to do but they really need to get the certificate updated since it is the kind of thing that people check a lot. Does it work on your end? It has been tried by two people so far without success.

There’s clearly way more to this than just the Modal. Your test file was configured fine. If that’s replicated in your actual project file, then it’s not RW, Stacks, or Foundry.

I think you need to speak to the Host. I doubt this is going to be something that we’re going to be able to fix “remotely”.

Create a new, SIMPLE, one page project file that shows this problem. Share it here.

Here is a simple one page file that has a modal image on it and a navbar with one link in it. Everything works now. It uses the “ISO” ID for both of the links. Now I just need to know how to make it work on the main site.

Simple Modal Test.zip (355.4 KB)

I wanted to get back to this sooner but had a lot to do this month.

Hi @Kip I’ve just tried it and yes it works.
What is the problem when you try it on your production site?

The image doesn’t come up. Try clicking on the ISO 9001 in the navbar and then the gold ISO circle in the center of the page. The modal opens but no image.

Both work for me. What browser are you using? What kind of device: computer, tablet, phone?