Transcript

00:09 images in total cms basically we have two options for images inside total cms we can either manage a
00:17 static image so like one image okay and basically what happens is you'll have an image drop area in the admin place
00:24 and if a customer uploads a new image or drags and drops an image on there that image will be used wherever you use that
00:31 image in the content area uh and then if the customer drags another image onto there it will replace
00:37 the one there and that new image will be displayed on the content side right now obviously insert all disclaimers
00:44 about browser caching and if you're using cloudflare it caches the image and all that jazz right so
00:50 um for a while i think most people kind of get that now but um for a while it was like i uploaded a new image and i don't
00:58 see it right away in my browser and um that was kind of the support craze for a
01:03 while for us and uh you know refreshing the browser or you know quitting the browser restarting it
01:09 launching it kind of you know kick-started things or if you're using cloudflare make sure that um
01:15 there are some tricks you could do with cloudflare to um disable caching of images in the cms
01:21 um i don't know um there that that's kind of kind of defeats the purpose of using
01:27 cloudflare kind of because cloud4 is cool because it does cache the images so um making it cache you know not cache
01:34 something is is not really all that cool but you can do it now obviously you can also go into cloudflare purge stuff but
01:40 that's not really great for your customers because they're not going to know how to do that um but anyway
01:46 let's jump in and open the project file that we've been working on
01:52 and share my screen everyone can hear me just fine just a
01:57 quick uh just make sure everyone can hear me let me open up the chat room make sure
02:02 everyone can hear me yes awesome audio is good thank you let's
02:08 share my screen okay great so let's go ahead and let me minimize
02:15 that window okay open this file here we go
02:29 i guess i'll leave that there okay
02:40 so images in total cms are really easy to do um i mean um
02:47 it's just simple right uh oh wait oh that's content oops okay on the content side i need to add a
02:54 admin stack boop okay
03:02 all right let's let's be good and we'll add this to
03:08 let's do a two column over here so we can do boop let me do images on that side
03:21 okay
03:27 so here i am on the admin uh page that we've been using and i've added an image
03:33 stack an image admin stack to the page okay
03:39 um let's go ahead and call this uh the cmsid we'll just call it kind of single for single image
03:45 obviously you can change the placeholder image uh and this customizes this little uh you know tagline below the uh the
03:53 cloud symbol okay now right now you have to choose whether or not a jpeg or png is used
04:01 okay so most of the time you're gonna want a jpeg that's probably primarily what
04:07 we're gonna be using right um the reason you'd use a png is if you know it's for
04:12 a logo that excuse me for a logo that maybe you need to have transparent background right
04:18 now if you have if you set the image type to be a jpeg
04:23 and you the customer so you upload it you set it as a jpeg and the customer uploads a png
04:30 what will happen okay well basically what the cms will do is it will convert it to a png so if it's a or
04:37 it'll convert it to a jpeg right so if you have the image area set to be a jpeg
04:42 and the customer uploads a trans a png with transparency okay basically what
04:48 will happen is all the the parts that are transparent will will be colored black
04:54 so um i think i need to change that i think it would probably be better if i color them white or if it's possible
05:01 maybe give you guys that option okay um but that is a limitation right now um
05:07 it hasn't really caught many people off guard but um yes i agree white would be better thank you mike
05:13 so um yes if you upload a png with transparency and you have it set to jpeg
05:20 it will convert all those transparent pngs since jpeg doesn't support you know
05:26 transparent pixels it needs to color them so right now colors than black um i
05:31 think maybe in the next update i will switch that to white because i think white is
05:36 probably a better choice okay back to uh
05:41 screen okay so next was we have preview size um this is
05:49 the preview size inside the admin area okay so um you know what when you load the admin
05:56 area do you want to load the original image here do you want to upload or view the thumbnail or the square thumbnail
06:04 okay that is purely up to you um it's set to the original image if if your
06:11 area that you're showing the image is kind of small you could probably go with a thumbnail or a square thumbnail okay
06:16 we'll we'll we'll see what the differences are that in a little bit we can play with that the alt tag okay
06:23 this is pretty cool um so by default you can have user defined okay which means
06:28 the user can define the alt tag for themselves okay inside the admin area
06:34 which is the default you can also set a default alt tag so basically this would be the all tag that
06:40 gets applied to the image before the user actually changes it themselves okay so it just gives you the
06:46 ability to create a default alt tag now this is really cool i think i added this in 1.3 as well i don't remember now
06:53 but you can actually dynamically build an alt tag based off the metadata
07:00 inside the actual jpeg file itself okay so for instance let's say you're a
07:07 photographer and you apply um you know common you know meta tags to you know the title
07:15 okay the caption and the copyright okay and then you can also use the file name the actual file name of the image
07:22 okay the original file name so um
07:27 you can insert any of these or all of these okay into the alt tag so basically if i
07:34 select all these boxes it's going to take the title from the metadata the file name the title the caption and the
07:39 copyright and insert all of that inside the alt tag and you know obviously you can turn on and off any of these so if you want just
07:46 the title you it'll then take the title of that image from the metadata and
07:52 insert it now this is only for the default afterwards the user can go in and edit
07:57 that alt tag right so this is just a way of defining a good default for image tags or i'm
08:04 sorry for image alt text okay so it's it's a really cool feature um and then it is it is a nice feature that the user
08:11 can actually go ahead and edit that afterwards inside the cms
08:18 i see a bunch of chatting going on let me see what's going on okay great
08:26 next is image and optimization okay so
08:31 here we can by default uh the cms will automatically
08:38 optimize the original image and generate images for you okay so if you were to
08:45 uncheck this optimize original image essentially what it does okay is it
08:52 takes the original image and plops it directly in the cms it doesn't do anything to it
08:58 it does nothing okay so that means even if the customer uploads a 10 megabyte image
09:06 okay that 10 megabyte image will make it into the cms okay
09:12 i don't recommend that like i i've added this feature because enough like you know photographers that really
09:18 want to make sure their untouched original image is in the cms and it's
09:23 it's being used right because they they've done all the optimize they have the tools and the knowledge to optimize
09:28 the images beforehand they don't want the cms to further optimize it right
09:34 so i recommend for most use cases you have original optimized original image
09:40 turned on okay if you you or your customers really know what you're doing um and you're sure that you're not gonna
09:47 upload a gazillion megabyte images and you know kill your website performance
09:52 you can turn it off right this gives you enough rope to hang yourself basically right so that's cool okay
09:59 so on top of optimizing the original image you can also generate thumbnails okay
10:06 which is on by default and basically what the cms will do is it will create two thumbnails for you
10:13 okay it creates a a proportionally scaled down thumbnail and a square thumbnail
10:20 so basically what that means is um the it'll scale the original image down
10:27 okay and create a proportionally resized version of that and then it will create a square cropped
10:34 thumbnail now there is a setting that allows you to control when it creates that square
10:39 crop where that crop is taken from okay so i'll show you in a setting in a
10:44 second where you can determine whether or not it takes it from the top the middle or the bottom of the image
10:51 okay if it's a portrait and if it's landscape it'll be if it's on you know the left center or right of the image okay so
10:59 let's look at that setting right now but um i just want to kind of show you visually what i meant by that
11:05 so here the resize logic auto okay and then here you have the control to
11:12 for portrait cropping top middle bottom landscape is left center right okay now
11:19 this resize logic okay i i would set it to auto um because basically what that means is
11:25 it's going to use the portrait mode for cropping portrait images and landscape
11:32 mode for cropping landscape images you can force it to always use portrait or force to always use landscape
11:39 but i'd recommend leaving it as auto it works pretty darn good right now okay
11:45 now these settings down here are for optimizing the uh sizes of the images
11:51 that the cms generates for us okay so by default the original image will be
11:59 scaled to 2000 pixels okay so it'll be scaled down so if the
12:04 original image is smaller than 2000 it won't scale it up to 2000 pixels but if someone uploads a 5000 pixel image
12:12 it will it'll shrink that down to be 2000 pixels wide now if it's a portrait
12:18 image it'll be 2000 pixels tall but the landscape image it'll be 2000 pixels wide that's kind of where this resize
12:24 logic comes in right so on landscape images it'll shrink it with but based on the width on portrait
12:31 images it'll base it off the height okay and if you if you reset resize logic to
12:37 portrait it'll always base it off the height and the landscape it'll always resize it
12:42 based on the width okay most of the time we want to have it auto so that
12:47 on portraits it's based on the height on with our landscape it's based off the width
12:53 okay so image max again that's 2000 pixels for the originals default you can change that to be whatever you like and the
13:00 image quality is the jpeg compression now this is used for not only the original image but also the
13:05 thumbnails okay so this is the you know when you export from pixelmator or photoshop that little slider that
13:12 allows you to adjust the quality of the export okay this the same exact setting here okay
13:19 um so it's defaults 85. i did a lot of exports i thought 85 was
13:24 was a pretty decent export where it gave you a a decent you know quality file that really
13:30 couldn't be you know really seen the difference much on most images and it gives you a nice
13:36 smaller file size as well so play around with these to be what you know to configure them to what you want i think
13:42 85 works pretty good but you might think differently um and then here we go for thumbnail max
13:49 okay so this is the for the proportional thumbnail and then the square max how how big do you want the square thumbnail
13:54 to be okay now on top of you know resizing images
14:01 automatically for customers we can we also now have upload validation rules
14:08 okay so this basically tests an image in the browser for various conditions
14:14 before it's ever even uploaded to the server okay so what we can do is we can say
14:22 um if you turn on mode okay upload root mode you can say i only
14:28 want i want to make sure that the customer only uploads a landscape image here
14:34 if they were to upload try to drag in a portrait image it would give them an error and they would they wouldn't be
14:40 allowed to upload a portrait image okay same thing if you you know if you're say you know you have to upload a
14:46 portrait image here they won't be able to upload a landscape image so
14:52 that's convenient because a lot of times when you're when you're building certain layouts
14:58 like some layouts are just made for a landscape image right or you know it
15:04 really looks best if you have a portrait image here so this is again getting to the point where
15:10 you know you design the layout of a site and and basically we're making the cms
15:16 control what the customer is allowed to do right so you know if you you build a
15:22 layout you're like man this looks crap if a customer uploads a portrait image make it so they have to upload a
15:28 landscape image right um it just makes their website look better right so um
15:34 that's that's a good uh a good layout rule to have for uploading images
15:40 um next is size so this is uh you know actual file size so you can say you know customer isn't
15:47 allowed to upload an image that's larger than 500 kilobytes okay or you can change that right to be whatever you
15:53 like and then next is you can have a minimum and maximum height and minimum and maximum width
16:00 okay so the minimums is actually a good thing right it's not only just making sure the
16:06 customer isn't uploading a 5000 pixel image but maybe you also don't want them to upload a 100 pixel image
16:13 right so it kind of gives you a the ability to you know make sure that the customer is
16:19 uploading you know proper images within reason okay by
16:25 providing a minimum and maximum value for what they should be uploading
16:30 okay
16:37 so that that goes through all these settings for images for all for an image stack okay
16:43 let's go ahead and and test and upload an image now you probably have noticed if you've if
16:50 you used rapid weaver or total cms inside rapid reaper at all before if you have an image
16:56 okay oh i'll be damned oh wait what happened here
17:01 oh you cannot upload it inside rapidweaver okay it won't work actually before you
17:07 wouldn't even you couldn't even drag and drop it into rapidly or so i'm actually surprised that actually worked at all
17:12 but if you preview in a browser okay traditionally this has this has
17:18 worked um oh
17:23 what happened what did i do that's weird
17:29 i'm running a beta of rapidweaver right now
17:51 what the heck let's uh let me publish my file
18:15 ah i'm gonna remove that protect stack
18:21 actually i'm gonna do that right now just for today i'm gonna delete that protect stack so i don't have to keep logging in okay
18:30 so oh there it goes
18:37 okay could be something with the with the latest betas in in in wrap your seven five um but uh so we
18:43 saw i dragged and dropped my image um and then on the content side uh oh
18:48 editing alt tag right so um when it once an image is uploaded and
18:55 you hover over it you'll see that there are um in the admin area a few things that we can do okay this is called the
19:02 action bar it's what i call it in my code okay the first one is a little tag that
19:08 obviously allows us to edit the alt tag information for this image okay
19:13 um and um so this was you know uh this was
19:19 actually from a total cms hangout that we did when i launched uh total cms
19:26 oops
19:31 so i'm gonna save that so now the alt tag of this image is set to total cms
19:36 hangout okay um this image here or a bit this button i
19:43 should say okay um opens up a light box that gives us a few things
19:49 a it allows us to see the full okay warehouse image url to an image
19:57 the the warehouse url to the thumbnail and the actual url warehouse to the
20:03 square thumbnail okay so if i were to copy this and just put that in the browser right you'll see that is
20:11 um the original image right and if i were to do uh dash th
20:17 that would be the thumbnail okay and we can look at the square thumbnail generated
20:24 and there's the square thumbnail that was generated okay now all these all these versions of the image were
20:30 generated purely by me dragging and dropping the image into this admin area okay
20:36 now below in this light box it actually displays what the original image is okay obviously it's scaled down a little bit
20:42 but um it shows you what that image is the reason for that is um let's say for
20:48 in this preview if you are showing remember in rapid ever um in the settings here i said that you could do
20:55 um you could where was it oh preview size let's say you set that to be square
21:00 thumbnail right um you could still see and this the square thumbnail was displayed here if
21:07 you were to click on this you could still see the original image um what it looks like the non-thumbnail version
21:13 basically okay so um that's convenient and obviously this trash can will delete the image so
21:19 if i go ahead and delete that i it it'll confirm you are you sure you want to delete it i say yes
21:25 and it will delete that image okay so
21:30 um again if i want to go ahead and look it should there so i refresh that image
21:38 no longer exists so 404 okay on the server that url doesn't exist
21:43 okay now remember earlier today i was talking about how the cms backs up data right
21:51 um so if we go to back to backups
21:58 okay we'll go to image single and here we go
22:03 we'll see that now i have um a full backup of this image
22:09 and if i were to you know preview that that there's my image and i i could download that and restore it by
22:14 uploading it back into the cms um so and again these are date and time stamped and it saves as you see it does
22:21 save the thumbnail and the square thumbnail it doesn't really need to you can just download the original and re-upload it right um and it also saves
22:28 uh this.cms file that is the alt text okay and so the alt text is also version
22:34 controlled uh and backed up into the cms now if we were to look into the image
22:40 directory we'll see that there's nothing there because i deleted the image right if you remember i did delete the image so um if
22:48 we go back into um into here actually let's go to safari and let's
22:53 re-upload an image so if i were to re-upload this image here
23:00 okay and then i go to my browser and i refresh okay we'll see now i have
23:08 okay the image okay as well as the thumbnail
23:13 and the square thumbnail right so that's really cool um
23:20 it kind of gives us the basics of how to upload images it shows us where in the cms data folder there live right cms
23:27 data and it's an image so it's going to be in the image folder and then it's going to be named inside
23:33 that folder it's going to be named the cms id okay so here i i gave the cms id of
23:39 single so this is single to jpeg although this woman isn't single she is my wife she is very happily married um
23:45 um so uh yeah that and it creates the the
23:52 thumbnails and this is the alt text uh for that image
23:58 okay okay next up the content side so
24:06 we've done images actually while we're here um no we'll do content on images first
24:13 okay um let's go ahead on this page um let's go ahead and add an image into
24:18 this tab okay so i'm going to go ahead and let's add in let's go to the cms
24:24 content stacks okay and i'm just going to simply add in the image there
24:30 okay um actually let's go ahead and we'll add some layout here let's go
24:35 ahead and add a two column and then add that there and add the text over there
24:42 okay so uh this is the cms image stack the content side right now if we look at
24:48 the settings here we need to basically have it match okay the what we saved inside the admin
24:54 side uh there's a bunch of stuff going on in the chat room
25:09 okay um so in the image settings uh we need to
25:16 basically match it with what we have on the admin side so the image type here is just going to be image okay we'll go
25:23 over what gallery and feeds and blogs are in a little bit basically it allows you to um pull a single image from a
25:30 gallery or a blog post and display it as an image on the page okay um but in this case we just want to
25:36 display that single image that we created so the cmsid was single uh the
25:42 image type was jpeg um the missing action this is useful because let's say um if a
25:50 customer deletes an image you can actually um hide the image so if they delete it it will
25:56 be hidden on the content side or if they delete an image it can actually show a default image
26:02 okay now in this case you need you need to define a warehouse image um you could get that warehoused image url from the
26:09 cms if you wanted the default image to be manageable by the cms as well okay but um you can just go in the admin area
26:16 where i showed you you can copy those urls right you can uh you know copy those urls and put that as the default
26:22 image um but if you do nothing and the image doesn't exist it'll just look like a regular broken image right it'll be a
26:29 404 on that image but if you if the image is
26:34 if you allow the customer to delete an image and have it not show on a page you can just say missing action equals hide
26:41 and then it will actually hide the image um from the thing right from the content
26:47 the alt text the import via total text so basically what that does is it'll take in the alt text that's defined in
26:53 the image that we saw okay or you can manually set an alt tag if you want
27:00 okay most time you're not going to manually set one though display do you want to display the
27:05 original image the thumbnail or the square thumbnail okay and then you can also set a mobile
27:10 image so for mobile first let's say you want to show the thumbnail on mobile and the original image on desktop you can do
27:16 that okay or maybe for your layout it makes sense where on mobile you use the square thumbnail which is kind of cool
27:23 right and then on desktop it uses the original image okay you can also auto light box things
27:30 so um if you click on the image it'll light box the image um for you okay you can have
27:36 that and you can also add a link to the image the next thing is kind of how to style
27:42 the images these next settings so right how do you want to grow grow to contain your wind to find a max width you know
27:47 width of the image so on and so forth right uh alignment options um and then borders you can add some borders to the
27:53 image you can also make it a circle image okay now the circle image
27:59 only makes sense if you're using a square thumbnail because you can't make
28:04 an image a circle if it is not if it does not start off as a square so that's why there's a little disclaimer here
28:10 says that if you want this feature you have to use the square thumbnail okay but it is a very nice option okay
28:17 um so let's quickly look at this let's go ahead and preview this
28:28 oh what happened can i set it up right
28:40 i wonder if it's looking for oh
28:47 haha oh okay
28:52 so i found a little issue that i did that i know a lot of a lot of people do um
28:59 rapidweaver normally puts a backslash or a forward slash at the end of your website address
29:05 um something i didn't cover actually at the very beginning of today is how important this website address is
29:11 okay and um normally rapidweaver adds a slash um in the next update whether or
29:17 not it has a slash or not i will add one um so but we have to have a slash there and that's
29:24 probably why my image wasn't working earlier actually
29:30 there we go um that makes a lot of sense now okay so here we have the portrait image as
29:38 you said as you saw earlier i had it display the original image uh on desktop and if we
29:45 go down to mobile it should use the square thumbnail right which is really cool i'd probably want to use a higher
29:50 resolution square thumbnail maybe but um i i like the option of having a square
29:57 thumbnail on mobile because especially if you're um if you're doing portrait images or even landscape right um it's it's kind
30:04 of square images are kind of the thing on mobile right so i'm using the square thumbnail on mobile works really really
30:11 well um i think i think it's great so anyway um
30:16 so that is that with the image stack i think we went over all of the available options obviously
30:24 you can add borders and like i said circle image if you want to see circle image let's go ahead and say i'm going to use the square thumbnail and let's
30:30 auto light box and let's make it a circle image right just for fun um now let's go ahead and
30:38 preview that in the browser and so there's my circle thumbnail and if i click on it i can get the light box
30:43 to the original image right now obviously again this is really small and i'm i probably you know for this
30:49 particular layout it doesn't look great because the image is very small but you get the drift where oops uh you can have
30:56 the the circle um as an image you click on it because i i clicked on the auto lightbox feature and the auto light box
31:04 to the original image which is really nice it's a nice little feature i like that
31:11 okay before i jump onto galleries i'm just
31:16 going to check out see if anybody has any questions
31:34 the bar doesn't appear okay so um the bar once you upload an image
31:42 excuse me finally uh let me preview the admin page again
31:52 so when you upload an image i'm going to go ahead and upload a new image
31:58 okay um oops i'll have to look into why that is uh
32:04 that's not working on in local preview because it should
32:13 okay so let's go ahead and upload a new image here
32:23 so it's processing and it's done okay so the action bar uh for an image it won't
32:29 display until you refresh the page um there's a lot of complex stuff going on
32:37 um with generating that preview and then uploading it and um
32:42 i have it as a as a request to to do that so that this bar shows up immediately even if you upload it it'll
32:48 show it um but right now it doesn't right now you'd have to refresh the page and then you
32:54 can access all of this stuff okay um so yes that is a known
33:00 issue for lack of a better word um that uh when you upload an image you can't access the action bar unless
33:08 you refresh the page okay so yeah thank you for pointing that out that is a
33:14 limitation right now
33:20 okay um so without further ado let's go ahead and jump into
33:26 uh galleries and let's look at galleries so i'm gonna go ahead and add in a
33:32 gallery here
33:39 uh galleries are pretty much they're almost identical to an image you just have multiple of them okay so in a
33:45 gallery uh let's just set this to see my study of gallery okay you have a placeholder you can set the max height
33:51 of the gallery so if you if a person has 100 images here the gallery that's in
33:56 admin area you can just scroll through it okay so i recommend you know keeping the max height something
34:02 alt uh is user defined but you can also do the image metadata just like in the images
34:07 okay uh and then just like we had on the image stack you can optimize original image and then you can also you know
34:14 define the the sizing for the original image and the thumbnails and the cropping position and
34:20 you have upload validation rules just like you do for the normal image stack okay so really the in the settings here
34:26 are um very basic or not basic but it's the same thing as the image so there's not much else new stuff to go over here
34:33 okay it's just all the same stuff from images just applies to every image in the gallery
34:39 now one thing you'll notice is there is you cannot choose between jpeg and pngs and the reason for that right now is
34:45 galleries only support jpegs right now um i i do plan on on trying to support both
34:51 jpegs and pngs but right now galleries only support just jpeg right now okay
35:00 so um let's just go ahead and uh you know i'm gonna create the content side of this and uh
35:07 let's go ahead and tab two we're gonna create a gallery
35:13 okay um oops i added the wrong gallery stack we need
35:19 to add a content gallery okay now on this side um it's pretty
35:24 straightforward as well uh you can have the image feed which is a gallery you can also choose from a
35:30 feed for so uh all the images from a feed all the images from a the newest blog
35:36 post or all of the images from a random blog post okay uh the cmsid that we set up in the admin
35:43 site is gallery um in the gallery view itself by default we want to show the square thumbnails or
35:49 you can show the actual you know proportionally scaled thumbnails you can say how many max images you want
35:54 to you want to display and then the sort order okay um newest first by default it will be
36:02 you can actually reorder these images we'll upload a few and you can see that uh shuffle will just randomly shuffle
36:08 the gallery around okay feeder featured image support we'll go over that in a second um in a little bit
36:14 let's look at the normal gallery first uh you can also add captions to the thumbnails okay and that will insert the
36:20 alt text as the caption okay uh and then here in the grid you can set
36:25 how many uh images you want per uh row uh for mobile tablet and desktop
36:33 and then you have some alignment options do you want to center align left the line images um you know the width of the
36:38 images and then um you know you can also do circle thumbnails which is interesting uh if you're using the
36:45 square thumbnail option just like you could in the image stack uh you can add frames to the thumbnails
36:51 okay so you can add like little frames to each one um
36:56 and then you can also provide some custom styles which is basically some styling on the light box okay so if you
37:01 wanted custom styles on the light box um if you are using foundation this uses the clearing gallery so um therefore
37:10 uh what it does is it'll use the settings that are inside site styles
37:16 while this publishes
37:21 nice bro go back to safari
37:30 uh i want to go to the admin page
37:36 okay so here i can start uploading some images to my gallery so i'm just going to go ahead and go let's upload that one
37:42 and upload that one upload this one
37:49 and this one i took this picture of golgate bridge i'm happy with that it's one of my favorite pictures
37:57 i took a few of these i took this one as well i took the painted ladies one i didn't take these two uh but anyways
38:06 interesting tidbit okay i think that's good so that gives us a nice little gallery if you'll notice here um
38:13 well actually on the gallery the the actions do do pop up interesting except the one that's already uh just uploaded
38:20 okay now if you refresh you'll notice that instead of using the kind of the scaled down thumbnail it actually uses a square
38:27 thumbnail on refresh another thing you'll notice is we have the ability to do
38:33 the same thing as in images you can upload the meta tag or the alt tag i'm sorry um you can get the warehoused
38:39 image url okay uh to each image and if you notice here the image actually uses
38:44 the original image name okay so uh in older versions of the cms it
38:49 actually did like gallery one gallery two gallery three gallery four um but i
38:54 decided i figured out how to keep the original image name for you guys so that for seo purposes if you want to keep
39:00 that image name you could okay uh you can also delete an image uh and the star which is a which isn't
39:07 doesn't exist in the uh in the image stack allows you to set an image as a featured image okay so let's
39:14 actually let's set the golden gate bridge one as a featured image okay now you can also reorder stacks reorder uh
39:22 images in this gallery okay so like for instance if i wanted this image to be
39:27 the first image i could just drag and drop it basically when you go over this little three bars here it shows the hand
39:34 okay and you can just simply drag that to the order in which you would want it
39:39 and it will reorder the gallery for you very nice feature okay
39:45 and then if we look at the content side
39:52 i think i put it where i put there we go so here we have i have my five images um
39:57 and if we go down and scale it should go on multiple lines right okay
40:02 um and what it does here so you'll see is is in the light box it has it opens it up in a
40:09 light box and you can you know go between all the various images inside there okay
40:15 now there is other available there is other ways to use um galleries other than a traditional gallery you can also
40:22 use the slideshow so um let's say
40:27 uh let's say at the top of the page you know above here i want to have a slideshow of my gallery okay so
40:33 basically i can then set the gallery to that i want to use the full images um
40:39 and there's a ton of settings here i'm not going to dive into all the settings inside the slideshow stack um it's your
40:44 traditional slider slideshow stack where you can have arrows and bullets and um you know arrows customize those change
40:50 the animations from fade to slide um things of that nature right um so you
40:55 guys are smart enough to be able to read through these settings um you can change the sort order the theme light dark all that jazz okay let's go ahead and uh
41:03 let's just preview that locally should work
41:09 so here we are um this is the slideshow here um obviously i made it go full screen um and it should
41:17 uh how long is it set to oh 10 seconds that's really long
41:24 set it's one second there it goes so there's a slideshow you know it's
41:30 cycling through the images and we still have our gallery down here as well right so um there as you see
41:36 there's multiple ways to insert uh you know and leverage gallery images um inside your site
41:43 uh with galleries and slideshows um there are there are also other third-party stacks that leverage
41:50 galleries um there's quite a few of them actually um if you look on the um the total cms
41:56 site uh so i don't forget any just go to total cms.com if you go to
42:02 integrations here um we have a bunch of third-party integrations and it's listed here so
42:08 here's all the stacks that have image integration okay so impact header pro paragraph pro
42:14 the photos stack from um from nick cates uh the gallery from
42:20 instax uh parallax my parallax stack the impact one is actually really beautiful um it's
42:26 a great integration with gallery uh it's very powerful um it integrates with uh a
42:32 bunch of a bunch of different parts of total cms uh blog and gallery
42:37 um it also does blogs and feeds and files and a bunch of stuff for videos so um
42:44 the impact is it has some really great integrations with total cms um but this is definitely a page you should look at
42:50 um we try to keep it up to date um i i don't think there's anything that's missing from this page currently uh that
42:56 integrates with total cms um now pages on um you know stacks on that page have like
43:04 direct support for total cms but like through the various text macros um that
43:09 the cms supports you can add support to virtually any stack almost right
43:16 i'll give you a quick example now of how you can like um leverage images into a stack that you
43:22 like that maybe that supports at least warehoused images so if a stack supports warehousing you can integrate it with
43:29 total cms pretty easily so um let's go ahead and jump in and see that as an example
43:53 okay um so on we're on the cms core if we look at
43:58 the cms core stack okay you'll see that there are a ton of macros here for path
44:04 macros okay so an example that i talked about during
44:11 the our little lunch break was um we can get the let's see
44:17 here cms gallery image first cms id okay so what this what this does
44:24 is it will generate the path to an image to the first image of a gallery
44:31 okay i i tried to make these readable so you can see right there's also here cms
44:36 gallery image random thumbnail so it'll get the thumbnail uh of a random image in a gallery okay
44:44 same thing here cms gallery image last square so we'll get the last image the square thumbnail of that right and it
44:51 will resolve the path to it okay so let's use that as an example before we
44:57 actually put it in a stack let's go ahead and just insert that as as text on the page okay so what i'm gonna do is
45:04 i'm just gonna um throw in a text stack here at the top
45:11 and i'm gonna do uh percent cms gallery
45:16 oh shoot i shoulda see ms gallery image first
45:31 and our cms id was gallery okay so that is the macro cms gallery i uh
45:38 image first and then the cms id is gallery okay we just preview that really quick
45:46 what you'll notice here is it inserts the url to that first image
45:53 okay so this this is an interesting way uh to just verify that it's what it's returning right and obviously if i were
45:59 to copy that and open it in a browser we would get that image
46:04 okay because this is the first image in a gallery okay
46:11 okay so how do we integrate this into another stack okay um i have i know the foundation image stack
46:19 supports warehousing right so what i'm going to do is
46:25 i'm going to use foundation image okay um and then what i'm going to do is i'm going to set it to do warehouse
46:32 and i'm going to set um now if you wanted to what you could do is you would set up
46:38 the the mobile and maybe tablet to be the thumbnail right
46:45 so it would be uh first image image first thumb
46:50 so right so here i'm gonna set up i'm gonna do first image
46:56 thumb oops type it correct
47:02 okay and then on desktop i want to do the full image
47:07 okay so obviously that's not gonna work inside edit mode right um but if we
47:13 preview this um it should display that image for us
47:19 boom so here we go uh here let's go ahead and it's going full screen so let's just do
47:25 the foundation thing and throw it in the column so it contrains it a little bit
47:34 sometime there we go so here we see that it's using um the original image on desktop if we scale that down uh we'll
47:41 see that it uses this now obviously i can in the foundation image settings i could say um
47:48 go to container with so that it even on mobile that thumbnail will scale up
47:54 right um now obviously on this i'd probably want to make sure that you know our you know you know we can customize
47:59 the thumbnail sizes on the admin side okay but this is a great way of integrating images
48:06 into a different image stack that you might want to use for some reason that actually supports warehousing
48:13 okay so hopefully that that's pretty cool and you like that
48:20 um
48:26 i think that about covers it with gallery um let me let me go ahead and
48:32 check out the questions how would you know oh here's a question
48:37 how would you know if a stack has warehousing well um essentially that stack like in my foundation image stack
48:44 okay um you know i have an option in there that you know warehouse image okay um it's
48:52 pretty blatant right um so the stack would have to have a setting that says warehousing or of some sort okay um like
49:00 you know i i do have a another a warehouse image stack um to be honest like you wouldn't use
49:07 this you would just use the the cms image stack instead of you know the warehouse image stack but um what's
49:13 another stack if we were to look at impact right i mean impact has direct integration but let's let's pretend like
49:20 it didn't right um you know here's a warehouse option there and then i could set the image path
49:26 um you know in the warehouse setting right um now like i was saying before impact actually supports total cms right
49:33 so if you want to see that here um uh impact has totals a total cms slide
49:40 um i could just set it to source to be a gallery cms id of gallery okay i'm not gonna try to go through all
49:47 of these other settings right now um but impact's really cool if it's like towards the top of the page right so um
49:54 boom so there we go in that's impact uh it
50:02 does a full screen uh slideshow um and if you scroll down right so as you see
50:08 you you can now have a fully customizable like this you know hero banner um you know inside impact and you
50:14 can have content and and it can actually overlay uh the alt text on top if you wanted to
50:20 um if you used a blog use the blog integration it could use uh the first image from each blog post and then have
50:27 the blog title and even link to the blog right so um impact
50:32 is a really amazing integration with total cms um it's it's very very slick
50:37 it's pretty easy to use um yeah as you saw this it was just a couple clicks and
50:43 i have it integrated with a with a gallery and just magically just showing all that gallery in full screen um now
50:50 obviously in fact you don't have to have it full screen it can go you know you know half screen as well so if you just
50:55 do proportional um you know it's going to be a little bit smaller
51:01 oh that's not much smaller i do 16x9
51:08 there we go so you know that that's kind of a a more you know a nicer kind of slideshow banner um and like i said
51:15 again you can uh while i'm doing this why not take a another minute let's say content
51:22 is been a while since i've i've played with
51:27 galleries and i think this would do it
51:33 oh i didn't set any alt tags for these images so it would it would uh you know automatically put the alt tag in there
51:40 as a header but um we don't have that right now so um
51:45 so yeah good question how you know how to determine whether or not images support warehousing or not
51:50 it's just kind of like on a stack by stack basis you just gotta know by looking at the settings
52:06 oh is that yes that was a photo of my father um by the way yes that was a photo of my father
52:12 um let's see i published a site tried to upload an image but when you're refreshing my page the image disappears even though i saved the page um
52:19 i i'm not gonna be able to help you troubleshoot stuff like that on the fly um because i i have you know 40 other
52:25 people or 30 other people here i gotta um keep this thing going um you know something we could we could try to
52:30 troubleshoot outside of this um you know if you're available after the you know we'll do a hangout after
52:36 today if you're available after that we can you know maybe do a one-on-one or something like that or if you want to chat about it and give us the url link
52:43 to to you know look at it together as a group after the after this workshop then
52:48 i'll be happy to log in and have a look for you okay um with impact when you choose to hide
52:54 the slide can you force it to add extra white space at the bottom of the contents if not a full page
53:01 oh well like i showed you you can have it so it's not a full page um so yeah yes
53:14 i think that answered all the questions um any other questions about images i think i covered everything"}]