How can I write markdown text for an image with a link. I would like a image, if I touch or click the image, the slide should switch to the link target. Is this possible?
Hermann12
All 16 comments
You'd can just use HTML here. I added a CSS class to the header & then did something like this. Works fine:
/* Adding full width images */
.full-image-slide {
max-width: 100%;
height: auto;
}
<img src="images/Ontario-Organ-Donor.png" class="full-image-slide">
mgifford
on 17 Dec 2017
tripu
on 18 Dec 2017
Nice @tripu can you add css classes too? Nice about the alt text!
mgifford
on 18 Dec 2017
Nice @tripu can you add css classes too? Nice about the alt text!
I'd like it to follow the CSSrules I outlined so that it looks like a slide.
Furthermore, the image comes up, but I also see the "[" "]" on either side.
Any ideas on what's up?
mgifford
on 18 Dec 2017
@mgifford, you should be able to apply classes to it by enclosing between .CLASS_NAME[ and ]:
.full-image-slide[[](LINK_URL)]
About that error, please share your full example to debug that. (Codepen is a great place to do that.)
tripu
on 18 Dec 2017
I'm trying that, but get this:
<span class="full-image-slide">[<img src="images/Woman-Speaker.jpg" alt="Woman Speaking">]</span>
The brackets show up when there is no link for the image.
This is the CSS I used to pull the image out appropriately.
/* Adding full width images */
.full-image-slide {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
span.full-image-slide img {
width:100%;
display: block;
margin-top: auto;
margin-bottom: auto
}
@mgifford, try with the class declaration and the image+hyperlink in separate lines; see an example in Codepen.
tripu
on 18 Dec 2017
Ok, now remove the (https://github.com/gnab/remark/issues/473) and you'll see the braces []
mgifford
on 18 Dec 2017
Of course.
That URL between the parentheses is part of the construct [ELEMENT](LINK_URL). You can't simply remove the latter. If you don't need the link, just leave ELEMENT (whatever that be), without brackets or parentheses.
tripu
on 18 Dec 2017
(The issue was about an image working as an anchor for a link.)
tripu
on 18 Dec 2017
Right... This is a good point. I was just scanning for image information. So this works:
.foo[
[](#)
]
But what if you don't want it to be a link? Any way to do this without the link?
Or to the likely point of the question, is there an easy way to always just advance to the next slide (so it works like the left/right arrows)
.foo[
[](NEXT)
]
I don't understand this issue any longer.
An image working as a hyperlink, “without the link”, is… an image.
@Hermann12's question was about having an image as a hyperlink; I think that has been answered already.
Please refer to the Remark's wiki and Markdown syntax itself for generic questions like these.
tripu
on 18 Dec 2017
Ok, I think we can close this down. I do appreciate the polite RTFM note, often it's good reminder. Thanks.
This (and the CSS above) is what I needed:
.full-image-slide[]
.full-image-slide[[](http://ottawacivictech.ca/)]
Thanks! I tryed it, but unfortunately, it doesn't work.
The idea looks nice :
[]
The goal was for me, less work with formating the document or css, focusing on the content. But After some tests, I think with remark a lot of css and html formating is necessary.
Hermann12
on 2 Jan 2018
@Hermann12:
Please paste your Remark code as a fenced code block (ie, enclosed by ``` and ```, on separate lines). Otherwise, Markdown rendering here on GitHub obscures it.
And it does work. Markdown (and thus, Remark) are capable of rendering an “image with link” (that's the title of this issue). I suspect you should either close this issue, or be clearer in explaining what you need.
tripu
on 4 Jan 2018
Closing this after almost a year of inactivity :)
abelards
on 18 Dec 2019
Related issues
amueller
路
7Comments
anaderi
路
5Comments
utdrmac
路
6Comments
dvberkel
路
5Comments
benjie
路
4Comments
Most helpful comment
@Hermann12:
See the wiki.