Text editors

Struggling with understanding ATTO

 
 
Picture of Alan Cherwinski
Struggling with understanding ATTO
 

Hello,

For teachers designing page content presentations (yes designing is critical) for learners the default ATTO editor appears to be missing many basic features.  For example proportional imagine sizing and tables. Are the missing features going to developed over time or available as additional pluggins?  The Moodle information is very unclear and scarey. Is the current  ATTO release a starting point or firm line in the sand from the less is more at all costs faction.

Alan

 

 
Average of ratings: -
Picture of Alan Cherwinski
Re: Struggling with understanding ATTO
 

This is a typical page created by an instructor using both the table and image size and border settings (video in this case).

 
Average of ratings: -
Mary Cooch
Re: Struggling with understanding ATTO
Group Documentation writersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup TestersGroup Translators

Hello there.  I can't comment on the technicalities of this sorry but I can say that when 2.7 is released there will be full documentation about ATTO (and other new features)

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Tables and image sizing on upload are both still there in Atto - although, I would recommend just setting the image to right align alongside the text rather than using tables for layout and also making sure the image is the correct default size before uploading, because Atto also adds the img-responsive class to it.

The only bit you have used that I can't see on the current Atto is the way you could add borders and css in the image dialogue in TinyMCE - you could of course add them by going into the html (which is also there in Atto) although I understand the preference for having this in the front end of the image upload feature rather than doing that. Maybe an improvement suggestion in the tracker?

The other plugin/button I'd like to see there to help with layouts and help people avoid using tables for layout is a 'clear:both' horizontal line - at the moment Im doing it through the html, but that would also be something that would be great from a single button

 
Average of ratings:Useful (1)
Picture of Joseph Rézeau
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup TestersGroup Translators

Richard "The other plugin/button I'd like to see there to help with layouts and help people avoid using tables for layout is a 'clear:both' horizontal line - at the moment Im doing it through the html, but that would also be something that would be great from a single button"

+1

 
Average of ratings: -
Picture of Alan Cherwinski
Re: Struggling with understanding ATTO
 

Thank you Richard,

"making sure the image is the correct default size before uploading, because Atto also adds the img-responsive class to it."

Resizing images outside of Moodle prior to upload is too complicated for most instructors. What appears to be the resizing options currently within Atto are also too complicated -  requiring an instructor to exit Moodle and re calculation of the proportional ratio.

What is " img-responsive class"?

Thank you for the suggestion about using right alignment. I will investigate further.  Tables have been essential in the presentation of most instructional content and resources.

Alan

 
Average of ratings:Useful (1)
Mary Cooch
Re: Struggling with understanding ATTO
Group Documentation writersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup TestersGroup Translators

I'd like to know that too, Richard (about img-responsive class) We need to make this ATTO editor and its documentation non-techie user friendly (like for me!) and so any suggestions are welcome. For example, I confess privately just to you smile that I don't understand what is wrong with tables and why it's better to use right alignment. Perhaps you can put some stuff down here. (I DO understand however that it's better to get people to resize before uploading but also appreciate the difficulties of ensuring that happens)

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

1. I'm afraid I don't know anything much about the img-responsive class other than I believe its part of bootstrap and allows the images to resize with the screen width resizing. I found it in the html after adding an image in Atto, but it seems to disappear if the image is given a specific size in the image upload box.

2. Tables are intended for just that - tables. They are not intended for layout - http://www.w3schools.com/html/html_layout.asp

However, previously with TinyMCE and currently with Atto (as far as I can see at the moment) without going into the html and creating everything in code, tables are just about the only option for many teachers creating layouts for their content. What we probably need is some sort of layout plugin/template that makes adding the bootstrap grid, or other layout option (flexbox? - when it achieves sufficient traction in browser adoption), straightforward for 'non-techie' users - something that allows proper responsiveness and is as simple to use as inserting a table. I'm really hoping that the fact bootstrap is used in core now might make that possible - but the Atto plugins are currently something I have not looked at.

3. @Alan "Resizing images outside of Moodle prior to upload is too complicated for most instructors. What appears to be the resizing options currently within Atto are also too complicated -  requiring an instructor to exit Moodle and re calculation of the proportional ratio."

a. Resizing images outside Moodle is an essential and if it's too complicated for your tutors to upload an image to a site such as webresizr.com to resize then you may need to think about taking the content creation responsibilities off them, because if they start uploading full size digital photos without resizing them they are literally going to kill your site!

