Okay, good afternoon everyone. My name is David Bain. I am from Jamaica so that's the explanation for the accent. So far I've enjoyed the weather. It is, I have,

I brought three jackets and I haven't had to wear any of them, just extra weight in my suitcase. A little background about myself, I've been using Plone for definitely more than a decade. I run a software company that does Plone

work and more recently has started to build products, some of them around Plone and the company's name is Altarum. I'm here to talk about mosaic tiled layouts for Plone. So hopefully at the end of this you have a better

understanding of how mosaic fits into the picture of Plone. Just a quick question, how many people have used mosaic? Here, just a quick poll. One and a half? Two? Okay, I see some faces. I'm sure there are a couple of other people who

haven't put up their hands but I'm not going to pick on anybody, right Beth? Okay, so let's get into this. So just so that you understand what to expect from this presentation, I want to put into context why we need this. Then I'll talk

briefly, not exhaustively, but briefly about previous solutions and then I'll do a demo of mosaic and I might talk about the future but I'll probably replace that with just questions so that you can ask questions about mosaic. So that's

fine for everyone? Wonderful. Okay, so mosaic is Plone technology and let's tell a little story. So here is Caro and Valdek and they're running a

conference in, let's pretend it's 2017 and all the presenters for PyCon Jamaica happen to also be Plone people, right? Because they just want to get all the warm weather. There's a little problem though. Valdek wants a

really nice homepage and he's not interested in learning, not even interested in learning the as much less page templates and things like that. Cara has a slightly different thing. She wants to be able to have different layouts. So for example, your presentations after the conference

should have things like the slides and the videos and things like that but before the conference there they might be a little simpler and she doesn't really want to have to call a programmer to set that up for her. Shouldn't she be able to just make a few changes on the content and and do

that? As she heard she could do it with dexterity but then someone told her oh you can even do this with mosaic. So that's the pain point but let's let's take a slight tangent before we solve their pain by giving you a history of how we used to solve that pain. So this is a brief completely not

exhaustive history of layout solutions. Firstly I'll give you some context. Back in the day layouts were done by CSS gurus who for every new site project they would do it from scratch and you would tell them what they want

what you want you do it in Photoshop and then you'd wait a couple weeks and they'd come back with this site that looks like what you want and then if you wanted a particular page to look different you'd do it up in Photoshop to say that's going to look different and then they'd go back and you know

stitch and do what they need to do and you'd get a new page and repeat that rinse and repeat every time you need to get a new layout. Sounds like fun? Probably not. And then sometimes the pixels weren't exactly where you

wanted them and they'd say things like well it's not going to work that way because of XYZ or what's the resolution on your screen are you sure you're looking at it with the right browser and da da da da. So a couple people picked up on that frustration and they created these CSS frameworks

which basically allowed you to use grids to lay out your content but it still required some amount of knowledge and skill to manipulate the grids you needed to understand CSS classes but at least you didn't need necessarily to go deep into CSS as long as you knew the classes you could lay out things

and so maybe a layout would move from a week or two to maybe three days or something like that depending on the experience and so on. Some of these grid systems included blueprint CSS, bootstrap, foundation and of course even

one invented by Alexander Lemie one of the co-founders of Plone called Deco.js. So that's a little bit about what was happening and the why of all of this is that you want to get nice-looking layouts right and

the why of Mosaic is that you want to be able to lay out this type of stuff without having to push it off to some CSS geek right. I'm a CSS geek so

here these are examples of the type of layouts you want to be able to get right. You want your content to look as good as your theme and what tends to happen is you get your theme but then how do you get nice layouts from page to page to page to page. I mean it's like you hand somebody a

wonderful PowerPoint template and they're able to completely destroy it somehow and possibly if we have layout systems like Mosaic we can make it easier for people to get it right rather than having them have to dig into code and things like that. Let's continue talking a little bit about some of

the Plone specific solutions that exist and existed. So one that I've used is collective listing view which allows you to create something of a

layout but again you use a lot of code. There's the diazo you can actually use this system called diazo to move things around in your target layout just pull it from Plone and move it around in your target layout but it still requires a certain amount of savvy to be able to do that much less than before

and it's a wonderful improvement and that's what you use to give the general look for your theme but once you get into the content you want to do better layout. In fact here is what some of these things look like. This is for example a browser view. Obviously this is a snippet incomplete there are a lot

