Transcript

00:02 another Wednesday let's see how many people we got going in
00:07 here well now we're starting to get all connected how's everyone doing today
00:13 hope everyone's doing good just some confirmation in the chat that uh yeah
00:20 everything's audio and visual is good I don't know about the flickering guys I uh I don't know I I adjusted my screen
00:27 resolution a little bit hopefully that will um that will fix things David and
00:33 Dave Mr hidding Matias Chris Powers Irwin Dr Bob excellent everybody's here
00:42 it's a party okay um so yeah uh I've been working my
00:50 tail off on uh total CMS 3 the new image uploader um and yeah it's it's it's
00:58 coming out pretty nice I I'm really happy with it you know funny enough I was thinking you
01:03 know you kind of get a rough estimate in your head like oh this will take me this long and this will take me this long and
01:09 like I'm epically horrible at that okay uh cuz I figured man image this image
01:17 uploader it's going to take me like two days it's been like three weeks now you
01:23 know um yeah I uh it's it's been a long
01:28 time uh it's a really it's really really nice it's shaping up really good it's got a lot of really great features um
01:33 and enhancements to what the current version has and we'll go over that but um today we'll probably do some demos
01:41 and testing um and yeah I'll kind of let you guys determine where I go from the
01:47 development do you want me to go to maybe some CSS stuff or some I can dip into some JavaScript um I don't know how
01:54 how fun that will be for you guys but um but yeah let's go ahead and let's start showing off um uh let me
02:02 launch apps here get the uh screen share going all
02:09 right um sorry about the the resolution might be small for you guys I'll try to
02:14 increase the the web browser um the zoom in on the web browser but I've I think
02:20 I've noticed that when I try to scale my display down like you know increase the
02:26 resolution b or decrease the resolution uh for the live stream it tends to cause flickering a little bit so I don't know
02:32 I'm doing my native resolution so um and I know that probably makes it really small for you guys um but like I said
02:39 I'll try to um increase the uh the zoom um if I need
02:45 it and and if if you need to me to increase it more just let me know in the chat I'll try to keep an eye and I'll
02:50 I'll make sure I zoom in especially when I'm going into the code because I know that code tends to be a little tiny so
02:57 all right um so here here we go this is the new Total
03:05 CMS image uploader okay now um last week you saw me building out this action bar
03:13 okay and it's obviously gotten better since then okay um I've added a few
03:19 buttons right we got uh we have an image uh kind of an upload button still not in love with that I'll probably find a new
03:26 one um really not in love with it okay um we I got the and I I have all these
03:32 buttons working now and we also have a uh clean cache Button as well so you can just clean you can click that and it
03:38 clears all the cash from the from the server for that particular image um so that's pretty
03:45 cool um here let me oh let me let me zoom in
03:50 so you guys can see it a little bit bigger okay
03:56 um so what else is new um let's look at some of these so go ahead and click on
04:01 edit and um this took a long time oh he there let's hold on let's go into one
04:07 that's not like full of all kinds of garbage okay um so here is the edit info okay
04:16 and uh there's a lot of info that we can edit and I'm really stoked about this so
04:22 here you can set an imagees featured alt text you can set you can store a link that's associated with that image um you
04:28 can add tags okay we saw the other one had a lot of tags okay um we can set the
04:34 focal point we'll we'll play with that in a little bit um we can set the info
04:40 so this is uh this is the exif information okay so this is all data that's extracted from the image that was
04:46 uploaded this particular one had no image or no exf data because it's a stock image um but yeah this would this
04:54 would store we'll upload one I'll upload a new one uh shortly to kind of show you a the upload process
05:00 um and I'll show you how all that XF information is stored camera information as well um GPS
05:08 information if that's in the XF um and then we have the ability to store color pallets okay well not store it actually
05:14 determines these color pallets from the image okay I don't remember if I how much of this I showed last week I don't
05:20 remember I think I kind of showed it in the code end but I didn't have any of this UI built yet so um and then yeah
05:27 then we have the metadata this is kind of the read only stuff it's not stuff that you're going to modify but it's
05:32 stored in the CMS okay so we can see the height and the the file size and the actual file name of the image um and the
05:40 date it was uploaded okay so um all really really cool information um yeah so let's kind of
05:47 delve into this a little bit um so obviously featured is featured right um
05:53 alt text is obviously the alt text um what is link
05:58 so a use case that a lot of people have with images in total CS now is let's say
06:04 you you want to have images in a slider okay and you want to be able to uh link
06:11 that image to something now a lot of times what people do now is they'll they'll have an image drop zone and a
06:16 text drop zone and that text stores the link and the image stores obviously the image um and that was a common it
06:24 logically made sense to tie those things together um so yeah so now we have the ability to store a link with an image so
06:31 that let's say you wanted to um you know have this uh image as a part of a slider
06:36 or a slideshow or some whatever right and you it could just be an image somewhere on the page and you want that
06:42 image to always link to something um here you can associate now you can associate a link with that image okay so
06:49 pretty cool um tags is the ability just to add you know
06:55 tags right just add tag tag B right if you haven't seen the tag editor really
07:01 slick right uh this tag editor is um is really cool you can have spaces in your
07:08 tags you can have all kinds of stuff now right so really really cool here um you can have tags you can have as many as
07:14 you want you type new ones or if there was an existing list you can actually select from existing ones so really
07:22 cool okay now let's look at focal point so a problem as you know total CMS um
07:31 the current version allows you to have square cropped versions of an image now
07:36 that's awesome um but what if some images are landscape
07:42 some images are portrait and it creates a square cropped image if it's a portrait then potentially important
07:48 parts of an image will get cro cropped off right so um we got we gave you the
07:54 ability now where you can Define the focal point and if you notice here uh look at this is now moving okay and as I
08:01 move the focal point we can def we can Define the focal point of an image now moving these sliders is cool but
08:07 wouldn't it be better if we could just grab this and move it around so now you can also uh grab this little doohickey
08:13 here um the point and you can move it around the image and what's kind of cool is as you see the sliders react in real
08:20 time and they're tied to the position so really slick I love this interface um I
08:27 think like on mobile particularly I think the ERS might be better because a lot of times tapping on this and moving
08:32 it sometimes your finger gets in the way um so yeah maybe maybe you could move it
08:37 with your finger and then use these to kind of refine it um if if need be so works really well though um and I I
08:45 like the ability to have both the drag and drop of the focal point as well as having these sliders which give you a little bit more
08:52 refinement so really cool that again that is allows you to define the focal
08:58 point of an image so that when you create cropped versions um that focal point is um we're going to make sure
09:05 that that part of the images doesn't get cropped off okay and we actually um it's
09:10 been a while since I've played with that feature so we'll go ahead and hopefully today we'll play with that
09:16 okay um the info the uh exf info is just it's just the exf info I'm not going to
09:21 dive into all of those color palettes the color palettes are pretty
09:27 cool in that um what it does is when you upload an image it will analyze all of the colors in
09:34 that image and create a color palette for you and then it stores the top five
09:41 colors that it's found inside of an image and what's really cool is you can
09:46 then use these colors within your page or within your designs so let's say you upload an image and you were like I want
09:53 to make sure that the first image is the first color um in the color palette for an image is Maybe a background color on
10:00 something or the text color or something right so it allows you to Define kind of a theme for an image now uh you can if
10:08 you don't if you want to tweak these colors you can just go ahead and tweak the colors all you like so you can go ahead and on each of these you can go
10:14 and actually modify the color to be whatever you want and let's say you wanted to change
10:19 the order let's say I I know on a on a particular page I um I'm taking the
10:25 first color and I wanted the first color to actually be maybe this darker brown so I could go ahead and modify this to
10:31 be this color um but wouldn't it be nicer if I could just drag and drop it
10:37 okay so now that that darker brown is the first color okay so or maybe I wanted this teal and now the teal is the
10:43 first one so we can kind of change the order of these just by dragging and dropping them around um so that you know
10:49 that you know if you're always using the first second or third colors for various things um you can go ahead and just drag
10:55 and drop those around pretty cool so that gives us a lot of flexibility um
11:01 with our image data another cool little thing I I like
11:08 this little styled uh scroll bar I know it's a small thing but um but yeah this
11:13 scroll bar is pretty slick and eventually what you'll be able to do is if you notice it's kind of the same
11:19 color scheme as these sliders um you'll be able to customize the accent color um
11:25 in total CS forms so then uh yeah that accent color will be used for things like these range sliders as well as the
11:31 scroll bar here in the light box so kind of like bringing everything together and add a little bit of Splash of color
11:37 pretty
11:44 cool can you also enter the numbers no you cannot enter the numbers I mean but going from 40 to 42 is pretty I mean
11:51 these sliders are pretty responsive so um you cannot manually enter this number least I don't think I added that no you
11:57 cannot you can you cannot manually enter the number maybe I'll try to add that I I do agree that would be nice uh as a
12:04 feature of these uh range sliders that's currently not um the ability um so yeah
12:10 uh they're they're pretty responsive though right I I can go from 40 to 42 pretty easily um but I I can I can agree
12:18 with you Irwin that it might be nice to be able to type in a value um so maybe eventually I'll be able to add that
12:29 um sweet okay I think that goes goes over everything let's show you I'm going to go ahead and upload a new image to
12:36 this Drop Zone okay and uh so I'm going to go ahead and upload this Golden Gate Bridge photo if you notice when I hover
12:44 over uh we got a nice little cool effect so we're going to drop that now this is all running locally so
12:50 it's super quick and fast um and so one thing we will notice is that uh a the
12:57 image is uploaded again I can go ahead and click on this and now I can see all of this this particular image's
13:02 information okay now um I should note that whenever
13:09 we edit this information when we upload a new image or when we replace an
13:15 existing image on an ex existing image object okay um all the information in
13:21 this info tab stays okay so um whether or not it's
13:27 featured what the alt text is what the link is and what tags you've set to it all of those will remain the same
13:35 however when you upload a new image the focal point will get reset to 50/50 and
13:40 then all of the ex if information will get updated so if you see now we now have X if information where we didn't
13:46 have it here before for this image because I uploaded an image that actually had X if
13:52 information okay so all this data here was actually pulled in from the exf information that was embedded in the
13:58 image we have information about the camera the the actually the aperture exposure values okay um this one
14:06 particular one didn't have GPS but if it had GPS coordinates it would be here as well as altitude which is kind of a cool
14:11 thing um not sure how many cameras log the altitude but it's there so I figured
14:17 someone might have it so I added it okay um and if you notice the color palette got updated because we uploaded a new
14:23 image has new colors so we now have a new color scheme okay if you notice here
14:29 let's say I wanted you know blue it can then rearrange those again okay pretty cool um and then here's obviously all
14:37 this information got updated as well okay with the current upload date which is um yeah pretty cool
14:45 right okay um now one thing you should note is I
14:53 uploaded that that image and I was immediately able to see and start editing the information about that okay
15:01 that's not something you could do in the current version of total CS uh I know it's it's been a complaint for years
15:06 that you upload an image but then you can't like edit the alt tag information you have to reload the page so there's
15:12 no more having to reload the page um you just simply need to upload the image all
15:18 the data will get dynamically updated on the actual um you know in this edit mode
15:24 um and then when you finish editing you can click save down here and that information will get in saved to the
15:30 server which is pretty cool okay
15:36 um uh we're going to save this one for last okay um next this is just a quickie
15:41 to set the featured flag on an image so right now this image is set to be featured if I click on it um it
15:50 should or should not what happened uh oh
15:59 Let me refresh the page here oh H interesting so if I go ahead and click that oh now it's
16:07 working and then if I unclick it all H maybe let me I got to test let's see
16:15 this bug let's see if I so it is currently this image is currently not featured and if you notice here watch if
16:21 I check this as being featured okay so a it's actually it's a quick save this is actually featured on the server that
16:27 data is saved on the server now okay okay if I go here we'll see that it's actually set to be featured okay now the
16:33 data in this light box I should say if you edit this information uh you do have to click save right um so yeah just
16:42 because you edit this information doesn't mean it's it's saved on the server okay so yeah you can make all the
16:48 edits you want here but the information isn't going to be saved until you
16:53 actually uh click the save button okay
16:59 um so I wanted to see so this is currently set to featured here let's reload make sure that this is actually
17:04 set to be featured oh it is um I just want to see if I this is actually going to be a bug here I'm go ahead and upload
17:12 this okay and if I click
17:18 this ah so when I upload a new image this kind of gets deactivated I'll
17:24 have to I'll have to work on that hold on let me file a bug on that really quick
17:31 one second give me a second
17:41 everybody um upload image then featured button no longer
17:52 works okay all right bug is filed okay
17:57 so um but if I I reload the page okay we'll notice that as long as immediately
18:03 after that is a bug um So currently this image is set to be actually it does work it just doesn't change the state of the
18:09 button which is interesting okay um so this image is currently not featured we
18:14 could see it's not featured in both places if I click on featured okay and it's set to be featured here and if I
18:21 reload the page it still it should still be featured let's see yeah it is okay so this again this is just a quick e um if
18:28 the star is filled it means the image is set to be featured if it's Hollow like this then it's set to be it's not set to
18:35 be featured okay um now there's an upload button so
18:40 I added this because um so in the current version of total CMS if you go ahead and click on the image it will uh
18:47 open the file save prompt right so like this it'll open this prompt here um now
18:52 I prefer drag and drop but some people do like having the file browser now um
18:59 What I've Done instead of clicking the image when you click on the image now what it does is it'll open up the light box I think that's going to be super
19:05 useful um instead of having to click on this edit button okay so just going over here and clicking the image it allows
19:12 you to edit that image really quickly okay I think that is very very useful
19:18 okay but we still have the ability to have this upload button so that if people want to replace an image um with
19:24 an actual via the file browser instead of drag and drop this will work okay so
19:30 that's what that is um the clear cache so as you probably heard me talk about
19:36 total CMS 3 will create images on the Fly okay and for fun let's just go ahead
19:42 and um this is uh hold on let's just get rid of some
19:48 files so get rid of some confusion increase the size here
19:54 okay so here is the total CMS directory um that's serving up this website okay
20:01 it's all local okay um so if I go to image we'll see that there are images
20:07 here um here is the um I think this is the top image yeah that's the top image
20:13 uh so that's my image and then we go to New Image there that's the bottom image
20:19 Okay saw stored here now what what you'll notice is there's a there's a cach folder here okay and um this cache
20:26 folder will store BAS basically all the versions of the image you've ever created for of the of this this is the
20:33 or this image that we're looking at here is the original that was uploaded the original is never modified it is stored
20:40 as the original on the server okay um and then as you as you see later on when
20:47 we show you all the cool stuff you can do you can create different versions of an image and those versions are cached
20:54 that way the server doesn't have to recreate them all the time okay um
20:59 now in theory you should never have to clear the cach because if you ever upload a new image the cach will always
21:04 be removed okay um so that's a nice thing the cache will always be removed
21:10 um so you can guarantee when you are uploading a new image you will always get the latest version um of the image
21:18 okay should work great with cloudflare um and all that stuff should work perfectly okay
21:25 now but I wanted to give the ability I there has to be some cases where I didn't think about where we want to
21:31 clear the cache okay um again I don't think that's going to be the case but I
21:37 wanted to give you the ability to do that if you needed it okay um so all you
21:42 have to do here is just click this button and voila we get a little success check mark there and what you notice is
21:48 that cache folder is gone okay now I'm going to reload this page now this image is still visible
21:54 here because the that image was loaded um via the browser when I loaded and I
22:00 haven't reloaded but once I go ahead and refresh this page I can go ahead and refresh this load page uh so now I've refreshed this page and I have the image
22:08 and if we go back over here oops did I reload the
22:18 page that's
22:26 weird h interesting that's
22:33 weird how's that even oh uh hold on the browser is loading the cached version of
22:40 the image I'm just going to I'm just going to disable caching really quick there disable caching we're going to
22:46 reload the page all right now it actually loaded now if we go over here we have a
22:52 cash folder again okay so uh interesting that the browser was loading the cach
22:58 version uh the browser was loading a version of from its cache so it wasn't even going
23:04 to the server okay um but now once I disabled caching it fetched the image
23:10 from the server and voila okay we see that here is the image here now it's not
23:16 displayable here be because it's a binary file blah blah blah whatever but um there we go okay so that is the
23:23 clearing out of cache data which is super cool um and then also we can just delete
23:29 an image right so if I want to delete this image I can go ahead and delete that it'll prompt us hey are you sure
23:34 you want to delete this you say Okay voila it's now deleted okay and uh we
23:39 refresh page it's gone and if we look over on the server it's gone right everything is gone um now this is all
23:47 the the data for the particular image right um but uh but that it was the new
23:52 image file is gone so if we go ahead and let's go ahead and upload it again upload this one
24:00 voila go back here now we have the new image again pretty cool right super
24:05 slick I like it okay um let me see if there are any
24:13 questions is there a download option wouldn't be uh it would be the first time someone has deleted the original
24:20 file on their desktop and needs to oh that's a good that's a that is actually a really great option yeah a download
24:26 but a download button I like it um man this toolbar is going to get pretty big
24:31 but I'll I'll add a download button I like that uh let me go ahead and do that let me add that to my
24:44 list okay nice one I like that IR good
24:52 job um okay um
25:02 next up okay so last feature I I I was up till 3:00 a.m. uh last night working
25:08 on this so um and I haven't had time to really play with it this morning so um
25:14 it kind of worked last night oh no what happened here oh oh
25:20 interesting I have to reload the page for it to work oh look at that interesting all right um but so this is
25:29 the uh image Works Builder okay maybe I should just call it image Builder Okay
25:34 um and I think I need to make this light box bigger actually it's quite
25:46 small let's make it bigger one second give me a second guys we're going to go
25:52 ahead and uh we're going to make that bigger okay we're going in developer
25:58 mode a little bit okay so um that was no not that one we want to make this bigger
26:05 needs to be taller um there there's a lot of information in here we need to be able to see more of it so um let's just
26:12 go ahead and do that right
26:18 now man I need I need to make this a little bit smaller guys sorry it's
26:23 ginormous for me and that was the hold on one
26:35 second that is the image link
26:44 dialogue oh there image link dialogue um let's just go ahead and
26:49 let's modify the height of that let's see what height we need let's play with this really quick
26:57 um so it's cool if you guys didn't know you can go ahead in the in the dev inspector now I'm using a browser called
27:02 Arc um so it's a behaves a little bit differently than like Safari's Dev
27:08 inspector but it's basically the same so you can go ahead and um select an image
27:13 or select the the element that you want which is this dialogue right if you notice it when you click on the dialogue
27:19 it highlights the node um so I'm going to go ahead and let's let's change tweak
27:25 the height on here so let's do like height um what height is on here
27:33 now height is 60 VH let's just tweak that to see if I did like
27:42 80 90 VH but there's a Max height as well what
27:47 happens if we turn off the max
27:56 height I think I like that like just make it 90 90 VH probably need to do 90 SV
28:05 svh okay okay um so yeah we're going to do
28:12 that we're going to do uh I'm going to do dialog first off I'll teach you a little
28:17 bit something let's do it this way first 90
28:24 sbh ah that was not what I wanted
28:30 um and then I want to I don't want to Max height Max height
28:35 none okay there we
28:41 go let's build that all right so if I go ahead and
28:49 refresh this page and go into here okay why didn't that take okay um
28:57 it didn't take because of a something I I knew this was going to happen so I wanted to I wanted to do that on purpose
29:02 okay so I just changed my my CSS right and I'm not seeing the changes what the
29:08 heck happened so if we look here um in the Devon Spector we have the all the
29:15 styles that are getting applied to this and what you'll notice is the order of
29:21 these are very important so the top rules will always beat the bottom rules so basically if
29:27 you go all the way down to the bottom these are like the Styles applied by the browser right and then maybe it's you
29:33 know if we go up a little bit more then it's stuff by you know applied by the theme maybe or you know I'm not using
29:39 the theme here but um you know but if it could be the theme and then some other stack and then basically it just
29:44 compiles up right and the styles that are on the top win okay so if you look right here let's go over my code this
29:51 was the code right I had uh link image dialogue right this right here link
29:58 image dialogue padding zero bang important height and Max height okay so
30:05 and if we go back we'll see that here's that style right here but it's it's getting overridden
30:13 and you can tell it's getting overing because these height and Max height settings are crossed out I'm go ahead and increase the oh can I increase the
30:20 size of ah there it goes all right so here now we can see it
30:26 probably a little bit better okay so if you look here okay um the
30:34 height and the max height are crossed out and they're crossed out because that means something above it is is winning
30:40 okay so and if we'll see here there's height and Max height now why is this
30:45 rule winning over this rule okay and all comes down to in this case the CSS
30:51 selector okay so um this one is dialog. uh CMS modal
30:58 but this one is just image link dialogue okay so if we go ahead and look
31:05 at this dialogue the dialogue is the HTML element okay uh which is the light
31:11 box right so it's this guy right here that is a dialogue okay um and then
31:18 it has multiple classes it has a class of CMS model full and image link
31:25 dialogue now anything can have a class right but um in this particular rule
31:31 here I'm I'm only applying this rule to things that have CMS model that is a
31:37 dialogue if I add CMS model to a div none of these Styles will apply so um
31:44 all of these Styles have to be applied to a dialogue however in these Styles
31:49 image link dialogue is just a class that could be applied to anything right so in
31:55 this case this particular rule is more specific than this rule set therefore it
32:02 wins so easy fix for this is I'm just going to go ahead and add dialogue to
32:08 this dialogue okay let's build and we're going to go over here
32:14 and we refresh okay and if I click on that we'll see voila okay now my dialog is
32:22 nice and big the way I wanted it and uh yeah there we go a little bit of CSS
32:28 knowledge come on make my browser window bigger there we go
32:35 okay cool hopefully that helped a little bit okay so now let's play with the tool
32:42 okay so um this allows us to
32:49 generate images now we're going to have a stack for this okay uh in fact there already is a stack for this um but uh
32:56 it's doesn't have all the these options yet okay um but I wanted to give you the ability to kind of play around with
33:03 things um all within the admin area okay and so what we can do is we can say like
33:09 let's say I'm going to change this width to be um 300 pixels okay um let's just
33:14 do preview image oh wait uh turn that off hold on one second I developer mode
33:22 enabled uh go all right um all right so
33:28 if you notice here that image is now only 300 pixels wide because I changed
33:34 that here right we can go ahead and let's blur the image let's add a 10 pixel blur to that we're going to
33:41 preview that image and voila it's blurred it right let's say I
33:46 don't want the blur I want to have pixel8 let's do a 15 Boop and there's a pixelated version
33:54 of the image right so we can kind of play with a lot of these um you know if you wanted to change
33:59 brightness or contrast or gamma I think I'm going to maybe move blur and pixelate up because I think those are
34:05 going to be more useful um something I actually want to do today uh while we're on the live stream hey you'll notice
34:11 that all these Help The Help text is is all the same um I won't bore you while
34:18 you watch me fix and type actual proper help for all these um during this stream
34:23 but uh that's something that obviously will get fixed okay cuz brightness isn't the width of of the image right um but
34:30 yeah brightness and I'll probably have to make sure that we have some sort of of um Min and Max options here like
34:37 brightness breaks it for some reason I don't know what I did with brightness but um yeah it brightness brightness bro
34:44 breaks it let's just preview that image okay contrast works so I think contract feed did like 10 or let's remove
34:52 pixelation um preview uh well increase it by more I guess 50
34:59 there we go gets more contrast um oh maybe I should make these sliders I
35:04 don't know may maybe in the help I I wanted these to be text boxes so that they're they're kind of um you know
35:11 quickly type and maybe I'll I'll provide some data in The Help under each one
35:18 about the values I don't know um gamma that is that's kind of a crazy one if
35:23 you do like 50 on that too it's like what is that going to do
35:32 I don't know there's a sharpen two somewhere okay but anyway um so as you
35:37 see you can kind of create all kinds of stuff now something I haven't played around with for a while is the waterm
35:43 marking here let's go ahead and uh let's let's play with this why not um we got I
35:51 got a little bit of time not too much
35:56 um let's let's just see if this works um so Watermark um I need to actually create a
36:04 watermark here okay let's go ahead and I for I'm not going to try this
36:10 right now because it'll probably take me a while to remember exactly all the details of how to implement it but
36:16 essentially you'll be able to upload an image that is a watermark um and then you uh Supply the the ID the CMS ID of
36:26 that Watermark here uh and then you can apply the width and the height and um and positioning of it
36:34 okay and then that Watermark will get applied to the image so it could be something that goes across the image it
36:39 could just be your company logo um so you can dynamically Watermark images on the Fly really really really cool okay
36:47 um something that I did want to do uh while we are here is play with the cropping here now um I didn't I didn't
36:54 set this with any options so let just quickly do this
36:59 that hold on I want need I want to remember the options and I had a let me
37:05 open
37:10 up give me a second here let's go into
37:17 desktop down here I needed
37:23 no ah this one
37:47 he uh IR when you had an ex a question in addition to Robert's suggestion above did I miss Robert's
37:53 suggestion I didn't see it oh oh do the pallet items have unique identifier that can be referenced
38:01 um essentially it's just the order um so it's you know uh color 1 2 3 4 basically
38:08 um I'll I'll make sure we have examples of how to access those um but we will be
38:14 able to access them okay from The Twig okay I don't want to dive in that today but so there isn't actual names to them
38:21 but there are numbers it's basically just the order okay um so in addition to
38:26 Robert's suggestion above how about saving a set of image settings so we can
38:32 reuse it on other images something for two save a set of image settings I don't
38:39 know what you mean Irwin by saving a set of image settings um if you mean uh uh basically
38:46 pre-made sets of this already possible in total CS 3 okay I'm not going to show
38:52 that off today um and it definitely is an kind of an advanced op option
38:58 basically where you can create pre-made configurations of these and apply it to an image okay already
39:05 done so yeah if that's what you meant it looks like yes that's what you meant so I already thought about that and already
39:13 done there isn't a UI for it though it's kind of a a configuration um so
39:19 definitely possible you'll be able to let let's say you know you'll be able to create a a SI a settings for um
39:28 thumbnail okay and your thumbnail setting is always you know 400 pixels by
39:33 300 pixels with this brightness and this contrast and you can and then basically you can then apply then you can reuse
39:40 that on any image which is pretty cool okay I'm probably not going to have any UI for that um but uh there'll be a
39:48 configuration file that you can add those to um and it's should be pretty
39:53 simple okay so yes already done okay uh what was I working on oh yeah I
40:00 wanted to add crops okay and what I'm going to do here is um so this is currently a select box I actually want
40:09 to change this to be a text box um just for now um so let me go ahead and find
40:16 that
40:22 page where is it
40:28 oh under admin image here it goes okay um so this
40:35 was filt it's filter seriously that doesn't make sense oh
40:43 fit good thing I that's fit okay um oh
40:50 wait oh no that is that's the filter setting uh
40:59 um B but this one I want to make it an
41:04 input um we're going to make it text so I could just type it out
41:14 um crop crop the image okay there we go because I want to
41:20 test this focal point thing cuz now that I have a UI for it I tested like in theory and it it did work but now I have
41:26 a UI for it so it' be really fun to play around with this thing okay so that's changed we go over here if I refresh
41:35 this click on this all right that's now a text box right so basically we can do
41:41 things such as um uh let's just do crop so if I just do
41:50 crop okay and if we set this to be uh 400 by 400 crop
41:57 preview all right boom okay so it created this on the Fly okay now let's
42:03 start playing around with this okay so this is okay this is exciting so um as
42:09 you see that created a a cropped version right but now we we can do things such
42:14 as hold on let me look at the other options I have I think it's uh crop left here let's do crop
42:22 left right and preview okay now both of those like that's better we could see
42:28 the whole van but like it's not like perfect you know what I mean so like for
42:35 this particular image what if I wanted to have a square cropped version of it but I wanted it to be
42:42 proper okay so uh what I can do is we're going to use a feature called focal
42:48 point where it will if I set uh this to be focal point focal point okay um it will crop
42:58 the image based on the focal point now by default this image has a focal point of 50/50 right in the dead center of the
43:04 image and that cuts off that van okay so let's go ahead and tweak that focal point so we're going to go over here I'm
43:11 going to go ahead and let's go into the focal point and let's move the focal point like right
43:17 here okay I'm going to save that and then we're going to go into
43:24 here and uh let's preview the image again voila
43:32 dude here here got do oh yeah oh yeah happy
43:39 dance that work dude that work great out of the box check that out I moved the focal and
43:47 for fun here let's just go ahead and quickly we're going to do that again right so let's uh's change the
43:53 focal point Ju Just to just to illustrate we're going to move it over here okay we're going to save that we going
43:59 to go back over here going say preview image and voila it obviously that's not
44:04 what we want right but um it just proves that it that crop follows the focal
44:10 point okay so focal point over here and the focal point is going to be the
44:16 center of let's say a square cropped image okay so there we go we're going to
44:22 save that and uh go here go back voila check
44:28 that out dude that is a maze balls so
44:34 good so good man that is really good guys like I
44:42 don't know anything else out there that does that like that's very
44:50 good wow so cool um we can do cool things such just here let me act um man
44:56 I thought that was not going to work at first like you know man I love when things just work um so let's add a
45:03 border uh we're going to do like I don't's I have no idea what this is um so border it's kind of a funky option
45:11 where you supply three different values you supply the width of the border the color of the border and the method um so
45:19 let's go ahead and just preview that and that basically what that does I'll admit this is kind
45:25 of me okay um because this is adding a border to the image itself now for the
45:33 web normally we're going to add a border with CSS that's most more than likely what you want okay um and there's also
45:41 background color here background is let's that's probably useful if you're doing like pngs okay oh actually
45:48 something I need to add here is the ability to customize um the output format okay so that uh you can say I
45:56 want this to be PNG or a JPEG or a webp or an avif or so on and so forth right
46:02 uh because we can dynamically generate versions of images um in different formats so um if you're using a
46:09 transparent PNG or transparent uh WP um although I haven't tested with a
46:14 transparent WP that'll be interesting test uh if you supply a background color if I if I do this now if I just
46:21 do white white okay um you're not going to see it because
46:27 the jpeg fills the entire image right so it doesn't really make sense okay um so
46:33 I I'll be honest I don't think the background and Border they were options for the image
46:38 manipulation tool that I was using and they were easy for me to add so I added it um I'm I'm just I'm not sure how
46:46 useful those really will be I don't know um so there we go water marks are going to be cool though I definitely don't
46:52 want to dive into that right now um yeah but maybe you know it soon we we'll look
46:58 at that um it did work at at one point so and I haven't changed that code so it
47:04 should in theory still work but hey Murphy's Law okay um anything else you
47:11 guys want to see I'm I'm pretty I'm pretty excited about this um here one thing I wanted to do um just a little
47:17 bit of coding if you wanted to see before we go something this was a
47:23 drop down box before okay and um I wanted to change this to be a kind
47:31 of a mixture of dropdown and text boxes okay um and you you you can actually see
47:37 I use that I don't use that here I use that somewhere let me preview this
47:43 page right it is oh it's this one okay so um this border um I can type whatever
47:52 I want into this box right however if I click on it you'll see that there's options here as well okay and if I click
47:59 on that it'll prepopulate the text field with that option okay so pretty cool and as if you
48:06 notice as I type if I do like 20 it'll filter down this box for us okay so
48:12 pretty cool um I like that um I wanted to do that uh I wanted to kind of create
48:17 that field here because there are other options here if you do like here if I do um
48:24 instead of focal point I'm going to do crop Dash I think I got to it's been a
48:30 while since I I built this aspect of it but if you do 5050 I think you can dynamically crop yeah so like if I do um
48:42 2550 there we go so I mean there are ability if you don't want to use the focal point you can like dynamically set
48:48 crop points um via this tool the focal point just makes it chef's kiss because
48:54 you can set the focal point for every image and then use the same um sizing templates for all the images okay really
49:02 really really cool okay um another thing here is uh that I haven't built yet is if you
49:10 haven't seen total CMS I think I showed you a little bit of The Twig macros um basically what this tool will do is I
49:17 want it to be able to give you the twig macro that you would use um to generate
49:23 this version of an image on anything okay okay um so yeah um this will
49:29 generate a twig Macro for you as well um I just I I was too tired last night to
49:34 do it so um that's on this afternoon's um schedule is to is to build out that
49:40 little twig U macro Builder um so you can change all all your settings here click preview image and if that's what
49:47 you want you can quickly copy that macro okay so there we go so yeah we can do
49:54 and we can do like 20 let's do like 30 let's see if we can get this close to a crop Point nope not quite there
50:03 40 too much of course
50:08 35 so as you see I mean you this does work um but again this is this setting
50:15 here would be only for this one image because other images have different focal points right so yeah um while
50:23 while this is cool the ability to just do focal point here is
50:31 amazing like really good that's so good man um okay but what we were doing is I
50:38 wanted to add the that data list feature to this so I I could have a pre a set of
50:44 pre- uh done um examples but you can still type whatever you wanted okay so
50:50 let's quickly do that um and good thing I made this a
50:57 a text box because we need that okay and uh the way that's done um is through
51:05 something called a data list let me just show you what that looks like in the code okay so um you have a normal text
51:12 input okay and then you have a data list okay um and then you assign this data
51:18 list to that um let's see via oh via the list option
51:27 okay so I have a data list that has an ID of ice cream flavors and then here I
51:32 just do list equals ice cream flavors right so let's go ahead and let's quickly Implement that so I'm going to
51:38 go ahead and we're going to do this so over here
51:45 I'm going to do um I'm just going to add this into here
52:06 and we're going to do um we're going to make this crop
52:14 options okay and um we're going to do crop hold on one second let's see
52:22 it's crop and then top left top right crop top okay
52:30 um top
52:37 bottom I think it was top left top right top left top
52:43 right left
52:49 right oh uh I'll do top left bottom left
53:00 top right oops what the heck was that I did not want to do that oh I forgot that was
53:07 a feature okay uh bottom right okay probably better to like sort
53:14 all these crop top top left right uh then we have crop left crop
53:23 right
53:37 here actually yeah let's do crop bottom top top bottom left right and then top
53:45 left top right bottom left bottom right I think that's all the options and then we have focal point okay and so we
53:54 have focal point and then I'm going to add an
54:00 option just so that we know that it exists of like crop Das
54:05 50-50 okay just so like the template is there um so that we give a hint of hey
54:11 something like that's available okay
54:16 um and then I need to be able to take this and assign it to my input which is
54:23 this one right here now this is using um this is all twig and I created my own
54:29 little twig macros up here and um I'm going to add um list here
54:38 okay and then in here I'm just going to go ahead and down here we're going to do
54:44 um if list is defined list equals list perfect thank
54:52 you y is I can just do oh
55:00 no the syntax highlighting is funky there if list is
55:07 defined let's see if that works
55:14 boom that's there it is let refresh reload
55:20 the page and we go into here
55:27 and I broke it somehow I think it's just if
55:32 list oh I and I didn't actually pass the list anywhere hold on what's going on
55:42 here oh has a missing curly brace there
55:51 haha I think I need to if list that's it if list add the list but I need to be
55:57 able to go down here and Supply the list so
56:10 um and we're going to do crop
56:16 Dash options that should do
56:22 it all so now we go and refresh here
56:27 here and now if I go to crop boom so now we have all of those options so I can go
56:33 in let's say again I can just click focal point and it will work okay um
56:39 well we want to crop um you know 400 there crop based on the focal point
56:46 I can also then go um I can delete that and then do no I want I want crop 50/50
56:52 but then I can edit that text right so I can do you know four 4050 or 4040 right
56:59 and voila nice all right cool what do you guys
57:05 think of that interface um I think it's I think it's a nice interface uh because it allows you to select a a value but
57:12 then also allows you to type in something um especially for values like this where it's like um you can have
57:18 pre-done examples where it's just crop top crop bottom focal point then you can also have something custom like this
57:25 which then you know it would be impossible for me to create options for every possible one just doesn't make any sense so um yeah pretty
57:33 cool and if you guys didn't know that's all available inside Foundation right
57:38 now okay um because here um if you didn't know this is found this is a form
57:44 built with Foundation 6 um here's text input okay and uh I have a datal list
57:50 stack already so in data list you can add in all your options okay
57:57 um and then you can uh in the text input you go ahead Supply data list when you
58:03 check that you give it the list name and obviously that needs to match up with the list name that you've given here in
58:10 the data list okay so pretty cool if you like that feature you can have it now um in
58:18 your forms and again it's kind of a mixture of a select box and text Fields
58:23 okay we don't have the ability to style the these okay this this drop down um
58:29 every browser kind of implements it slightly differently I think Safari's looks the nicest um I do like safaris I
58:35 think it looks decent here let's let's preview this in Safari really quick so you guys can kind of
58:43 see um
58:48 sari okay and if I click on that click on here there's you know I think Safari
58:55 has done it the best it's just nicer it's kind of below it kind of gives you a Vibe of the select box um so yeah I I
59:02 do think Safari implemented it better and again if you start you know you start typing it'll
59:11 dwindle that list down okay pretty cool um and this data list you can
59:19 generate the options in here with feeds or total CS all kinds of stuff so you can dynamically generate these as well
59:25 um or manually do it so there we go um okay let's see um I had a client who
59:32 had a huge issue cropping the main image in order to get her hero image to display correctly on the main blog page
59:39 it turns into a hero image every time I see her she asked why the new cropping feature um was in the works is coming oh
59:47 there well there you go Dave
59:52 um see it looks very nice this will be great sweet okay guys
59:57 um I think I I kind of did everything that I wanted to do today um I I didn't get too much coding done um but I found
01:00:04 a couple bugs so thanks for helping me find those and yeah I'm excited to uh get this in your in your hands what do
01:00:11 you guys what do you guys think of it so far I think you guys mostly like it um if you have any further ideas let me
01:00:17 know in the community just uh yeah comment on the the post for this live stream and if you have any more ideas or
01:00:24 things that you'd like to see um things you think I've missed um yeah I'm I'm still hoping it's the
01:00:32 24th uh let's see what what's the what's the timeline looking at um let me open
01:00:37 up my calendar here so if I have the image stuff done
01:00:43 by tomorrow um I I won't be uh for by the way I won't be at the hangout on Friday um for those that you are joining
01:00:51 the Hangouts um I don't maybe I can join remotely but I'm going to be away U white my daughter has a volleyball
01:00:57 tournament in Nevada so we we're driving over to that um on Friday um so yeah let's see if I get
01:01:05 this done by tomorrow I think you know I can get the remaining features I have done finished by
01:01:12 then that leaves me I wanted a beta I wanted to get a
01:01:18 beta to the pre-sale people that by the end of the month that was my goal the
01:01:23 end of the month is now next Tuesday um I I do think I'm close Okay um but
01:01:30 there are a few other things I need to get some documentation done before so you guys can actually know how to use a lot of this stuff especially like around
01:01:36 twig um
01:01:42 so it it'll most likely be by May 10th okay
01:01:47 so I'm gonna I'm gonna miss my deadline uh I really wanted to say the beta would be out by the end of the month and I've
01:01:53 been seriously busting my balls to make that happen um but it doesn't look like it's going to happen by Tuesday which is
01:02:00 the end of this month um so yeah I might leak and I don't want to say the
01:02:06 third yeah I think by the 10th I'm comfortable by saying I we'll probably have something in in y'all's hands that
01:02:13 uh have uh graced me with your pre-sales of total CMS so um yeah if you attended
01:02:20 the summit and you uh in the goodie bag there is the ability to have that pre-sale um once I release this this
01:02:29 beta to those users um I'll that that particular pre-sale offer is going away
01:02:36 okay so um that pre-sale offer it does have a time because it's a really good offer okay really good so um yeah that
01:02:45 offer isn't going to be available any longer the pro most likely the following beta after that um will probably open up
01:02:53 to a wider audience um and they'll have a a different deal okay um I I'll still
01:02:59 have some you know the ability to purchase total cms3 licenses um at a
01:03:04 discount if you want to support the development of it it's still it's pretty far long but I still have a lot of stuff to do okay so um the probably most
01:03:13 likely beta 2 or beta 3 depending on how things look um will will be uh more
01:03:18 widely available um and I'll have some pre-sale options for non-summit attendees at that point okay so um yeah
01:03:25 thank thank you very much guys um I appreciate it and uh yeah I'm really I'm really
01:03:33 loving how total cms3 is coming together uh I think it's man it's finally seen
01:03:41 like I worked for years on the back end on and off right not dedicated uh because Foundation 6 and all kinds of
01:03:47 other stuff came up right um but finally having U some sweet UI to it um and
01:03:55 actually using it is really fun and um it's so much better than total seams one
01:04:02 I think um it's definitely more powerful it's faster um and has a lot of really
01:04:08 cool features we've wanted so I I'm excited about that it also has I won't go all it has some things I've actually
01:04:15 removed some features that I think were bad in total cms1 or are different in
01:04:20 total CS 3 I should say Okay um so yeah thank you very much everybody uh
01:04:27 hopefully we'll see you on the hangout on Friday I may show may make a quick
01:04:33 appearance say dip my head in and say hello but there's always going to be tons of guys and ladies there ladies
01:04:41 don't forget you can join too right um and we we got some great ladies that join every now and then and uh but yeah
01:04:47 it's a lot of fun um join the Hangouts on Fridays if you want to become a
01:04:52 better Weaver that is the place to be th% okay I cannot stress that enough um
01:05:00 so yeah get hours of time with your fellow Weavers that are pros and doing
01:05:06 this all the time you can ask questions don't be scared to join and ask questions or just join and be a fly on
01:05:12 the wall it's okay there are people that have been flies on the wall walls for years and all of a sudden they blossom
01:05:18 and everything just clicks and now they're making amazing things and freelancing on their own on the side um
01:05:24 or full-time so anyway okay that's enough thank you very much guys have a
01:05:29 great rest of your week and go out there and make your websites great bye