How can I test bulk image changes without changing field source URLs?

Given: I have a form with 420 png images (depicting 42 spinnaker sail panels in 10 different colors) in the same absolute position.  I have a sail outline with numbered panels in the same absolute position as well.

           Outline of whole spinnaker                                            Panel 1b in aqua (1 of 420 panel images)

Each panel color image is shown conditionally based on the selection taken in 42 dropdowns, one corresponding to each spinnaker panel.  The image fields “source” the png images with a URL to my website host and its images subdirectory. E.g. http://www.madsails.com/images/FS_Spin_1a_Red.png

Objective: I want to increase the size of my images by 50% thereby increasing the whole spinnaker sail image size by 50%. 

Problem: I can take all 420 panel images and increase the size of each by 150%, but how can I test my work?  I don’t want to change the 420 img fields’ source URLs to point to a test images directory and then have to change 420 URLs back when I’m ready to install.  I can’t change the image png files on my host until I’m ready to go into production with all the new images, and I’d like to test before doing so.

Any suggestions? Is there some way to cause the existing img field URL's to get me to a test directory in my local windows 10 environment or at my web host during testing?

My test form: (still shows small spin image)

http://www.madsails.com/Specify_FS_TR_spinTest.html

My live form: 

http://www.madsails.com/Specify_FS_TR_spin.html

Have you tried increasing the image sizes with CSS?

You may try something like this to see if this is compatible with your setup:

img {
width: 150%;
height: 150%;
}

Thanks for the suggestion.  You have saved me a ton of work. So, instead of changing 420 images to be bigger, I can just add the CSS above to increase the size of these images.  That works well given the nature of most of the images on my form.  They each are just one color in a triangular shape.  However, I have a few images that I'd like to recreate myself larger and show them at 100% so they are sharp.  How do I override the above CSS for a specific image?  (e.g. that in #id_204, #id_591, #id_593)

Also, when I add the above CSS, I get a weird blue image at the bottom of my form when editting that I didn't define and that doesn't appear on the form when it's shown on my web page.  It doesn't hurt me, but I'd like to get rid of it if possible.

my form is:

https://www.jotform.com//?formID=63144920345957

Page URL:
http://www.madsails.com/Specify_FS_TR_spinTest.html 

I understand that you want to apply the CSS code to all the img tags except for the specific images. Since you have the field IDs of the images, you may apply the CSS code as shown below:

img:not(#id_204):not(#id_591):not(#id_593) {

width: 150%;

height: 150%;

}

I am not able to find any blue image at the bottom of the form at the moment. Were you able to fix the issue? If I am missing something, please provide us with the screenshot of the issue. 

Let us know if you need any further assistance. We will be happy to assist.  

Thanks for the CSS code to override the img specification.

A screenshot of the mysterious blue image at the bottom of the form during editing appears below.

Please try adding the next CSS:

#stage img {
width: inherit;
height: inherit;
}

The size of the info icon should be fixed with that CSS.

Thank you.

I tried the :not with just one of the 3 fields where I didn't want the size multiplied by 150%, but it didn't work.  I updated the img field 591 to use a larger image file and then added the CSS :not for that field.

I also tried your CSS code to address the info icon, but it didn't work either.  The CSS I added appears below:

img:not(#id_591) {

width: 150%;

height: 150%;

}

#stage img {

width: inherit;

height: inherit;

}

I'm doing this in a clone of the form mentioned earlier.  My cloned form is:

https://www.jotform.com/?formID=63185711888972

I don't not yet have it published. 

Does the following CSS make any difference?

img {
width: 150%;
height: 150%;
}
#id_591 img {
width: 100%;
height: 100%;
}
#stage img {
width: inherit;
height: inherit;
}

Thanks.  Your CSS code works.  

However, I have the same problem with error icons for my 3 required fields that I did with the info icon earlier.  Please let me know the proper CSS code to have these icons inherit their width and height.

Thanks very much!

Hello,

I am currently checking this issue. Please allow me some time to further investigate. I will get back to you as soon as I found a solution.

Regards!

Hello,

  I figured it out myself.  I added the following CSS code and everything worked:

.form-error-message img {
width: inherit;
height: inherit;
}

I'm all set now.

Thank you.

Thank you for waiting and updating us. We're glad you manage to fix the issue.

I actually got the same thing. However, I am targeting the "hidden-field-warning" and not the "form-error-message" selector since it is not an error. Here's the CSS code:

.hidden-field-warning img { 

width: inherit;

height: inherit;

} 

Hope that helps. Let us know if you need further assistance. 

I used the form-error-message because the icon imgs only show when there is indeed an error.  Please let me know if I need to include your CSS as well. 

Thanks.

The CSS code I provided is a fix for the issue where there is a large image in the Form Builder. It is actually the "information" image icon.

If you are still having this issue in the Form Builder, then I would recommend you inserting the CSS code I provided.

Thank you.