of things there but this is enough to send a designer screaming running and screaming and to me this is this is just a little bit of code this is great but this is going to scare away a lot of people and here is what some diazo rules look like. Again they can be quite intimidating I'm seeing someone

cringing in the audience so it's not necessarily the greatest of experiences to be staring at walls of text to do layout. So let's let's talk a little about what Mosaic can do for you. Here are the key concepts. What

Mosaic makes possible is the ability to create a layout and then to make that layout reusable and you can do a lot more customization than that but for

the sake of this talk we'll work with those as the boundaries of what Mosaic can do. So let's let's talk about the two targets that we're trying to go for. Remember Valdek wanted to get a cool homepage and he didn't want to learn page templates okay and Cara she wanted different layouts she wanted to

maybe a video or slides and she didn't want to have to call a programmer to create a new field for adding the video and then write the diazo rule so

that the video gets embedded properly and all that type of stuff. She just wanted to be able to just do it. That seems like a reasonable expectation nowadays when you can go to Facebook and just post things at will. So let's do

the demo before the questions. So let's get some of these things out of the way and so we have a couple of talks here. Here is our clone site that

they've built right. I decided not to theme it too much because we're focused on content layout. We put in a couple talks and we want to be able to

showcase these talks right because these are pretty good talks from some interesting persons who some of us might know. So we're going to start with Cara's problem. Cara's problem was that she wanted to get a little more

control over the layout without having to learn too many other new technologies. So let's see what Mosaic can do for someone like Cara okay.

She was told by the person introducing her to this technology that all you have to do is change your display to support what is called a Mosaic layout. So she goes in to one of the talks and she switches it to use Mosaic layout. Now that that is switched on she goes in and she clicks

edit and she gets a screen that looks like this. Now she had the benefit of you know about five minutes of training so she's an expert now in Mosaic. So she knows right away that this is the default layout and she

wants to customize it and she knows she has to go to the layout button and she clicks customize. What just happened? Well over here two new options showed up. One called formatting which allows you to add padding and some styles and

things like that and one called insert which gives you the ability to add fields from your content. So because this is a talk it's going to have fields like for example the presenter photo and she thinks the presenter photo would look wonderful kind of next to some of this talk

information. So she's setting it up to show up here. Then she wants to actually

have the name of the presenter that might be good. So we want to add the name of the presenter and let's add some details about the talk. So let's just add that down here and it turns out all of these talks are talks so

they did have a field called type of talk but it's not not useful for this so we leave it out. But you might want to say who the audience is in case it varies from talk to talk it will help people to select the talk they want. And once she's done that she's actually created her custom layout.

Okay now she could just click save but one of the things with this is because every talk is going to be using this layout why not store it as a reusable

layout. So let's see how you'd go about doing that. So we're going to go back to edit and this time to make it reusable we're going to say I like this layout let me save it and I'm going to call it something original like talk

layout. I had noticed I clicked a little a little checkbox underneath talk layout that's to make sure that it stays global that means that any other editor on the site can also access this layout. And now we have a custom

layout and we can click Save to save everything and it means that instead of repeating all of that arrangement on every talk we can now go to each talk

and after cringing for a while we can make sure that the talk is using a mosaic layout and if it is notice we now have something called the talk layout and if we just click it we don't have to do much more we can just click

save and magically this talk also has that layout isn't that useful and we can repeat we can rinse and repeat for the rest of them so we don't want we

certainly don't want people seeing this that's that's that makes no sense in the context of our thing that's just generated because it's there so just switch the mosaic layout and edit and you get the picture and after a

while this can become quite brainless you can even turn off notifications that are coming on your screen while without skipping a beat that was not planned that was actually my mother okay so we're going to do that again and now

there you go so all of the talks have this wonderful layout there are a couple other things we could do to to clean it up you know if if you had

another 30 minutes for this talk but let's solve Valdek's problem now now recall that Valdek what he wanted was to be able to have you know a nice cool home page so let's do that it turns out that his home page is currently a

document by default so but we can tell that document to use the mosaic layout it already is using the mosaic layout that I went ahead like on a good cooking show and change that and what we're going to do is we're going to

customize this page a little bit we should probably say something about a

little plug there but let's customize the layout right turns out there's this thing called a content listing if you were at the keynote you may have heard

it referred to as a collection tile right all of these things are referred to them as tiles unfortunately a collection tile might not help the average user so content listing might be an easier explanation so it is called a content listing in this context and let's actually list the talks wouldn't

