Skip to main content
Instructions That have them more than sometimes might. Um But yeah, she's gonna kind of go through the, the code snippets and kind of go through wept top and then we'll get, make sure you guys are all set up with access to get in the web. We didn't want to give you access before. Um We show this to you so you don't go and start blowing up um Knowing that if you break something um please don't break anything. Uh Got it. So with that, you, you break it, you got it, you bought it. OK. Can everybody see the browser window? All right. Um Now I'm just gonna move down a little bit so that I can see the document here. But um I have this document that Alan mentioned basically. Um going through all of the sections, I have a little overview of what's in here and then I just recommend using it by going through the table of contents on the side based on what you're looking to add. Um I also did a glossary of terms at the bottom just in case people like have a question about what any of the code is. I'm just not sure in terms of what people's background would be. So you can refer to it here. And then I also did instructions on how to upload images into web top, which I'll go through that as well when um I'm doing the demo. But basically you can just click through each of the sections. It has the code snippet with some placeholder code um similar to the page that you had already reviewed previously and you can just copy and paste out of here and I'll show you how to do that. And um pretty much what you wanna do is have your images for any of this stuff beforehand. Just have it like cropped and ready to go, then you can load it onto the site, pull the URL out and then kind of add it to the sections as you're going through and for any of it, of course, you can go back and edit it later or maybe switch it to another section if you wanted. Um And then if you find that you're going through this and you're like, hey, I think it might be better if we had this other section or whatever. Um Just let me know and I can always go through and try to build that out. Um So we have the example page that we had kind of been working off of before. So I'll just bring that up here. And these are all the different sections that I use to build this document out. So it goes in the same order, if you're kind of looking to refer to either one or the other, I've given titles to everything both in this document. And then you'll also see all of the code has these comments wrapped around it. So that kind of defines what type of section it is. And I recommend as you're building out the pages, you keep those comments in there, that way you can just tell where something begins and ends and what type of content section it is within the page. So this is like the full with image content with the title 50 50 images. Um And then there's versions of left and right, either 25% with images or 50% images. We have side by side link lists with either the standard bullet or checkmarks. Then there's references, an embedded video and these videos are any of the videos that are already hosted on your site or you could add additional ones. Um And then you would be able to embed those within the article as well. And then if you wanted to do like a related section for anything related to the same topics, you can use this related section to kind of build those out for any of these sections that have the content side by side. I recommend sizing the images the same just to kind of help with the overall layout and make it look a little bit more cohesive as it's going across rather than having maybe a tall image and a short right next to each other, then I have a couple of different versions of quotes. So it's a left justified centered or centered or centered and italic. Um So those are all the sections that we have at the moment. Um And as Alan mentioned, we will give you the log in access to this. So when you're coming in, it will start off with this page here. So this is like kind of the landing page of the admin area and where we're gonna go is into content and then this will be in news and news articles. So that's the specific type of page that we're gonna be building out, then you would go to add and you have a bunch of different fields here that you're gonna wanna add information to. But um for the most part, I would just add a title and then adjust the publishing date to start off with. And then you can always go back and add things later, the source and the source. You're all an author don't show up within the page template. So that's more for like a back end information um type of structure just so you can refer to that later. So for this, we can do example content, one for the publishing details. It will always come up with an expiration date that is like a week away or so from what you are, when you're adding it, I usually will take this off and then move the publish date to somewhere in the future while I'm building out the actual article. That way it's not showing on the page anywhere while I'm building out the sections and kind of determining what the final state of it is. I can always adjust this later if maybe it takes me longer to build it out or I need to get approval from somebody, but that kind of keeps it in the back end and not in the spot where anyone would be able to go and look through what you're building. So just make sure to take off this expiration date and adjust the published date, then we'll move into the news body section and this is gonna be where we're adding the code snippets, but they're going to go into this source code editor. Um That's the second one over from the right. It's the little carrot brackets and it will pop up this additional window. So now if I go back to our guide document and let's say I wanted to add a full with image at the top, I could just copy this section out, go into here, paste it in. Um And then let's see, I wanted to add a 50 image, right? Can just copy this out and paste in here. And I noticed my quotation or my comment adjusted there. So I can fix that in the document. Then when I am done adding stuff um into here, just kind of like building out the base template for myself, I can hit. OK? And then the content will populate in here. And one thing that you might notice from what's displaying here versus what is displaying in the example, photos or the page that we were looking at is the style is not the same. Um That's just because the editor that we have as part of the platform isn't referring to the style code that I've written for these individual sections that we're adding. So in order to actually see how it's going to be laid out, we would have to complete or publish again on the back end until we adjust that publish date, publish this page to see how the actual layout of the page would be. So to do that, I'm gonna hit complete and then publish if you want to, you can add comments in here. So like created based asset or updated citation or overview or however, you would like to add a note there and that just kind of gives you the option to refer back to when and who was updating various things. Um For the most part, I don't add comments here because I'm updating things a lot. So it would be a really big list. So then you can hit change status and then you can click preview and that will bring up the full display of the page with the style applied. So this is the full width image and then the 50 left with the link list to the side. Um And then I just want to stop there and make sure there's no question so far. I know it's kind of a lot of information. Uh I'm good. I'm good. OK. So then as far as the rest of the sections, if you had to add anything else, um you could like if I wanted to edit this page that we just created, I just have to move my window up a little bit, I would come down here and click on edit and then edit again. It brings up the same panels. I can go back to the news body area. If I wanted to pick a different section, maybe I wanna add references with the title. I can come down here and copy this section out. Go back to my content and make sure to go into the source code just to enter and paste that in there. You'll see an ad here. And if you wanted to, let's say edit these citations within this or edit any of the um actual text, that's part of this page here. You can always just highlight it and type in an additional title. So like um editing it that way versus having to always look in the code because I know sometimes if you're not familiar with this, it can kind of be a lot to look through all these tags and everything. Um So you can edit it that way or you can edit it in the code section. Um, whichever is easier, but same thing we would hit complete, publish change status and then preview and that's gonna bring us back to the page with the new section added. So sorry, I, I can I interrupt for a minute. I'm sorry, because I was, I was muted. I do have some questions because this is the first time I've ever had to do anything like this. So I apologize. Um I apologize in advance. Um Well, I'm a little confused as to where I understand the source code. You pick up the source code and you drop it in. But what what prior to that you've got these images, you've got text. How is that initially populated? Because your source code automatically picked up that image. How did it, how did it know to pick up that image? Like where was that image loaded in advance? So that when you popped in the source code it, it pulled in that text and image. That's the piece that I'm a little lost on. OK. Yeah, that's a separate part where I'm gonna show you where to upload the images, but I do also have the um uploading image instructions here as well. So whether it's referring to the record of this call or going through this um basically what you do is you have the image already sized on your computer or whichever one you're gonna use and then you would upload it to the back end of the site. So that way it has like a hosted URL within the site. And then we would be pulling that into this code. For the example here, I already had populated all of that. So it's kind of like the placeholder so you can see how it looks. But let's say you had another image that you wanted to place in here. You could go through and upload that and place it into this section of code by just pulling the URL URL out from it. So for example, if I go into the images area, which is site, site assets, images, and I'm just gonna pull out a different thumbnail so that we can kind of see how that looks to get that URL for it. I would go into edit and then I wanna look at this source images section, you can kind of hover in preview and I'm actually gonna go to a different one because that's the same one that I have on the page already. So let's say we're gonna use this one so I can hover over this and preview it um to get the actual URL I would click and then I can pull it out of the address bar up here, then if I was gonna go in and add it to this page. I can go back to the code that I've already populated, that already includes the image that um I had uploaded before for the placeholder. And I'm gonna just paste the URL into this section and in the instructions that I have here, it goes through all of these different steps, clicking on the orange preview, pulling the URL out and then um just noting to paste the URL into the source. So that's where I am right here in the image source. And then I'm gonna paste the URL for the other image and hit. OK. And then it's switching over to that new image that I had selected. If you were gonna go in and add your own image, not one that's already hosted, that's as simple as clicking, add up here at the top, you give your image a title. Um You have to click on this kind of cross arrows icon and then hit choose file and then you can choose a file from your computer and hit save and it'll upload and then you'll be able to get the URL for whatever that image is. So just in terms of like an ease of workflow, I recommend going through and adding all of your images in advance and pulling all of the URL S for them. That way when you're going through here and editing the different code, you can already have those image URL S available and can just switch them out as they're going through. I have a quick question. Um We should upload our images already in the correct size or will the system resize for us um In for this application of them, I would say get them ready in the size that you want them to be just because that will help with consistency. The system does do some resizing on its own. Like you may have seen when I pulled this up, it has a midsize image and a thumbnail image, you're able to use those. But these presets are really for if it was going to be used in another application within the whole structure of the site. So if it was gonna be used in a carousel or used as like a teaser image for a piece of content, that's where these other sizes come from. So if you're uploading it at the maximum size, you would need to um use to place it on a page. That is what's gonna be here in the source image URL. So I would just say size it at that and then, you know, it's ready to go. And uh the specs for the image sizes are they listed somewhere? Um I don't have that in the document as far as what is displayed on this page, it would be no wider than 1300 pixels wide. But for the height specifically, it can really be whatever you want to add in here. So I know we had a couple of questions at various times about doing horizontal versus vertical images in these different sections. Um This will kind of accept whatever height or with you want to put in here just knowing that it will only take up 50% for example of this section, because this is a 50 50. So it could be double this height and go all the way down to here. Um The list would just be shorter on the side. So I think um as long as the images are sized to work within 1300 pixels, um like for example, this could still be 1300 pixels wide if you might use it across the full width at any time. Um just for that flexibility, but when it's placed within this section, it's only gonna be 50% and I can um write up more of those image specs and add it to the end of the document if that's helpful. But yeah, that would be helpful. Thank you. So, in terms of what's outlined here and adding anything else, I think that's really the basic overview and I feel like once you get into the actual system and start creating things, um I'm happy to answer additional questions from there um Or if you have any at the moment. Well, um mine is now about the text. So I, I, I guess once you place the source code in there, then you then you manually insert the text and it's gonna format it according to the source, what the source code is, is telling it to do. Is that ok? So it's not as if you're, you're uploading an advanced text and pulling that, you're just getting to a field where you can actually manually add it in. Yeah. And so in here, um you'll see. So adding a class to any of these sections, kind of determines what style will be placed on them. So for example, I wrote quote or quote style for this individual section that allows this to kind of display in this way, um a a smaller section at the bottom to have who said the quote. And then um this text is larger and italicized. So it's just applying that style that I've already set up to whatever content or anything you would want to add um If we go back up here. So this related article section I set it up so that this is more of like teaser style, this is a header and then that these images, everything will kind of flow together if three items are listed across. And if you need maybe a two across or a four across, just depending on whatever content you're featuring. I can also add additional code in here to support that as well. Yes, that would be helpful because we may not have three across. We may not have three related articles, we may only have one. OK. Yeah. And then Um I also mentioned at the bottom of each of the sections, additional notes. So like if you only had two and you had to strip the other ones out of here, strip the last one out, you can just crop off the individual features. So the image, the title and the copy underneath it, then it would just list it as two side by side versus having the additional third there or you could strip both of these out and just have one. Um I think in the case of how this is styled, it might be a lot on the page to have a full width version of this as just one singular. Mhm So keeping it as this with would probably be the best recommendation. Was there anything else that anyone wanted to cover in terms of the setup? No, it's pretty straightforward. OK. Yeah. And like I said, if you get in there and anything comes up that's not in this document or you find that another section would be more beneficial, just let us know and I can either add it in here for the additional code or we're happy to jump on a call again and kind of go through whatever specifically you need to work on. And what we'll do is we'll get I I I have a question about um other uses for this. So it we um we looks like we used this template when we built out the hybrid one PDF page. We took that PDF and we put it into this template. Uh It was similar to that. Yeah, it was OK. That's uh that was my question because if we wanted to do that, there was a lot of work that you did Alan and I don't know if that's something that we would want to do on our own or if we would still reach out to you because I, I foresee um at least in the near term uses of that kind of revised template that you built for us. It really is, was, is really quite easy. It is just a series of full with images with um the video ins. It's just, I mean, it really that it just, it was just me figuring out how to get that so that it would, it would display correctly, but it really is just full of images and then video embeds. So we just, I just broke it into images and just where the videos were. I just did the video embeds. OK? So I know it, I know it looks, it looks very complicated and whatnot, but in all actuality, it is, it is, it is pretty simple. OK? It was just, it was just, you know what took the longest to figuring out what the best way to do it was gonna be. Yeah. Yeah, I think, I think if we were to do it again, which we may, we may do that, we may need to reach out to you. Ok. Ok. I'm still here. I'm not going right. And what we'll do is we'll, we'll get, we'll get all three of you set up with access to wept. And so you can log in, um, I'll get this recording, um, put up on a page on the back end of your site so that you can get, you can have that link and you guys can refer to this recording whenever you want. Um And then probably on that same page, we'll put a link to the um, the uh the, the Google Doc with all of the instructions. Sounds good. Sounds good. Mhm. All right. Awesome. Thank you all very much and enjoy the rest. You. Thank you. Thank you. Thanks everybody. Thank you. Bye bye.
The products described in the videos, images, and documents on this site have been approved authorized by the company for use in the United States only. The materials on this site are provided exclusively as an educational service for medical professionals and do not necessarily reflect the views of KARL STORZ Endoscopy-America, Inc. The decision to apply any of the information on this site is at the sole discretion and choice of qualified medical personnel, who are advised to verify the applicability and the suitability for any particular situation. KARL STORZ cannot be held is not responsible for the misuse of any information on this site.