it's another wednesday another live stream hopefully everyone's doing good today
let's see let's get the chat going boom
we got the users see uh my lights are a little dim let's uh let's up those
tad there we go i'm ready for myself mr devel okay
um just confirmation in the chat room up there we go mr cole is here thanks for coming
on excellent what else we got in the house
okay um so today we are going to um mr powers is
here thank you very much today we're going to be talking about iframes okay
and uh yeah it's going to be exciting i it kind of all sparked off a couple things actually so yesterday
a user on the community um asked about opening up a blog post using in total
cms a from a blog list inside of a lightbox and i've done demos of that before uh
primarily i think it was in like the foundation six and total cms live stream that i did
and we did a bunch of stuff there so make sure you check that out if you're using both products you need to watch that video okay
um and in that video i'm pretty sure i did an implementation of this but
i came up with a really clever idea hey rion and willy thanks for coming on
so um so yeah i came up with a clever idea yesterday
that makes it even better okay um i'm not gonna reimplement what i did
before but uh oh bill oh time change
i forgot about time change i should have mentioned that i didn't even think yeah we had time change um this week in the
us so yeah we're an hour earlier than usual gonna have to remember that for the
hangout on friday um okay so so yeah blog posts in in a light box
all the magic happens we'll build it today i'm i'm not going to build it the old way that i built it before
um which still works but i kind of like this new way it and i'll explain why and
why it's awesome and so i was going to do a live stream just about about just that but then i
got me thinking hey you know what iframes are pretty useful little tools
and um so we're going to be showing a couple other things that people i've seen people do
um davide uh actually you know guy behind foundation box he does a lot of cool stuff
i i may give you a sneak peek at something i forgot to ask him permission but hopefully he doesn't mind i'm going to
give you a sneak peek and show you an example of something that he's been working on that's going to be launching soon
and i'll show you how he uses um iframes as well in a new project that he's
working on so okay scott we're gonna educate you again
today hopefully um okay well let's get oops i just launched expose
all right there we go let's go ahead and
usual i i don't have much built for today um pre-built as usual
i was kind of hoping to build a little bit but um i think it'll be fun to uh kind of build
it and show you guys live i do have a little bit made um so i i
have this total cms thing built um but maybe first before i dive into this particular um
implementation maybe we should just talk about what an iframe is okay um let's
just start way at the beginning right so let's just create a new page and uh
let's go ahead and i'm gonna use my off-site stack okay and off-site is uh is a really cool
stack and there are if you have foundation 6 there is there is an i-frame i think i call it
iframe what did i call it or is it just
uh it's just embed i believe no
embed does i mean you could just put the code in there it's embed isn't all that fancy um
i had an idea i guess not
okay well offsite gives us some pretty cool stuff
now what is an iframe okay so um i just chucked off site onto this page okay and let's just go ahead and preview
okay and what what we'll see here is um it creates
basically an embed okay so by default i just use https example.org which if we
go to that website example.org
all right it's this okay so as we see it allows us to embed another web page
into our web page now there's a bunch of caveats okay for example you are not going to be able to
put in um google.com into here
it's not going to work okay um and that is because
a website can actually prevent you from including it
inside of an iframe so and the reason for this is that wasn't always the case but people were
basically like putting google.com in an iframe and then like you know
pretending they were google right and then maybe putting some other stuff around it like a skin and whatnot and so
um that is wrong right i mean because people were basically embedding google and promoting themselves and whatnot by
leveraging google through an iframe right so it is possible to for a website to
block themselves from an iframe so if you ever try to iframe a um a website and it doesn't work
chances are it's because that particular website has blocked you
from adding them to an iframe okay cool
now one thing that's a little funky with iframes and it has been forever
is sizing of the iframe okay um let's go back and let's go ahead
and just do uh example.org again okay we'll go over name and title um in
a little bit actually name is important title is just an accessibility thing okay
um so one thing you might want to do is make sure that loading by default it's lazy load i do
recommend that um because then it'll essentially the browser will kind of load those resources in the background
um that's the default setting i definitely recommend that um but if you need to make sure that that the iframe
is loaded like right away um you can you can do on-page load okay
but i recommend lazy loading uh you can also disable scrolling which you know sometimes iframes will show a
scroll bar and stuff like that um david is asking how do you protect a website from being an uh used
in an iframe uh we can talk about that at the end it's just some special headers um you could probably add it to your
htaccess file okay so there's some security headers that you can add to your hd access files
um or sometimes hosting company hosting companies are starting to have those options in their cpanel so maybe your
host has an option sometimes some hosts even have that on by default okay you can disable scrolling and then
also allow full screen this allow full screen it's used in very certain situations in
very edge case scenarios so chances are you're not going to have this allow all you know full screen thing it's mostly
for things like youtube embeds and and some other services right so um this allow full screen thing doesn't
really pertain to everything okay disable scrolling definitely does so like if
let's say um because let's go down to sizing so here with sizing by default
um it is proportional sizing so you can you can define the width and the height and if we preview this here let's
preview in a browser instead you'll see as i as i sh resize my browser window
notice this gray line that is the iframe right and uh so that is something that you
know it is proportionally sizing itself okay so it's essentially a web page
inside of a web page okay and you can have these iframes i i guess i should point out um like here let's just do
site styles and let's do a a two column stack i will shrink site styles here
uh and i just have off-site inside of you know the second column there you go it works and what's kind of
interesting is okay if you notice um the iframe is shrunk down so it makes
this particular go to like mobile break point right
um if you're if you recall hey let's make a copy um well i'll have
two iframes on the same page there we go if you notice this one has like a gray background and you know it
has this little box and then in this one down here in this example down here the box goes full width
right that's because this iframe is really small so it causes that it's like having a little mini browser window and
that that triggers the mobile breakpoint here inside of this iframe because it's smaller okay so think of you know really an
iframe is a website inside of a website right so that's kind of how that works
now um let's say on this one though you can there's other options um
there's this thing called fit content it's a feature i added last year into off-site and um it's
complex okay and what it does is it it attempts to automatically size the iframe to fit the content okay
and um so as you see here this particular one fit you know it fit the content
sometimes it works it is a hit hit and miss depending on what the type of content and the you know whatever is
made inside of that that iframe um but yeah fit contents there you can also do static sizing which means always
be this particular size or you know static plus responsive you can do um basically it's it's height
based so you can say uh define the height the particular break points okay
um and then you can do viewport height which is basically just make it the size of the web browser okay
um so anyway we're gonna stick with proportional for today uh and uh but yeah there's a bunch of other height
options and obviously in true foundation 6 style we have custom classes for
um the iframe as well as there's like a wrapper around the iframe
that helps us do things like this sizing and whatnot so you can add classes to both of
okay so that is a pretty exhaustive look at off-site okay um
really quick i guess damn i won't go into those hd access
rules right now uh i'll i'll try to find them later on okay there are just a couple one i'm sure if you google it
htaccess rules block iframe it'll be some security headers
siri thought i was talking to her um let me uh take siri off here
okay um okay so that's a pretty exhaustive look
at offsite now one thing is actually interesting is the uh off-site video on the product page is like it's really old
i've done tons of updates to off-site i actually i've completely rewritten it so this is now the new um you know default
overview of off-site so i'll make sure i put this on the product page this live stream as well okay
all right so let's get into into some cool stuff okay um
let's go ahead and let's look at an example if we go to sandbox.joeworkman.net right now
i think i published this yesterday okay we see we have a blog list okay nothing super fancy here it's just a
rudimentary blog list and if i click this read now button okay you'll see that it opens up the
blog post inside of a lightbox all right let's find one that has actually some content oops
man am i the only person that absolutely hates this pinch and zoom feature inside
safari oh i really loathe that okay read now so
if i click read now on this particular uh blog post we'll see that i have access to the full blog post we have the
slider with it with all the images my title up here and then the blog post
content and as you see here i have scrolling enabled right um so you know but if if i
had in the off site stack i can disable that scrolling if you really wanted to doesn't really make sense here but yeah
pretty cool right um so here this is what we're going to be implementing right now
okay so um here i i have a rudimentary just blog
list um one thing i do have to say you still have to have an external blog post page
okay so here on my home page let's delete this untitled page here delete
remove okay so you need two pages you still need a blog list and you still need a blog post
page okay so just as a normal setup as if you were to do a blog okay on this blog post page
you really don't do anything fancy um oh i need a blog post id to kind of
show um hold on one second
let's get a blog post id just so we can look at it in preview this is vacation dash dream
okay let's do a blog post stack preview post vacation dash
dream a lot of people don't know what this with this uh this setting is right here okay this preview post
you you put a permalink of an actual blog post that's on your website and then you can preview the
contents of that blog post locally inside rapidweaver okay or inside safari wherever you want to
preview okay so if we preview this voila
now what's what what we'll notice is this blog post page is very minimal right i mean it doesn't it's not
going to have the menus it's not going to have a lot it's just going to be it's a very minimal
thing right because in this particular example this is going to be showing this is going to be displayed inside of a
light box right and we don't want everything we just want the post content
now if you really wanted to get fancy oh man i just came up with another idea
if you wanted this to to be um different like for you can have the
same blog post page but like it shows one way in a light box and shows a different way if it's not loaded in an
iframe um cool idea maybe we'll get that to the at the very end if you guys want to talk
about that idea um just popped into my brain it could be possible though with agent
okay but um let's get back to business here so i have my blog post page
and if we want to see the url is slash post okay in this case um but it could be whatever you want it
to be now now here i have a blog list i've really done nothing fancy here oops
okay um i just added my gallery a title a summary and then i added a link button
now this is a foundation six link button okay and
but the user i said this entire id was sparked by a user on the community who is using foundry so i'm gonna i'm going
to explain this how to do it with the foundation 6 link button and then hopefully we'll i'll look into
the boundary buttons to see if it's possible or maybe we i'll create it with like a you know just a default stacks
button as well the same kind of functionality but for right now we're gonna we're gonna continue on with the
foundation six link button okay now um in my prior example that when i
built this before i actually added a light box inside of the blog list
that essentially what it did is it created a different light box for every single blog post in the blog list
and each of those light boxes contained an iframe i have a completely new implementation
now where i have one lightbox with one off-site stack on the page
and then this this link button will dynamically launch and reload the post inside of
this the central light box this is really really really cool okay
um so why is this cool
let me just let me get big okay so why is this cool before when i implemented this before in
the foundation 6 and total cms thing um what it did is is it loaded an iframe
of the blog post page inside every single blog list
what that means is even though the iframe isn't displayed it's still like loaded by the browser
even if you have lazy loading it's still kind of loading it in the background but with this methodology that we're
going to be doing right now since the lightbox is centralized to the page
it loads things on demand which is really really really cool like
this is awesome it's this this way that i'm showing showing you right now is going to be so much more performant
faster page load times because all of this is happening dynamically it's really cool all right let's get back to
it so again this light box is a central light box okay and let's show um how all
this is set up so you have a light box the the important part here is you have a light
box id okay uh we're going to be linking we're going to be pointing this link to that
okay later on this links button um so this lightbox has an id i called it postbox and that is right here boop
right there it's called postbox okay then we go and then inside of this
light box the only thing i have is i have a close button and then i have an offsite stack
now the important part here is a whatever you set the url to that's going to be the default okay i just put
the path to my page you can put the full url as well i just put the path to my blog post page
in theory you could actually leave this blank if you wanted to because on page load it's just going to be nothing okay
that might be better it should still work though um but i thought it would be it'd be good to kind of load um the initial blog
post page even with no blog post being loaded because then some things will get cached by the browser and stuff like
that on page load but an important setting here is going to be this name setting
so that is important we need to make sure that this name setting is set to something okay because
we're going to be referencing that later on and that's it okay that's all we need to
do um i i use static and responsive for this particular demo okay but um yeah
the important part is this name field inside of offsite okay so now let's go to our link
stack our link button stack again this is a foundation six stack
it is this bad boy right here this link button stack okay
so what magic are we doing inside of this link stack
so first off the first bit of magic okay is we are
linking to the blog post page and we're going to target the iframe
so this is a feature inside of the foundation 6 button where you can load a link inside of an offsite stack
by using by linking it to the iframe name so if you see here i have iframe name
and this setting matches the name inside of the off-site stack
and what that does is essentially instead of opening the link in the browser it opens this link inside
of the off-site iframe okay now there is some magic you might
look inside this link and see what the heck's going on there okay so this is
very important if you've never used um blog list macros there are a set of
macros that you can use inside of a blog list and essentially what this is
is this is the url to the blog post page so slash post slash index.php question
mark equals and then this little macro right here
fills in the permalink for each blog post
okay so if we go let me go back to safari really quick and you'll notice if i hover over these
read buttons um hopefully you can see the the tool tip of the browser i can't
unhover it's at the very bottom of the browser window right where you can see the the path to this
so we see that if we look at the bottom of the browser it says sandbox.joker.net slash index.php permalink equals weekend
dash testing okay and if i go to this one it goes to question mark permalink
equals vacation dream so as you see that macro
um transforms itself so that it's unique for every single blog post and it injects the permalink at the end
so it injects the permalink where we put this curly brace curly brace permalink
now if you ever forget what these macros are the blog list stack has a blog list
macros hints and this is where you can get all of the blog list macros okay so if you forget
what those are you can always access them here access them here okay
right now uh all the only one we need is this per is the permalink macro okay and again you go to edit link
you put in the path you have to put in the url you can't navigate to the page okay you have to use in url you can use
the full url with the domain or you could just use the path okay um
so there we go so that alone what that does is that
opens the the again the blog post page inside of this offsite iframe
now the next thing is we can't just load it into the iframe we need to launch the actual
light box so we can do that with the foundation six button as well and that by that we're doing um add
custom attribute and then what we do is we do data open
and value is postbox and this value here is going to be the id
of the lightbox so here remember inside the lightbox i put an id of box
but what we want is we're going to do data open post box
okay and that's right there
so that so essentially we're doing two actions with this one link button okay
now i i should note that normally you can use a nation six to open up a light box really simply we can
just do uh open light box and then we can open up a light box
but a button can't this particular button stack can't load in the the link right it can't load the
link into the off site so basically i took this feature of this button and we're adding it to this link through
this custom data attribute okay
so there we go pretty simple and and that's it that's all the magic
basically again we're we're creating a light box we're giving it an id we're creating an
off site giving that an id and then we're we're linking this button to do both of those
actions all at once and that gives us this
that gives us you know a read now button boop um you know and it opens up some of
these blog posts aren't interesting this is just test data so there we go this one has got you know
multiple images okay with our blog post content and what's awesome is
that that blog post is loaded dynamically like it's it's not loaded on
page load it's loaded dynamically when we click the button pretty cool
i see mr cole put in the um the htaccess rule inside the chat so
header set x frame options deny there you go thank you mr cole
okay um pretty slick right now this is using a
button what if we wanted like the entire thing to be to be clickable let's say on this image right how could we do that
i thought that would be interesting to play around with and this this would be essentially the
the same way i think the foundry button would work but what i'm going to do is
inside this gallery image there is a link to post option we don't want that okay you're gonna want that's another
thing you're gonna want to turn off the link to post in the image and in the title stacks
because you don't want those to automatically link to the page because that will actually link to the
page it won't load it inside of the um the off site inside of the lightbox
but let's see if we can get it working um so let's i'm going to add it foundation 6 has a oops not this one
i want a link container stack we're going to play with this
so so in the link container stack uh oh it does have the same exact
feature really cool okay so link container stack i'm actually just gonna copy this link um thing right so we're
gonna do here let's just copy and paste this so i have to type it again so we're
gonna go link container i'm going to do edit we're going to paste that in
and then we're going to do open inside of iframe name and that was post
frame okay and then we're going to add a custom data attribute we're going to do
was it data open data open post box data
open post box
okay and then what i do is i'm going to drag that in there and you can drag whatever you want let's
add the post title as well let's see uh and uh
let's publish
all right and now we'll see if i click on this boom there we go
so that that's a way if you wanted to you know transform the title if i look i'm linking click clicking on the title
does the same thing so if you don't want the button you want to link to everything in foundation 6 you're going to use this
link container stack okay i forgot that i added all these cool features to the link container stack very cool um
i'm going to go a little old school and let's show you how you could do it with a
um a link stack so let's do instead of the link container let's go to my free link stack
i have a free link stack here
where is lincoln anchor there it is all right link
this is going to be a little bit more involved because we don't have all the cool settings that foundation 6 has um
but let's go ahead and drag that in there okay and i'm going to set link we're still
going to set we're still going to use the macro okay but then the um the tricky bits are we have to add all
those custom data attributes here so uh what we're going to want to do is we're going to do target
key is already oh you know i've noticed with discard change uh i've noticed with rapidweaver like it in order if you want
to use the target attribute you have to use target in all uppercase
boom it's a workaround okay so you use target and then in all uppercase and then you do your the name of your iframe so this
was post frame okay and then um and then we want the
data dash open and that's going to be post box
okay um so we're gonna set that
and then we're gonna publish and this should work
i think
let's uh refresh boom works
yep and because i know it's the it's not cached because this this isn't clickable it's only the image because i didn't add
the title back in so there you go that's how you can do it with with a generic link stack or i mean since this is just
a um you know you can use the same exact concept with a generic button um now foundry um what if you're not
using foundation six so if you're not using foundation six um this target is still the same right
because that's how you we integrate with offsite so target in all uppercase
and then the name of the offsite stack now this is where it would be different
with foundry you have to put in whatever i i'm pretty certain foundry supports
adding some sort of data attribute to a link to open up a light box
pretty sure um you know at least it's it's i know it's pretty sure it's possible in bootstrap which is the
framework provided by foundry so hopefully you can figure that out if you're using foundry
you're for to open up the lightbox part you're gonna have to figure that out figure out how whatever you need to add
to a generic button or a link to open a lightbox um it's pretty simple with foundation
you just do data open and then the lightbox id and actually this this data open attribute for anyone that also
works for things like accordions pretty much anything that opens up
um you know off canvas um that date this data open attribute is pretty much global it's very
standardized across all the foundation um components so yeah data open and then the id in
this case the id of the lightbox so hopefully that helps out
for the user on the community that was using foundry okay um any questions on this
implementation um really quick or else we're going to kind of move on
three two one nothing okay let's move on to some other interesting implementations of
iframes so um
i i'm going to be a bit cheeky and i'm sorry davide if you're listening and you don't want me to show off
something fancy and new but let me load it over here i'm not going to give you a full tour because i don't want to spill all the
beans and spill his butt you know what i it's really cool he did a really good job
let me go ahead and i'm going to
can you hide the url bar in safari
all right i'm going to be cheeky here and i i don't want to steal away david's thunder so i can't even see the url of this of
this page okay there's a new project file he's working on and um
he has this little reviews thing and if you click on leave or review this opens up a light box with a form
and this form is actually a total cms form okay where you can type in your
your name and your email and then you can select a rating
and then you can um you know put in your review
okay and guess what this entire form it's an iframe
right so um yeah this just uh the reason it's an iframe it just kind of allows us to
leave the complexity off of this page right we can kind of compartmentalize this form onto its own
web page in fact let me go ahead and uh i'm going to
oops come on compartmentalize it the heck safari
i'm gonna go into do do
oh no how do i get my url bar back there it goes
all right there we go look at this here is the um the actual web page that is that form
it's an iframe and this all it has is a total cms blog form actually it's a blog
form i'm not going to go into how we built all of you know this particular form it has some magical stuff that i helped him
out with it's pretty cool but yeah this is it's nice because it you know we have this complex form that he
can then import onto multiple pages he's he doesn't need to have it in a partial and then you know partial that out it's
just kind of an iframe that's in its own centralized web page that he can simply iframe into whatever he wants whether it
be a footer into a you know a light box all kinds of stuff so it makes it very
flexible right um and lightweight and things that you can kind of transport around and you
know frame out into your web page and uh what's really slick is that we
don't even we don't really it looks it doesn't look like it's it gets it
looks like it's just a part of the web page right really really really cool
there we go so um i just wanted to show you this example of
what we could do to use an iframe to do something different and you know compartmentalize a particular component
so we built this component that we then want to you know have transportable across our site
and uh it's a really cool what you know use case for it okay
let's go ahead and let's start building up a uh
let me put my toolbar back a funny funny thing because the new like unified uh toolbar in safari when you uh
when you hide the url bar it also hides all of your tabs interesting i guess it kind of makes sense
it's threw me through me for a loop really quick oh man my toolbars are all jacked up now
okay i think i'm good to go all right so another thing i wanted to
show is um actually davide does this a lot as well as chris i know chris does this
um and what he does is let's just quickly build out
um an admin page okay a total cms admin page
um a lot of times uh what we do is
just add that let's do a new content i'm gonna extract that i'm gonna build this
super quick guys i'm just gonna do a two column over here and then
[Music] what we're going to do let's do column one it's going to be
we'll do three and we'll do auto
inherit here just for now okay um i'm not worrying about mobile i'm just
going to show you guys this really quick so
a lot of times what we'll do is let's say on large admin pages we want to break up our admin sections into
multiple pages right
so what we can do um let's go ahead i'm just gonna load in some buttons we're gonna do a link
all right
okay and oh you know what i'm gonna do i should have done uh sizing
do always always
always all right um i'm not gonna worry about the style very
much here
so a lot of times what people will do is they will create let's say i have three admin pages
okay and uh here let's fund i'm even gonna name this all out i'm gonna do slash
admin and then um under here let's say i have uh
yeah let's do let's duplicate this page
and we're gonna do here we're gonna do um
about and then the url here is gonna be um slash admin slash about
okay and then we're going to duplicate that and then what we're going to do here is we're going to do blog
and then we can do slash admin slash blog
okay and um for all intents and purposes i'm just gonna i'm not gonna try to build out an
entire admin area what we're gonna do is i'm just gonna put in some text okay so let's just do
text this is the about just so we can see
about admin
and go to the blog page
um blog admin okay oh and then
this menu right so um traditionally what we would do is we would
uh let's or let's do this
admin home okay um traditionally what we do is we we'd
want to make sure that so we'd have multiple blog pages this would link to let's go ahead and let's build it all
out let's go ahead and i'm going to link this page to
admin home this about page this is going to get linked to uh admin about
and this blog page this is going to get linked to admin
blog set link okay now
in this case i want all of these buttons to be the same across every page so what i what i
should do is i'm going to chuck all of these into a container we're going to do it uh auto
no wrapper i'm just going to go block select move those all into there we're
going to do this and we're going to create a partial and this is going to be called
admin menu okay we're going to go back i have my
admin menu and then we're going to
paste that in there
all right so now at least whenever i make changes to this admin menu it's going to be changed everywhere okay
let's go ahead and publish this
admin
okay so here i'm on sandbox.net admin okay and if you notice here if i
go to the about page okay this about page um you know shows
us the about page and we have all the menu over here if we look at the url the url is jordan
admin about right and we can go to blog
for some reason i have authentication oh i think it was when i did the access uh thing um i need to tweak that um okay so
if we go to blog it then goes to the blog admin page and all of these all these pages they're separate pages right
they're all separate pages but there's another interesting way to go about this
okay um instead of like reloading an entire web page again so if i want to go back
to homepage i click on that and it would load the webpage again okay now i'm on admin home
there's a very clever um way to make this better
okay so let's go ahead and do it do all of this i'm going to rebuild this
using an iframe okay
so what i'm going to do is um i'm going to
i'm going to create one more page here i'm going to duplicate this
we're going to call this home okay
and uh just for kicks we'll do slash admin slash home
okay
so i can do is i'm going to let's see oh and this one
oops that's not what i wanted whatever
let's go back to this page here what is i'm gonna i'm gonna trash that okay
and what we want is we're gonna load an off site into this so let's go ahead and get an offsite stack
okay and
we wanted we can do like [Music] so here we're just going to uh put our
default url um which i'm going to it's going to be slash admin slash
home okay oops
and if you wanted this to work inside rapidweaver you could put the full url so we could do https colon
sandbox.joeworkman.net admin home
okay there we go that way it'll work inside preview then we do um offsite the
name so let's do um admin frame okay let's just call it
admin frame now
let's go ahead and um i'm going to i'm going to extract this page with this partial
um and then let's start modifying these to support off-site okay
um so what we're going to do is i'm instead of loading um this is the home page
and we want this to be we're going to link this to admin home okay and we'll do is i'm going to target
the iframe name admin frame and i'm going to do all of
that here it's still going to link to the about page but instead of opening it in the browser i'm going to target the
iframe now let's do the same thing here we want to link to the same blog admin page but
we're going to target the iframe okay let's publish that
all right so now we're here and slash admin
okay so now if you see i have this menu system over here and then it's loading in the the various pages now we still
have all the old menus inside here we're gonna fix that okay but now you'll see if i click on about page
it automatically went to the about admin if i click on blog
oops did i not configure that right
oh i think i selected the wrong blog page here it's link
uh page admin blog set link
iframe name every frame yeah let's publish that again
it's a page here
single page for now
or if this cloudflare access thing is hitting me up okay
um so let's do about page
i want to do just as bar
oh i think i did the wrong homepage
admin home what's that link
interesting i wonder if i here instead of navigating to the page i'm actually going to put in the full
admin slash home okay this way i don't have to publish
either uh it'll just work inside wrap up so i'm going to put the actual url i wonder if that makes a difference
because it's not working 100 as i would expect url
that is going to go to admin slash about
and this one is going to go to url admin slash
blog all right let's just preview locally here
click on home page
okay i guess we'll publish again i think i have iframe and it disabled on my uh
fun times
oops
all right so that's a home page click on the about page click on the blog page there it goes all right
so let's deal with this iframe okay so i guess putting in the full url
kind of makes a difference and as you notice it's pretty instantaneous um and what's cool is if you notice we
never left slash admin the page never reloaded okay
so because we're now using this iframe we then go to each page and essentially just get rid of
a lot of the layout basically we only have the contents of what's going to be in that second column of the page right
and this is um let's do let's fix this admin home
and then here we go boop
there we go over here let me take that out delete that
and let's publish
and let's refresh
there we go browser cache so now we're at the admin home page and if i click about
i click out
there we go click blog there we go so as you see now
you see the title changing now imagine this was a full admin page where you know when you're when you click about it
takes you to and it shows you all the various total scene and admin areas and if you notice that the page never
reloads i'm clicking these buttons and it's dynamically loading that page into this iframe
and that page can contain all kinds of total cms admin areas this is a way of having what seems like a centralized
page but um the performance of offloading your different admin areas into
different web pages okay so that it's it's simple for your users they go to slash admin and
everything is loaded there then we just have various buttons or you can you know load these with a you can have a menu
system over here um the buttons were just a quick way for me to to do this right but um yeah pretty cool right
all happens dynamically by loading um these pages and our projects a little lighter as
well because then i don't need to design this menu system and put it on every page i just need to design this this
centralized part here okay and uh and yeah then the at that
point the url is still the same okay this works for admin pages and you
might be thinking oh this can i use this concept on my main website right like my
home page i guess you could but um i wouldn't necessarily i think for seo purposes
having everything be its own page is probably much better i mean for admin purposes that we can kind of have that
app feel because we don't need to worry about seo indexing and all that jazz um so i wouldn't necessarily take this
approach you know where you have your menu and then you're dynamically loading everything inside of an iframe maybe for
sections of your web page if you want to have like an interesting little cool effect um that you want to dynamically kind of
load in content kind of like this could kind of replicate like a tabbed environment right
um but i do think that i would stick away from this particular concept for a the main part
of our website where we want to make sure google is indexing things and whatnot but i think it works perfect
it's really super clever for an admin page
okay so um quick quick learning um i do think there was i don't know if it
was browser caching or what safari has been super aggressive with caching lately it's kind of driving me nuts um
but you know i did load the entire um here okay here's another thing
if if you don't want to put in your domain let's say you're you're working on a sandbox
okay and uh you don't want to have to worry about remembering to
change the domain names later on you don't need to include the domain you can just put in the path and click set link
there go here let's just delete this we could just put the path
although come to think of it i remember years ago there used to be a bug if you started a rapidweaver
link tool with the slash it didn't work great let's publish this to
make sure that works before um let's make sure before i give you guys the golden rule that you can do that it
should work though
yep so i need to turn that cloudflare access thing off on my uh sandbox that i did a couple weeks ago um okay so if we
go to homepage about page ah see okay that it did break
oh it has it adds two slashes
hold on all right that's interesting so there is a little bug but i'm wondering if we do
we do the full if we do index.php
at the end like put the full path i wonder if that will work let's try this
getting into some edge case stuff in here but be interesting to see if this works
publish that again
okay refresh
out that works so you put in the full path to the page
um that way uh that's just again a little trick for um if you are going to be changing
domains later on and you don't want to remember to change all these you know the website urls
inside the links you don't need to put in the domain just put in the path to the page and the browser will assume if you don't
have a domain it will assume that you're doing it on the current domain right there we go and you don't need that in
offsite as well so you can actually um
here we'll even put index.php that should work as well so if we go there
there it goes cool so now we have everything is referencing
relative you know or absolute paths to the current domain it's not domain agnostic it is domain agnostic right so
you can change your domain in your project and this will continue to work when you republish you don't have to worry about changing the domains
afterwards because i know that's a workflow for a lot of users um so yeah there we go um that was had for today uh
see um your help with accordion after the hangout uh how how about this
approach um this could work
um you could play around with it um rico uh interesting idea
um but yeah there we go rico if you want to chat more about that uh hopefully i can see you on friday we
can see how that accordion i don't remember all the details of the accordion i do remember it though
um but this could potentially work for that so hopefully you guys learned a little
bit about um offsite and some of its cool features as you see i've integrated it very
nicely into foundation 6 with linking via buttons
which is really slick but i also showed you how you can use a standard link tool to do that as well early on so
um you can integrate off-site with pretty much everything um so it's really cool if you don't have the stack super
powerful um as you see from today i'm sure there's more use cases it'll be interesting to see what we can do with
it what you guys do with it um you know i've seen mostly kind of more advanced users using these techniques so
i thought it would be interesting to kind of you know share it with the masses um since it's kind of been tried
and true for quite quite a while now by some of the more advanced users so um it's really clever um an interesting way
to kind of improve page support page speed performance um and for the blog
list example that is that's the bee's knees right there super simple so if you don't have off-site go check it out um
thing is 19.95 i didn't even check the price i think that's what it is right now so uh check that out hopefully um
you like it it makes your sites a little bit better take care everybody if you're uh not
aware friday hangouts super awesome check them out it's at uh one hour from
now um but on friday so make sure if you guys uh we changed times in the us
already so it is 12 30 right now pacific so um i think the rest
of the world hasn't changed yet so but with that said u.s senate apparently has passed the the a bill to
nix uh daylight savings time so it just needs to go through the house of representatives and signed by the president we'll see i have my doubts
it'll actually happen but um hey i'm i'm all for that i think it'd be pretty cool
get rid of daylight savings time um can you uh can you use stack macros for the url yes steve steve suggests in the
chat can you use the base url stack macro yes you can um
but as i said you don't even need the macro you just put in the full path to the page and you're good to go um but
yes steve uh you can use the base url macro um i think i have a video on all the
various macros and i vaguely remember doing some sort of faq on it but i'll look and see if
it's on the community i think i think i created an faq on like various macros that are that are supported by themes
and rapid even stacks and all that jazz um so yeah check those out macros are
fun too take everyone we will see you on friday hopefully at the hangouts if not we'll see you on the weaver space
community site and we'll talk to you soon bye