that be great if we could just say by type I want anything that is a talk that would be really nice and maybe a tabular view of those talks that

would be super and let's maybe add a little heading that says upcoming talks now obviously we could really go a lot harder with this but this is just to

give you an idea of what's possible let's save this and call it something like home page layout might not even need to make it global save and so now

we have a nice front page maybe we want to feature a talk that would be nice and that way we might be able to get a nice picture there so let's do that let us feature a talk that would be great so I'm going to click

customize insert and I'm going to insert something called existing content okay and I know that my talks are located on the talks oops let's do that

again rewind okay my talks are located on the talks actually let's just find a talk I think there was a talk by Calvin well I know I have a talk

called okay we're going to win this there we go talks all right so let's choose choose this talk and notice how it loads it up into my cursor so I can

then choose where I want to put it I'm going to put it next to the summary all right and I'm going to move this up see if I can get that below here and

maybe make that a little bigger and let's add some rich text above the talk and we'll say featured talk we'll make that have a head in and save now

notice I didn't save it as a new layout I just customized my front page so sometimes you want to do a one-off customization and sometimes you want to

do something something more now one of the things that we need to get back to though we want to make sure that after the talk we can show maybe the slides from the top okay how am I doing for time and someone tell me when I

have about 10 minutes or so so let's let's head over to the talks and we'll choose one of these talks and let's embed slides for this talk I'm

actually going to embed not the real slides for the talk but just some slides so it turns out that there is something called an embed tile very very useful I can go to layout customize and I can insert what is called a raw

embed now personally I would probably rename this I probably called raw embed embed and then I would call the other embed or embed because it's or maybe it's auto embed and if time allows I'll show you the difference but I'm going to do a raw embed because it allows me to take snippets from any

site that allows you to share and I can put that snippet in my raw embed so I'm going to choose raw embed and I'll call this slide slides and let's share some slide stuff oops there we go and save so once the talk is done you

may want to actually have talk slides that that would be a good thing

to do for your conference and I'll add another rich text field that I find myself using rich text fields a lot just use it as a heading and I'm going to format it I'm going to make this a new layout so the save button under the

layout menu allows you to save whatever's on the screen as a new layout big green button is just to save right so I'm going to create a new layout and I'm going to call this one talk with slides and it basically it

uses this as my template for all my other stuff let me oops sorry okay so now after the conference when the slides are ready they can be embedded

right here and because I have it as a new layout it means that you can wait and five minutes after the presenter has finished if they've pushed it to slide share you get the URL you get the share embed and you just drop it there so as soon as Tom has done his presentation we could say edit and we

could say layout change because he's now finished his presentation and

unfortunately I don't have one for him is it safe to steal yours Rob okay so we print we pretend that Tom did this presentation although we know it's really Rob and we're going to go to the raw embed just click edit replace

it there and it's the same pattern for almost any tile that you're working with you can drag it around lay it out and and they're contextually the context really makes sense so a raw embed expects you to paste some embed

code what is called an embed it's it will try and embed it based on just a URL maybe it should be called a URL embed we can decide on that but here

we go and here are the slides and and they work as expected okay so that is the the experience of a typical site manager should we look at the

experience for a site administrator and anybody interested in that I see like one person shaking their hair okay a little more than one person sure all right so just bear with me we're going to just look a little bit in the to see what it's like for somebody who is site administrator for site

administrator there's something called the mosaic layout editor and all the powers of mosaic are wrapped up in a manifest file so if you want to

create a new one manually you just create a new line in your manifest file you give it a name cool dash layout you can even specify what content type that layout should be associated with or not so if you want it to be associated

with everything you just get rid of that little for option and of course a title is always useful this is a cool layout and then you can just create the cool create it so you just say cool layout HTML now I haven't gotten to the

level where I can just type this stuff out of my head so I'm just going to steal a layout here but just by doing that so someone might say to you

as a site administrator I want a cool layout I want it to have I don't know a video on top right where you could do that by just stealing some embed

code and then saying all right let's let's add that video on top let's see what happens if you use our if we use our cool layout I hope I was at a cool layout yeah let's see what happens if we change the home page to use this cool layout so this is slightly untested many things could go wrong at

this point but let's let's let's go so we're going to go to layout and we're

going to change our layout and it's going to warn you it's going to say changes will destroy existing custom layouts and the universe will implode and blah blah blah so you're going to choose this is a cool layout and magic I remember I embedded a video that was that was I just did it manually inside

of the manifest file and this cool layout HTML here it is right here so there are situations where you may want to do that you may want to have a special layout for somebody whose profile has a badge so no now they have

the I presented a talk at PloneCon sorry at PyCon Jamaica and they get a badge for that or or whatever yeah so the what I've demonstrated here are the key concepts behind the mosaic now if you dig deeper there's certainly a lot

more you can do their customizations that you can do on the file system so that you can redistribute those for other users but these are the core things and the core experiences that either a site editor or a site administrator would experience so thank you for your time

and I think we're done I don't think I had any other slides but hopefully at this point Caro will be happy and Vallec will be happy and hopefully

you can make some use of mosaic some of the things I haven't shown you because of time I didn't show you how to install mosaic because mosaic is an add-on and I didn't show you some of the warts but you know if you come across issues there's the Plone forum and you can go there and get help and

report bugs because this is still a release candidate it's used in production by some very big sites I just discovered recently like about five minutes ago well that's exaggeration but yeah so thank you for your time if

you have questions this is my contact information or if you want to ask me the questions now yes yes I should warn you it requires going into the ZMI

so if you can stomach that I can show you how to do that is that fine so for those who don't know the ZMI is this ugly part of it's not really Plone it's the stuff that Plone sits on top of it works yeah I don't need to show

yes it's possible it's possible it's possible I don't know if that's possible

yet I mean it may be possible I don't know how to do that but what you can do is as as Steve had asked you certainly can make it default to use in

mosaic yeah yeah yeah for simplicity I didn't use a custom theme but for

simplicity I didn't use a custom theme but you certainly can use a custom theme perhaps in a lightning talk I'll demonstrate that if I if I get to do

one of those lightning talks because one of the things that we use we use a system called gloss we built it in-house and it allows you to the

mark up this it allows to keep your CSS from conflicting with other stuff and then you can just use the as sire mosaic just like you would with an standard clone Barcelona Nita theme so short answer yes you can use other

themes not the theme the layout right so you could especially with this the

back end that I showed you you could just copy the HTML files and things from the manifest file move it to another mosaic enabled site that happens

to use a different theme it would still get the layout and then you could tell it would pick up the theme of the new site yeah yeah thanks Rob so

you've helped twice now you've allowed me to use your presentation as much as

I can tell from the grid system it seems to be slightly inspired by deco but it's not deco it uses something called all all the classes are called mosaic dash something right the truth right so it you it doesn't use yeah so

if so if you look at it right it you can't get much more than four columns because it uses it uses quarter one third it doesn't use numbering to get

down to smaller sizes so as last I checked it looks like four is the the most number of columns you can get you you might know Rob okay right I

certainly haven't I haven't tried to do that and I'm quite happy with what it's doing now and for me the value to me is not not always for me the value

for me is to be able to hand it to somebody who is just getting started and they're still able to deliver value to a customer because now the layout is about dragging it around so that's that's the value for me there

certainly there are certainly limitations to the current implementation but when you compare what used to be the case and what was required to do layout this is a leap yes yes yes yes definitely there are limitations but you're talking

about you know you're saying my new helicopter has limitations compared to my bicycle you know I'll take I'll take the helicopter certainly certainly

actually one of the things that's great about this system and it may take a little while for more developers to get comfortable with it I'm still learning myself custom tiles so you can start to create special tiles

for your use case you can imagine a weather tile for weather website where they could just pull in a weather widget as a tile you certainly can do those things or a currency conversion tile for a bank mortgage calculators for I guess a bank as well you could do you could do a lot with with with

just a little bit of customization now for that you're not going to tell your designer layout person to do that but it's not a lot of work for a developer yes I should I'm sorry I'm staying at the same house as Eric so

I really should mention this there's this really powerful system for creating customizing clones functionality called Rapido and Rapido already allows you to embed Rapido blocks as tiles into mosaic so it means

that if you create a block just think of anything that you might want like a ratings button which is the example that Eric uses now you could have a page for talk ratings as a tile and it's the the integration is not the

prettiest yet but it's good enough that if you know the path to the block you use the path almost like you use an embed code and you just put the path to the block and then it loads it up and you can put it anywhere on the page so yes you can use Rapido for your layouts but I don't have much

more to say so questions I've how much time do I have left I'm have did I go too fast all right so so I should be finished oh thank you for your time