I can’t seem to figure out how to upload an image and then make it a hyper link. I have my own product images I want to link back to amazon. But I’d rather not use their shitty markup from their site stripe.
1 Like
You can drag and drop an image into the editor, copy the newly created image path and then copy that to add it to text as a link. The image will remain at that path after you’ve deleted it from the page content.
If you’re wanting to make an image be clickable to a page then you’ll need to use the markdown or html card:
With markdown:
[](https://websiteaddress.com)
With HTML:
<a href="https://websiteaddress.com"><img src="/path/to/image.jpg" alt="My image"></a>
The image is a data url when I upload it.
A data url? As in when you upload the image to Ghost it turns into a data url, or that you have it as a data url and you want to upload that?
The data url will only appear when first uploading an image, the editor uses them to show the preview whilst uploading and continues to use it for display after upload to avoid flashing of content. You can either refresh, or exit the editor and re-enter it to see the URL.
However, if you are using the markdown card as it sounds like you are then you can drop images onto the markdown card to upload+insert the markdown img markup automatically so won’t need to deal with data urls.
3 Likes
There is no super easy way to do that unfortunately, but as DavidDarnes said, there is 2 workarounds you can use:
Here is the step by step detailed for people still struggling:
Method A : Markdown only :
1 - open a Markdown section,
2 - drag and drop your image in there,
3 - it’s going to create a Markdown image looking like this:
4 – wrap this in square brackets:
[]
5 – add the link at the end wrapped in parenthesis:
[](my_link)
6 – stop editing the Markdown section by clicking outside of it
Method B : Markdown and HTML:
1 - open a markdown section,
2 - drag and drop your image in there,
3 - it’s going to create something looking like this:
4 – copy the image_link part of it
5 - remove the markdown section
6 – create an HTML section
7 – paste your image link, and wrap it in an html anchor tag:
<a href="my_link"><img src="image_url"/></a>
8 – stop editing the HTML section by clicking outside of it
Note : external links should start with http:// , while internal links should start with / , and be stripped of http://mydomain.com
Example of internal link : /tag/article
Example of external link : http://google.com
PS : For better UX, It would be really nice to be able to set links on images directly from the “normal” interface, like you can already do it with image caption and alt attributes. Advance thanks ;-)
Thanks a ton for this @Kevin. It looks like this is limited to adding just the URL/link address.
Is there any way to override the generated class= or the target= or the rel= ?
@denvergeeks Yes, injecting a class into image cards would be rather interesting, allowing one to float images (and even set their max-width), restrict the height of portrait images, add borders to images with white backgrounds on themes with white backgrounds, etc.