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