New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image as a link #2150

Open
veramartins opened this Issue Sep 8, 2016 · 8 comments

Comments

5 participants
@veramartins

veramartins commented Sep 8, 2016

With asset folders, how can we do something like this, using the tag plugins:
<a href="http://www.example.com"> <img src="image.jpg"> </a>

Here's an example that works in most markdown editors, but not in hexo:

This code here: [![Foo](http://www.google.com.au/images/nav_logo7.png)](http://google.com.au/)

Renders this:
Alt_name

@veramartins

This comment has been minimized.

Show comment
Hide comment
@veramartins

veramartins Sep 14, 2016

I've been looking for a solution to this, but I can't hack it on my own. This is standard markdown and babelmark shows that almost every flavor of markdown does it well.

Is there any way I can help with this? I can kinda read the source code for hexo, but I'm not really sure what to change.

veramartins commented Sep 14, 2016

I've been looking for a solution to this, but I can't hack it on my own. This is standard markdown and babelmark shows that almost every flavor of markdown does it well.

Is there any way I can help with this? I can kinda read the source code for hexo, but I'm not really sure what to change.

@menehune23

This comment has been minimized.

Show comment
Hide comment
@menehune23

menehune23 Dec 31, 2016

Thankfully I found this workaround: https://alexdrenea.com/2016/04/28/hexo-image-hacking/

Though this REALLY needs to be addressed. It's a basic feature that should be supported, especially in pure markdown.

menehune23 commented Dec 31, 2016

Thankfully I found this workaround: https://alexdrenea.com/2016/04/28/hexo-image-hacking/

Though this REALLY needs to be addressed. It's a basic feature that should be supported, especially in pure markdown.

@veramartins

This comment has been minimized.

Show comment
Hide comment
@veramartins

veramartins Feb 11, 2017

Thanks, the workaround kinda works, but everything has to be defined in HTML, so it defeats the purpose of Hexo. The page you mentioned does point to where the error might lie:

$(this).find('img').each(function(){
	if ($(this).parent().hasClass('fancybox')) {

So it looks that for every img tag that does not have a “fancybox” parent, this script will add a wrapper to make it fancybox. I tried disabling the fancybox from the theme but this script is still there.

Can we get some help here?

veramartins commented Feb 11, 2017

Thanks, the workaround kinda works, but everything has to be defined in HTML, so it defeats the purpose of Hexo. The page you mentioned does point to where the error might lie:

$(this).find('img').each(function(){
	if ($(this).parent().hasClass('fancybox')) {

So it looks that for every img tag that does not have a “fancybox” parent, this script will add a wrapper to make it fancybox. I tried disabling the fancybox from the theme but this script is still there.

Can we get some help here?

@menehune23

This comment has been minimized.

Show comment
Hide comment
@menehune23

menehune23 Feb 11, 2017

I ended up doing a small bit of custom js:

// Add 'image-link' class to all <a> tags surrounding <img> tags
$('img').parents('a').addClass('image-link');

And the css:

.image-link {
    display: table
    margin: auto
}

.image-link img {
    display: table-cell
}

My selector is actually more descriptive than just 'img' but you can adjust to whatever you need.

This allows [![](path/to/image.png)](path/to/link)

menehune23 commented Feb 11, 2017

I ended up doing a small bit of custom js:

// Add 'image-link' class to all <a> tags surrounding <img> tags
$('img').parents('a').addClass('image-link');

And the css:

.image-link {
    display: table
    margin: auto
}

.image-link img {
    display: table-cell
}

My selector is actually more descriptive than just 'img' but you can adjust to whatever you need.

This allows [![](path/to/image.png)](path/to/link)

@veramartins

This comment has been minimized.

Show comment
Hide comment
@veramartins

veramartins Feb 11, 2017

I bet this issue is felt by more people (hence the ugly fixes). This really needs to be baked into hexo. Having that said, can you help me with your code? I would love to use this temporary fix, but I'm a total newb and don't know where to put it.

veramartins commented Feb 11, 2017

I bet this issue is felt by more people (hence the ugly fixes). This really needs to be baked into hexo. Having that said, can you help me with your code? I would love to use this temporary fix, but I'm a total newb and don't know where to put it.

@menehune23

This comment has been minimized.

Show comment
Hide comment
@menehune23

menehune23 Feb 11, 2017

I've got a custom theme and have it in a JavaScript file that my theme loads. But the simplest solution might be to edit one of the existing theme templates (like layout.ejs) and put it in a script tag there. (Don't forget to wrap the code in a $(document).ready() call, which is typical for jquery)

menehune23 commented Feb 11, 2017

I've got a custom theme and have it in a JavaScript file that my theme loads. But the simplest solution might be to edit one of the existing theme templates (like layout.ejs) and put it in a script tag there. (Don't forget to wrap the code in a $(document).ready() call, which is typical for jquery)

@seaoak

This comment has been minimized.

Show comment
Hide comment
@seaoak

seaoak Feb 13, 2017

Member

@veramartins If you use the theme "landscape" (the default theme of Hexo), you can quickly fix this issue by removing lines L88-L107 from your themes/landscape/source/js/script.js
https://github.com/hexojs/hexo-theme-landscape/blob/master/source/js/script.js#L88-L107

Member

seaoak commented Feb 13, 2017

@veramartins If you use the theme "landscape" (the default theme of Hexo), you can quickly fix this issue by removing lines L88-L107 from your themes/landscape/source/js/script.js
https://github.com/hexojs/hexo-theme-landscape/blob/master/source/js/script.js#L88-L107

@jeffheaton

This comment has been minimized.

Show comment
Hide comment
@jeffheaton

jeffheaton Jul 11, 2017

Agreed this totally needs to be fixed. Many of the hacks above do not work anymore, still trying to find the best hack for my situation.

jeffheaton commented Jul 11, 2017

Agreed this totally needs to be fixed. Many of the hacks above do not work anymore, still trying to find the best hack for my situation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment