Text editors

Add link to an image with Atto

 
Picture of Nathan Friend
Add link to an image with Atto
 

Hello,

How can you add a link to an image in Atto?  In TinyMCE you single click the image to select, then click the image button to set a URL.


As a workaround in Atto we've been adding a href tags in HTML view, but this isn't all that user friendly.


Cheers,


Nathan. 

 
Average of ratings: -
Mary Cooch
Re: Add link to an image with Atto
Documentation writersMoodle Course Creator Certificate holdersMoodle HQParticularly helpful MoodlersTestersTranslators

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.

 
Average of ratings: -
Picture of Nathan Friend
Re: Add link to an image with Atto
 

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.



 
Average of ratings: -
Picture of Nathan Friend
Re: Add link to an image with Atto
 

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.

 
Average of ratings: -
Picture of Nathan Friend
Re: Add link to an image with Atto
 

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>

 
Average of ratings: -
Mary Cooch
Re: Add link to an image with Atto
Documentation writersMoodle Course Creator Certificate holdersMoodle HQParticularly helpful MoodlersTestersTranslators

Testing with a newly uploaded image....

The Scream - Munch

 
Average of ratings: -
Mary Cooch
Re: Add link to an image with Atto
Documentation writersMoodle Course Creator Certificate holdersMoodle HQParticularly helpful MoodlersTestersTranslators

(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.

 
Average of ratings: -
Picture of Daniel Thies
Re: Add link to an image with Atto
Core developersParticularly helpful MoodlersPlugin developersTesters
Is it possible this is a theme problem?  I am not seeing img-resonsive tag in my 2.8 using More.
 
Average of ratings: -
Me!
Re: Add link to an image with Atto
Core developersMoodle HQParticularly helpful MoodlersPlugin developersTesters
img-responsive is a bootstrap class that allows images to scale down on smaller screen sizes - but it requires that the image size a multiple of the natural dimensions of the raw image file. So if you manually set a custom size, we will not add the img-responsive tag. To see what the img-responsive tag does, shrink your browser window so the image does not fit on the page.
 
Average of ratings: Useful (3)
Picture of Nathan Friend
Re: Add link to an image with Atto
 
It does appear to be a theme issue.  Works OK with clean, but not with Elegance 2.7.0.06 (Build: 2014070401)


When I uncheck Auto size, linking works OK.


Cheers,


Nathan.


 
Average of ratings: -
Picture of Daniel Thies
Re: Add link to an image with Atto
Core developersParticularly helpful MoodlersPlugin developersTesters

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?

 
Average of ratings: -
Picture of Nathan Friend
Re: Add link to an image with Atto
 

Hi Daniel,

Yes small images affected too.  I've tried updating Bootstrap 3 and Elegance to the latest version, but no luck.


Cheers,


Nathan.

 
Average of ratings: -
Picture of Mick Mullane
Re: Add link to an image with Atto
 

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...

 
Average of ratings: -
Picture of Nathan Friend
Re: Add link to an image with Atto
 

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.

 
Average of ratings: Useful (1)
Picture of Bas Brands
Re: Add link to an image with Atto
Core developersPlugin developersTesters

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.


 
Average of ratings: -