HTML Snippets Plugin

HTML Snippets Plugin

by Justin Hunt -
Number of replies: 12
Picture of Particularly helpful Moodlers Picture of 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)
In reply to Justin Hunt

Re: HTML Snippets Plugin

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of 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)
In reply to AL Rachels

Re: HTML Snippets Plugin

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of 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.

In reply to Justin Hunt

Re: HTML Snippets Plugin

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of 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?

In reply to AL Rachels

Re: HTML Snippets Plugin

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of 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.


In reply to Justin Hunt

Re: HTML Snippets Plugin

by Derek Chirnside -

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

In reply to Derek Chirnside

Re: HTML Snippets Plugin

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of 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


In reply to Justin Hunt

Port TinyMCE templates to Atto

by A W -

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

In reply to A W

Re: Port TinyMCE templates to Atto

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of 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. 

In reply to Justin Hunt

Re: HTML Snippets Plugin

by Neil Stapleton -

Hi Justin

Great plugin by-the-way, and thank you so much for all the hard work.

Just a general question, about the likely hood of you finding the time to update compatibility to 3.5 following it's release in few weeks. I know you've mentioned some improvements such as switching to a dropdown list instead of a popup and buttons (which I have mixed feelings about, see below). It would be great to see a few improve an for 3.5 comparability to be assured as it's the later LTS release, not sure I can do much to help other than send encouragement and perhaps a bit of info.

I'm in the process of implementing this plugin for our course builders, as a template toolkit.  One of the challenges I have is targeting it at staff without making it something that Students are going to start fiddling with, because it's purpose is unclear.

My initial thought was to customise the atto_snippet > 'chooseinsert' language string to add some guidance and perhaps a link to some more guidnance on how to get the best out of our templates.  It's a shame this string doesn't support html, so it could be styled and include a link.


So in short, I really like the popup as it could potentially allow me to include some descriptive text, so that users (especially students) know what it's for. I'm not a fan of the 'spider web' icon, not sure if there's a way to allow this to be customised via the config or a language string perhaps?

So if you do move to a drop-down it might be a limitation in my mind.... perhaps you could give it as an option and also make the atto_snippet > 'chooseinsert' string support html, to keep everyone happy smile



In reply to Neil Stapleton

Re: HTML Snippets Plugin

by Neil Stapleton -

Should have said that I'm currently testing it on a 3.4 Moodle, with Boost and all seems to be working well.

Happy to add trackers if helpful

In reply to Neil Stapleton

Re: HTML Snippets Plugin

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Neil

Thanks for taking the time to share your thoughts. And its great that you are using it with your team.

Yes I plan to bring (almost) all the plugins up to 3.5 with support for the new privacy API. About the popup. Well the sticking point is that having thought about it a bit, the best situation is not buttons or pulldowns as much as an attractive chooser with more guidance for the user than now,  much like the wordpress shortcodes often have.

Each template should have a panel with its name, icon, and a description. The user should be able to scroll through a list of them before choosing. And on the next page, the  fields where users specify variable values should be laid out better with label  + description/instruction.

If you can find a better icon, just send it to me. Generico atto plugin allows you to choose the icon, so its actually possible to do that too. I wonder which is the better way ...

About confusing students ... Snippet has a capability declared 'atto/snippet:visible.' So you could just remove that capability from the student role. Then they won't see the icon and won't know what they are missing. Perhaps that helps?


In reply to Justin Hunt

Re: HTML Snippets Plugin

by Neil Stapleton -

Hi Justin

Thanks for the quick response and sorry for the delay in coming back to you. Great news that you are planning to 3.5 this and your other great plugins. Your concept for the chooser sounds ideal and tidying up the variable form would be the icing on the cake.

Icon wise, having a choice like 'atto_generico' would be perfect, as we could then align it to our internal brand.  I did have a quick look at some font awesome and something like might also work well.

I'm a little embarrassed I didn't' spot the 'atto/snippet:visible' capability, which is perfect.

My interaction with you and what the direction you are taking this has really strengthened my view that this will allow us to create a whole suite of templates for our course builders, and that it will be an important tool for us.

Thanks again for all the hard work.

Best

Neil