Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding an image to a form


InstantMonsters

Question

Site URL: http://www.instantmonsters.com

On my website I offer the option of pre-painting the prosthetics that customers order. When they add an item to the cart, a form pops up with color choices. Originally I had linked an image from an outside source since I couldn't figure out how to do it within Squarespace. It worked fine for a long while, but now I'm finding that image doesn't display.

Here's the original text I inputted to the form:

Quote

 

If ordering a pre-painted prosthetic, please enter the skin tone you would like from the following options. All other highlights, shadows and detail work will be based on the skin tone chosen.

If ordering an unpainted prosthetic, leave this field blank.

<img src="http://www.chrispaynemakeup.com/colors-1.jpg">

 

It used to display the image just fine, but now it just shows a broken image icon (see attached screenshot). 

How can I fix this? Squarespace offered no help other than a link to this forum. If I have to I can add the same color sample jpg to each product's photo gallery, but I'd rather not have to go that route. Every time I add a new color I'd have to update every item I have in stock.

Screen Shot 2021-02-27 at 9.41.36 AM.png

colors-1.jpg

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom

Add to Design > Custom CSS /* Beaky lightbox img */ body#item-5f4db8566c67441473286aeb .lightbox-inner .description:after { content: ""; background-image: url(https://cdn.pixabay.com/ph

Posted Images

9 answers to this question

Recommended Posts

  • 0
On 3/2/2021 at 7:35 PM, InstantMonsters said:

Almost all of the products use the same form, but the one in the screenshot is here: https://www.instantmonsters.com/shop/p/beaky

Add to Design > Custom CSS

/* Beaky lightbox img */
body#item-5f4db8566c67441473286aeb .lightbox-inner .description:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    display: block;
}

image.thumb.png.e125d58fe8c806d0465c737a1762a2e9.png

Link to post
  • 0

Thank you for this! I'm afraid I'm a luddite with CSS, my web knowledge ends at HTML from the mid-2000s. When I entered the code I got this:

902897556_ScreenShot2021-03-06at8_53_10AM.png.a05728809ed0094c0f0fb63051e89641.png

 

Here is the exact text as it appears in the "manage form fields" for the form, cut and pasted:

 

Quote

If ordering a pre-painted prosthetic, please enter the skin tone you would like from the following options. All other highlights, shadows and detail work will be based on the skin tone chosen.

If ordering an unpainted prosthetic, leave this field blank.

/* Beaky lightbox img */
body#item-5f4db8566c67441473286aeb .lightbox-inner .description:after {
    content: "";
    background-image: url(http://www.chrispaynemakeup.com/colors-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    display: block;
}

I assume I probably have one character out of place or I was meant to change something other than the image URL?

Link to post
  • 0
Posted (edited)

Gotcha, I figured I was doing something dumb. It works now with your image, but when I replace it with the location for the one I want (http://www.chrispaynemakeup.com/colors-1.jpg) it fails to load, just a blank space. 

 

950394077_ScreenShot2021-03-07at12_34_45PM.png.0e2b00bf88c2577b376f32f97c57320d.png

Also is there a way to modify this so that it works across all of the products, or do I need to modify and re-enter the code for each one?

Edited by InstantMonsters
Link to post
  • 0
Posted (edited)

Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required.

Thank you so much for your help!

Screen Shot 2021-03-07 at 12.49.23 PM.png

Edited by InstantMonsters
Link to post
  • 0
5 hours ago, InstantMonsters said:

Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required.

Thank you so much for your help!

Screen Shot 2021-03-07 at 12.49.23 PM.png

You cna upload file here for easier manager

Using the CSS Editor – Squarespace Help

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
13 hours ago, InstantMonsters said:

Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required.

Thank you so much for your help!

Screen Shot 2021-03-07 at 12.49.23 PM.png

I see on mobile footer, between videos - gallery links has a spacing. Do you want to reduce it?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...