Text editors

HTML Snippets Plugin

 
Picture of Justin Hunt
HTML Snippets Plugin
Group Particularly helpful MoodlersGroup Plugin developers

For a project that I have been working on, I needed a way to quickly create similar content across different pages on the site. So I made this plugin called "snippet." 

It works a bit like Generico. The admin makes templates with placeholders(variables) and then the user uses the Atto icon to choose the template, set any variables, and insert the resulting html code into the html test area.  It has selectable presets (not many yet) and template import/export functions. Unlike Generico there is no connection with a filter plugin. It is much simpler. The html is simply generated when the user presses the insert button.

I hope to release it one day on the Moodle plugins database. But for now its just available for anyone to use from Github.

https://github.com/justinhunt/moodle-atto_snippet

 
Average of ratings: Useful (3)
Picture of AL Rachels
Re: HTML Snippets Plugin
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Thanks for this new Atto plugin. I've already started making myself some of the more useful page templates similar to slide layouts used by Libre Office Impress and M$ Power Point so I can easily make "Slide Shows" in a Moodle Book resource. With the Book Appearance Custom Title check box marked the similarity to a slide is pretty good. With some of the Generico filters and HTML5 stuff, should be able to come very close to what you can do with a slide.

Due to the table limitations of the Atto editor, I am making the template in LO Writer, copy and pasting  into a book page, fine tuning the look, switching to HTML mode, then copy and pasting into a snippet. Works okay. If anyone comes up with something better, tell me...please.

I guess I should try making the templates with TinyMCE since it does "tables" better than Atto.

 
Average of ratings: Useful (1)
Picture of Justin Hunt
Re: HTML Snippets Plugin
Group Particularly helpful MoodlersGroup Plugin developers

Cor, You are straight into it Al. Thanks. 

I tried for a while to make the templates generate HTML via mustache , or its YUI cousin "Handlebars." Because then you could specify "column count", "tab count"  etc, and the templates would be much more flexible. But my IQ wasn't high enough. So for now its just very simple.

I thought that it would be neat if the current theme had a "snippet" folder, that any templates there would be available for use. (same thing for Generico) That way theme devs could ship snippets or generico templates with their themes. A bit like wordpress themes often come with shortcodes.

 
Average of ratings: -
Picture of AL Rachels
Re: HTML Snippets Plugin
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Generally, over my years of using Moodle, whenever I wanted to set up a Moodle page to have a particular look or layout using any of the Moodle editors, I have done it by using tables with various rows and columns with some cells merged to get the look I want. It was always a pain in the backside. However, using tables this way in snippets makes this VERY easy to do.

BUT, if you do any research, it is NOT recommended to use tables for layout like that as it make for some pretty complicated HTML. Instead, it is recommended to use all the new HTML5 stuff, such as flexboxes,etc. Unfortunately, I've discovered that the style  stuff that makes the HTML5 look right, gets ignored when used in a snippet as soon as you save the page you are creating. 

I've discovered four options. One - the style info has to be placed in the Custom CSS of the theme you are using. If you are like me, and let people pick the theme to use, then to keep things from breaking, the style info has to be added to EVERY theme. Not a good option as in my case, I currently have 20 themes installed.

Option Two - Snippet does contain a styles.css file. If the style info is placed there, then purge all caches, the styling takes effect in every theme. Also not really a good option as any page created with a snippet will break as soon as/if you upgrade the Snippet plugin.

Option three and four - Generico Filter templates and PoodLL Filter Widget templates both have a Custom CSS field setting that when used, makes the styles show up in any theme used. This makes all the new HTML5 stuff usable/doable.

Sooooo - I guess the point of this rambling discourse is - can you think of any way to make the CSS style stuff work in a Snippet?  thoughtful Is it possible to add a Custom CSS field to each snippet or, probably better, as an optional spot on the Snippet settings page?

 
Average of ratings: -
Picture of Justin Hunt
Re: HTML Snippets Plugin
Group Particularly helpful MoodlersGroup Plugin developers

About adding a CSS styles area to each snippet, I think its not the best idea. 

The main reason is that the functionality needed to make that work, takes us into Generico land. If it can't be done in snippet, its better done in Generico. ( I am growing uneasy that we have invented a new language here ..)

But you can apply CSS classes that have been declared elsewhere, eg to turn links into bootstrap buttons. So I think its just better that the CSS classes are declared in the theme or theme's custom CSS area, and they are used in the snippet. It makes sharing snippets like that across sites, a bit tedious.

My comment earlier about loading presets from the theme, is related to this. Because it means theme designers could ship templates that work with the CSS from the theme, with their theme.


 
Average of ratings: -
Just wondering . . .
Re: HTML Snippets Plugin
Group Particularly helpful Moodlers

Inserting carousel into Boost

I was trying to make snippet to insert a carousel.  Using code from here: https://v4-alpha.getbootstrap.com/components/carousel/ I'd love to have text, images, sliders and accordians easy to do in atto.

Fail: Can't get it to work, I have not got a clue about a few things.  Where the images go is the problem.  And I can't get the slider arrows to appear.

Inserting images in Boost

In my tinkering I have found the benefits of the two attributes from this comment

Here’s a carousel with slides only. Note the presence of the .d-block and .img-fluid on carousel images to prevent browser default image alignment.

By accident I have a failing carousel, but a functioning responsive image because of some of the extra attributes.  I scrunch my browser window a little and the image shrinks.

This is great.  No horizontal scroll bar.

Could snippet add a responsive image?  Can snippet choose files as part of the process?

-Derek

 
Average of ratings: -
Picture of Justin Hunt
Re: HTML Snippets Plugin
Group Particularly helpful MoodlersGroup Plugin developers

I think you could make a carousel from snippet, but its a bit of stretch.

In Snippet, if you stored all the carousel images site-wide in a fixed location, eg on Amazon S3, you could put the URL to the folder in the template. Then the template user could just put the name of the file in the popup dialog.

But really the carousel is bread and butter Generico. So it would be better to use that.
This slideshow template is an example of how it might work in Generico

https://demo.poodll.com/mod/page/view.php?id=145


 
Average of ratings: -
Picture of A W
Port TinyMCE templates to Atto
 

Hi Justin,

Many thanks for the plugin. smile 

I need to port a bunch of TinyMCE templates (which are each stored in separate HTML file) to Atto and looking to use your Snippets plugin. Is there a simple/quick way to move them over without cutting and pasting? Where are the snippets stored at the backend (i.e. could I drop them in that way)?

One final thing, in TinyMCE I can select the template from a dropdown list from within the Editor itself, but Snippets in Atto current seems to have the popup with a button for each snippet, this becomes a bit unwieldy with 30+ templates, any plans to add something like the dropdown?

Thanks again,

Alex

 
Average of ratings: -
Picture of Justin Hunt
Re: Port TinyMCE templates to Atto
Group Particularly helpful MoodlersGroup Plugin developers
[Why did I only see this now?] Sorry for being a bit slow. 


The templates are importable and exportable as json files with a .txt extension. So if there were hundreds you could do some excel or database magic to create json files. But for 30, its probably just better to get some good music and a cup of coffee and spend a few hours doing it manually.

You know thats a great idea about the drop down. I never even thought of it. Programmer tunnel vision I guess. I will do that as soon as I can. 

 
Average of ratings: -