I do this in Chrome by adding the image and then selecting all of it by dragging my cursor across it (until it all goes blue or whatever colour) and then making the hyperlink.
Thanks Mary, I've tried that but it appears to put in a text link. Also if I don't tick "Open in a new window" nothing is added.
Just tried this method on the Mount Orange Demo site and it works OK. Must be something up with our Moodle deployment. I'll check the logs.
A member of staff discovered old images (before Atto) will allow a link to be applied OK. Newly uploaded ones will not.
It appears that Atto adds a few more parameters to an image insert, but I can't see why this would effect the link function.
TinyMCE
<p>
<img src="https://example.com/imagepath.png" width="850" height="288">
</p>
Atto
<p>
<img src="https://example.com/imagepath.png" alt="Logo" width="850" height="288" style="vertical-align:text-bottom; margin: 0 .5em;" class="img-responsive">
</p>
Testing with a newly uploaded image....
(That was me testing on this forum) I am sorry I can't advise more with your own organisation set up -perhaps someone more familiar with Atto will have an idea.
When I uncheck Auto size, linking works OK.
Cheers,
Nathan.
Elegance depends on bootstrap and is a reactive theme. Maybe the reactive code in the theme is handicapping the link tool. Does image size seem to make a difference? Are small images having the problem?
Hi Daniel,
Yes small images affected too. I've tried updating Bootstrap 3 and Elegance to the latest version, but no luck.
Cheers,
Nathan.
Just came across this issue. Spent a frustrating afternoon with it sometimes working and sometimes not within the 'clean' theme. Seems you can't resize and image then add a link.
This worked for me in the atto editor:
Inset image at original size with no 'auto' size selection
Highlight and add link and save.
Test link works
Re-enter editor and resize
The link should then still work.
phew...
I've discovered disabling Auto size enables Mary's solution to work with our setup.
1) Double click the image and un-tick the Auto size option. Click the Save Image button.
2) Left click and drag over the image to hi-light.
3) Click the add link button, enter the URL and click the Create Link button.
I stumbled upon this issue too when working on a Bootstrap (3) child theme. The solution was to change a CSS value for the img-responsive class.
The exact value that breaks this for img-responsive in bootstrap 3 is:
.img-responsive {
display: block;
....
}
when I add
.editor_atto_content .img-responsive {
display: inline-block;
}
It all works again.
In bootstrapbase .img-responsive was copied into bootstrap core less files in this commit, but the display:block value was left out.
Thanks to this thread and the work of Simon Lewis I was able to add a quickfix for this.
I guess the real issue is something weird with atto's image editor JavaScript in:
lib/editors/atto/plugins/image/yui/src/button/js/button.js
But I have not been able to track down the issue there.