Image in webform

Request Type: 
General Assistance
Forums: 
Managing and Creating Content
Author: 
Kristen McDonald
Issue/Request: 

Hello, 

I am trying to get this image (http://www.library.yale.edu/walpole/images/exhibits/Ed%20Koren%20cartoon…) to show up in my webform but it doesn’t seem to be working. 

Thanks!

Kristen

Carris Toupin on October 3, 2016:

Hi Kristen;

I took a quick look at the form you mention above. It looks like the picture is there. Did you solve the issue or do you still need some help? Let me know if you want me to help with the form.

Best Regards,

Carris

Kristen McDonald on October 3, 2016:

Hi Carris, 

I did figure it out but I’m not really sure how. I copy and pasted the information for an image from another webform (Bond Street image) to compare it to the one in the Ed Koren web form and that made the Ed Koren image appear. If I delete the “Bond Street” image text, the Ed Koren image disappears. 

Can you take a look and let me know what happened? I think it would be helpful info to have for the future. 

Thanks, 

Kristen

Zachary Schwartz on October 4, 2016:

Hi Kristen,

I figured out how you got the picture there, and I’m going to explain that here. But I think the way you did it was making things unnecessarily difficult for yourself! I’ll explain:

How you did it was using HTML markup in the “markup” field on your form, to insert an image into the form itself. You had to manually insert the HTML markup because you didn’t have a text editor for that field. Which made things difficult because you didn’t know exactly what to change in the HTML to make things look exactly how you wanted! Which is why you weren’t sure how to delete the markup for the other image without deleting the image you were trying to insert.

There’s a much easier way to accomplish this, and I went ahead and put it into effect on your site. Instead of using the markup section within the form, I used a block and put the desired content in that.

Here’s how I did it:

go to Structure>>Blocks>>Add Block. Using the “Image” button in the “Block Body” text editor, I clicked the “Upload” option and uploaded the desired image. I resized it slightly (make sure the padlock button is in the “closed” position, which keeps the image height and width proportionate) and inserted it into the block. I also copied the text from the form’s header into this block.

Under “Region Settings”, I changed the drop-down menu from “none” to “content” for every theme listed except “Seven”. Then, under “Show block on specific pages” I selected the option “only the listed pages”. In the provided text field, I wrote the page location (you can use the complete url path, but it’s better to use the page’s node. You can see the node number when you mouse over the “edit” button on the page. In this case, it was “node/137”.)

Save the block configuration, and it should take you to the Blocks page. Your block will be in the “Content” section, at the bottom of that section. Click and drag the crossed arrows icon on the left, and drag the block above “Body content”, which in this case will be the webform you created. This will make the block appear above it on the page, and appear the way it now appears on the page.

I hope these instructions were easy to follow, but I’d be happy to help if you need additional assistance!

Best,

Zach