b. Atto handles the proportional calculations itself - change the width and the height adjusts automatically if you simply tick the 'Keep ratio' option. But even that only changes the display size - if the original image is a 4000x3000px 5Mb+ image, then that is what is uploaded before the css kicks in to resize it, every image, every time.

 

 
Average of ratings:Useful (2)
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Alan - apologies if that comment came across as overly harsh, it wasn't intended that way, but is an area I find myself dealing with on a regular basis when staff and students upload full size photographs to their content and then complain that 'Moodle is running slowly'.

But seriously, resizing images appropriately for the web is not an optional skill - it is an essential requirement for anyone adding any content anywhere. And really should include adding photos into word processed documents and the like as well, not just online (One of the issues I have to deal with is massively bloated Word files being used as art/photography portfolios of unedited/not resized digital photographs and then students wondering why they can't upload their assignment because its bigger than the upload limit).

There are so many ways of doing it, within free software such as GIMP, or websites such as the one I mentioned above, 'it's too complex' really should not be an excuse any more.

 
Average of ratings: -
Gmads
Re: Struggling with understanding ATTO
 

Hi all,

I agree with Richard regarding the need to have images sized as required for their final use. If for people with good computers the waiting time is noticable, imagine the experience for people that don't have the best resources (connection speed, memory, etc.), they can literally spend one or two minutes waiting for a high-resolution image to download. If the difference between the original and final sizes is not that great, well, resizing then might not be worth the effort, but when one has a 1920x1080 image and it has to be shown as a 300x300x sized image, for example, then resizing should be compulsory.

A good software I use, simple to use and with useful options (like batch processing), is XnView.

Cheers!

 
Average of ratings:Useful (1)
Gmads
Re: Struggling with understanding ATTO
 
Average of ratings: -
Picture of Alan Ball
Re: Struggling with understanding ATTO
 

I'd expect image resizing (and resampling) to be automatic and I'd expect most instructors would also - especially if they're also facebook (or other social network) users. The fact that it isn't a reality is actually quite depressing considering plenty of online services have been doing it for a decade or more. 

If the instructor needs a full sized image, there could just be a checkbox called 'use full sized image' or similar. 

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Example image added in Atto - resized from 400x300 using the Insert image dialogue - just changing the width to 200, the height resizes automatically, keeping the Auto size option checked

<img src="http://localhost/moodle/draftfile.php/5/user/draft/897133828/2014-02-06-124543.jpg" alt="ro" style="vertical-align:text-bottom; margin: 0 .5em;" class="img-responsive" width="200" height="150">

 

 
Average of ratings: -
Me!
Re: Struggling with understanding ATTO
Group DevelopersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers
Just to explain the "img-responsive" class - you can mostly just ignore it - it is used by bootstrap so that images scale down when displayed on small screens. The scaling only works if the image is to be displayed in it's original aspect ratio, so Atto only adds that class if you keep the original aspect ratio.

We will look at solutions for doing more nice things with images in Atto in future releases (not 2.7). The main ones are:
Drag and drop image upload
Rescaling images to their displayed size on upload

These should be easy to do - we just didn't have time yet. (There is a patch in the tracker for the first one already)
 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Why not use tables - pt2 (a better link than the one I posted above, with more explanation)

http://webdesign.about.com/od/layout/a/aa111102a.htm

I'm sure there are many more links out there which say pretty much the same thing. But as I said earlier, what we really need in Atto (IMHO) is a way of removing the need for non-coders (ie your average teacher) to create similar layouts easily without tables - to be able to mix images and videos in context, similar to the relatively simple example Alan gave earlier.

I have used templates in TinyMCE before to create div based layouts with dummy content in it, but I don't think this feature is available in Atto yet. Maybe someone can suggest an alternative way of doing it - a new plugin, or filter?

hmm not sure about filters - that's more a text replacement, so not sure if that would work well in this instance: might need several (or several parts to the same filter anyway) - one to start a row {layout-row-start}, one to end it {layout-row-end}, one to give the size of each grid {layout-grid-x}, pull?..... [thinking thoughtful maybe........]

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

3 filters for your perusal and comments smile

1. A very simple add a clear:both horizontal rule or div to clear any floats created by aligning images or such like

https://github.com/roelmann/filter_horizontalclear

2. A first attempt to create a filter to allow bootstrap grids to be used within the editor without needing to go into the html to set them up and add the content to them - its still a bit more fiddly than I would like, I'm sure there's a better way of doing it But for now, it may help some people reduce the dependence on tables for layouts

https://github.com/roelmann/filter_layout

3. Not so much a layout feature as an extension to Julian's fontawesome filter already in the plugins database. This one gives the icons a bootstrap button background (you can set which colour as part of the filter)

https://github.com/roelmann/filter_buttonawesome

Would love to get some feedback and testing help to see if they are useful to anyone and worth contributing to the plugins database.

Note - some of this would be relatively simple to just add in the html (I think some of it is easier to do in the html myself) - but I am aware some users just don't want to touch the html itself, so hoping these can help some of those users.

 
Average of ratings:Useful (2)
Joxemi Andonegi
Re: Struggling with understanding ATTO
 

Thanks Richard:

I will have a look as soon as I can spend some time learning about programming for atto.

Regards!

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Shouldn't need any learning about Atto in particular Jose - filters are separate from the editor itself and should work with Atto/Tiny/Plain or any other 3rd party editor that gets installed.

 
Average of ratings: -
Picture of Alan Cherwinski
Re: Struggling with understanding ATTO
 

Thank you Richard,

This is all very interesting and helpful. It has been a few weeks since I tested the Atto demonstration editor on the Moodle site, but I don't recall seeing a "Keep ratio option" on the image upload.

In my implementation both the instructors and learners could be adding images.  My audience of instructors includes non professional volunteer tutors and adult literacy learners at a foundation level - 'non-techie' users.

Cheers,

Alan

 

 

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Feel free to make that video link available to them - I've had Primary school children (and their teachers!) using it and once you explain why, they all understand the need and are quite happy to go along with it. Its certainly not intended for 'techies' only.

If you search youtube, there will be many others on that and other tools too.

Atto is relatively new - it's only just been added to 2.7 as the default editor and that's only available as Beta testing so far, so you may have been using an Alpha version that has since been further developed if you were looking at it several weeks ago.

 
Average of ratings: -
Mary Cooch
Re: Struggling with understanding ATTO
Group Documentation writersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup TestersGroup Translators

Alan: Feel free to try ATTO on the QA testing site here : http://qa.moodle.net/

and Richard: that's a very good screencastsmile

 
Average of ratings: -
Picture of Alan Cherwinski
Re: Struggling with understanding ATTO
 

Thanks Mary,

On that version I can see the Auto Size option. That will calm many of my users. I think it was not there on the sample site set up to demo the four editors under consideration.

Cheers

 

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Thanks Mary smile

 
Average of ratings: -
Picture of Rick Jerz
Re: Struggling with understanding ATTO
Group Particularly helpful Moodlers

Is the qa.moodle.net always running the latest version of Moodle?  Where does this site state its Moodle version?  Even as "manager", I can't get to Site Notifications.

Also, I thought that I would verify that this site is using ATTO by going into Site Administration, but couldn't get to the administrative item for the editor.  Does this site mention anywhere that it is using ATTO?  How would I verify this?  Is ATTO the default setting on this qa.moodle.net site?

Are these moodle.org forums using ATTO?

 

 
Average of ratings: -
Mary Cooch
Re: Struggling with understanding ATTO
Group Documentation writersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup TestersGroup Translators

Hello RIck. As mentioned on the front page of the site, http://qa.moodle.net/  is running the latest development version of Moodle, updated daily. So yes - it IS using Atto as default. And no - the Moodle forums here are not using Atto.

 
Average of ratings:Useful (1)
Picture of Rick Jerz
Re: Struggling with understanding ATTO
Group Particularly helpful Moodlers

Mary, thanks for your reply (a little embarrassed that I didn't see the 2.7 note on the qa.moodle.net frontage). blush

I thought that I would see some significant differences with ATTO, but I don't see these.  Both this editor on moodle.org, and the ATTO editor on qa.moodle.net look, and to me even behave, nearly identically.  So this is why I was confused a little about this ATTO issues.

 

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

I think these are the default icons on my latest install for either Atto or TinyMCE - some TinyMCE functions 'missing' from Atto, but also some additional features in Atto such as the accessibility/screen reader checkers. Also some things such as the paste options are now right click menu options rather than buttons on the toolbar.

There are a few other features on both that are not part of the default toolset but can be added through the settings pages and other features still under development for Atto (colour settings -foreground and background - can be added in Atto from the settings page for example, but seem quite basic at the moment)

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

oops, forgot to attach the image clown


 
Average of ratings: -
Picture of Daniel Thies
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

I am getting some buggy behaviour with the resizing, and maybe that is your problem. If I change on of the dimensions in the image dialogue and then tab the other dimension updates to keep the ratio the same.  If instead I change the focus by clicking else in the dialogue, it does change the other dimension.

I don't know about formatting with a filter, but it should be able to resize the image with a filter so that the downloaded file matches the viewing dimensions.  Wikipedia seems to do this automatically.

 
Average of ratings: -
Picture of Nathan Lind
Re: Struggling with understanding ATTO
 

Guessing you meant www.webresizer.com (not www.webresizr.com)?

 
Average of ratings: -
Picture of Daniel Thies
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

From what I can tell img-responsive is added if the autosize option is checked on the input panel.  This is the way the editor remembers what you did the last time with this image if you open the dialogue again.  The auto resize option seems to scale height and width so that the image is not stretched or squashed when you resize.

I believe that tables are supposed to be bad for accessibility reasons.  Screen readers don't understand the context of rows and columns.  Also resizing the windows does awkward things.

 
Average of ratings: -
Picture of Alan Cherwinski
Re: Struggling with understanding ATTO
 

Thank you Richard, Guillermo, and Daniel,

You have educated me and given me good content for instructor professional development and training.  I understand the issues of accessibility. In the adult basic education field it can be a struggle and a trade off between the "principles of clear language and design" and the need for accessible interfaces and presentation. It is not the typical academic Moodle audience that can handle scrolling down pages of linear text. Tables can be very helpful for users struggling with new information - e.g. a checklists.  It is interesting how the smartphone interface is making everyone use a version of a text accessibility device.

Thanks again for your patience and advice.

 
Average of ratings: -
Joxemi Andonegi
Re: Struggling with understanding ATTO
 

Hi:

I agree that using tables is not acceptable, but we should help users as much as possible so they work with classes without knowing what is a class.

This is a solution for a typical problem: doing a proper attribution the author of an image. We are using in both eXeLearning and Moodle. The tutorial is in Spanish, but I think you will have no problem with it.

The idea is:

  • You have a tab in the editor's image button, so you can fill attribution info. It generates the proper html generating a structure with three elements: header, image and footer
  • Align buttons have been modified, so they "move" the whole structure and not only the image.

I think something like this would be useful for all Moodle users.

 

 

 
Average of ratings:Useful (1)
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

Hi Jose

I would think its too late for us to get any more of these ideas into Atto for 2.7 BUT one of the principles of Atto is that it is extensible through plugins and filters, so there's nothing stopping any of us creating those plugins and fiters and submitting them to the plugins repository (there's no plugins there for atto yet, but filters should work for either TinyMCE or Atto as far as I understand it). I think your suggestion for the attributions would make a great plugin addition and would be very useful for many people.

 
Average of ratings: -
Joxemi Andonegi
Re: Struggling with understanding ATTO
 

Hi Richard:

Thank you for your interest. The tutorial in my previous post uses some specific classes defined in a learning material creation project. The next version of eXeLearning will include an improved solution for attribution, so it will be the out of the box solution for attribution if you install eXeLearning 2.0.

I will create soon a tutorial in English about using this solution in Moodle (it's developed in TinyMCE 3). I think it should be easy to adopt the same class names in Moodle, so that:

  • Any plugin for attribution generated for eXeLearning can be used in Moodle (and vice-versa).
  • The HTML code generated in eXe can be copied and pastedto Moodle (and vice-versa).
 
Average of ratings: -
Picture of Joseph Rézeau
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup TestersGroup Translators

José Miguel "I agree that using tables is not acceptable, but we should help users as much as possible so they work with classes without knowing what is a class."

Seeing as most Moodle users are teachers, there is some unintended irony in that statement which could be read (out of its current context) as "Teachers [should] work with classes without knowing what a class is.wink

Seriously, I find this current ATTO discussion quite interesting and will give ATTO a thorough testing on my local Moodle 2.7 installation.

Joseph

 

 
Average of ratings:Useful (1)
Joxemi Andonegi
Re: Struggling with understanding ATTO
 

Hi Joseph:

It is not a joke. I think teachers [should be able to] work with classes without knowing what a class is, as long as the editor is user friendly for non technological users.

Of course, we will test atto and we will try to develop similar plugins for our non class-aware users.

 
Average of ratings: -
Picture of Richard Oelmann
Re: Struggling with understanding ATTO
Group DevelopersGroup Particularly helpful MoodlersGroup Testers

I think Joseph was using the play on words as the joke, Jose - class as in the css selector and class as in the group of children a teacher works with smile

 
Average of ratings:Useful (1)
Joxemi Andonegi
Re: Struggling with understanding ATTO
 

Oh, now I understand.  big grinbig grinbig grin

 
Average of ratings:Useful (1)