Linking html code via a graphic to a third party website

RapidWeaver Classic General
1

Hi guys,
My website has products for sale and I want to add a jpg graphic (buy now) as a button for shoppers. The button needs to be linked to my merchant provider using their html code (which they have provided already) to automatically direct my customers to their third party shopping cart system on their site. I’m unsure how to proceed with this. Because i can’t find a way to select the image and link code. Unlike text can be linked to code. Im using stacks and serenade theme.

So basically i need to know how to link a graphic on my website page to an external third party website page using html code.

Any suggestions appreciated. Thanks!

2

I have the same problem - but no-one here seems to have provided an answer!

I would happily buy a Button stack that let me paste my graphic into the button, but cannot find any such stacks for sale - have spent hours searching so this is a real frustration

3

Here’s the basic code:

<a href="fullURL"><img src="fullURL"></a>

This works perfectly if you have warehoused your images. Should work in any stack, but definitely with HTML or Markdown stacks.

BTW if you have questions about basic code (i.e. not RW specific) then Google is a great way to find quick answers.

2 Likes
4

Thanks for taking the time to respond, but you are over my head. Natasha asked HOW to link graphics to html and I am just as much in the dark.

I would expect that, having selected the graphic, there would be somewhere into which I could paste your code?

Many thanks

5

OK, here is an easy way to use that code above. Since you (@fairbalance) are using stacks (not sure where @nat is wanting this, but if you are using stacks, follow along).

  1. Add an HTML stack to the page.

  2. Take the code:
    <a href="fullURL"><img src="fullURL"></a>
    and paste it into the HTML stack. The first fullURL will be where you want the button to take the person, so you should have a URL, like http://www.apple.com. The second fullURL is for the place where the image is, since no stack allows you to drag and drop an image, HTML will not, so you will need to host the image somewhere. Your server where your website is hosted is a good place. I usually put my images in a folder called assets or warehouse and then put them in another folder called images, so I can keep my images and other things like videos or PDFs or other files separate. That way the URL is something like this http://www.mydomain.com/assets/image-1.jpg

Now preview the page and your image should now take you to a new place.

Hope that helps a little.

1 Like
6

You could also look at stacks4stacks graphicstack.
https://stacks4stacks.com/graphicstack/

Its free will work with most any image type, you can use stored images or drap and drop, and set a link.

1 Like
7

@teefers I think the GraphicStack only works with SVGs. (Not 100% positive, but the text at website seems to indicate that.) But an alternative free option from the same developer is LinkBox:
https://stacks4stacks.com/linkbox/

BTW Will is a great developer and runs Stacks4Stacks. He has many wonderful stacks, a number of which are free. Definitely worth checking out:
https://stacks4stacks.com

Clearly @zeebe did a better job explaining the coding approach I use! :slight_smile:

Especially important is how he describes creating a folder for all his “stuff” on his hosting site. You can FTP up to the website using Cpanel (comes with most hosting plans), Cyberduck (free), and there are many other great options that cost some money.

2 Likes
8

The graphic stack will work with most image formats:

Why did we not call this the ‘SVG Stack’ or similar? Simply because alongside of its primary role in supporting SVG files, the GraphicStack is also perfect for conventional image files; like JPG, PNG and GIF graphics. It’s one stack that can handle the embedding of nearly all your images!

1 Like
9

GraphicStack can support other image formats alongside SVG. It is just using regular HTML image tags to embed the images:
https://stacks4stacks.com/graphicstack/

1 Like
10

Well there you go! Will has provided multiple nice solutions (GraphicStack and LinkBox) that can help folks.

11

Thank you - makes perfect sense and even I (as an amateur) was able to upload the logo via 1&1 and create the links.

12

Thanks again - I got to the GraphicStack post later and tried that. It is what I had really been searching for.

A point is that Rapidweaver + Stacks enables people like me to look clever without knowing any coding. I have used RW for a while but only got turned on to Stacks in the last month - transformative!

Thank you to the community for your kind help to a humble accountant