Content editing is required to change the images or content of any of your dynamic pages. Content is in HTML format. For convenience a WYSIWYG editor is provided that is good for editing, but it is encouraged that a Content Author, learn HTML or atleast basics like formating, links, images etc.
Example of WYSIWYG Editor
However, before you get into HTML you should understand your admin module and how to use the WYSIWYG editor for basic editing. Once you gain a basic understanding of your environment, you can learn more about these basic HTML constructs by visiting the HTML Self learning reference
Example of HTML Editing
Page Concepts
To understand what a page is in the CMS one should understand the following concepts:
Template : A design where there is a mix of static pre-styled elements and dynamic content fused in from the CMS. The CMS content author allows one to provide the dynamic content that will be fused within the template design. A template comprises of the following Facets, Static HTML, JavaScript code, CSS style, Special attributes.
Facet : This defines a part or section of the dynamic content to be fused in the template for display for the page. A template contains multiple facets and hence the page contains multiple facets. The content supplied under a Facet is associated with the page, while the Facet Type is associated with the template. A facet can be customized to present custom admin options, help, guide and validations. If a template is changed and a page shares facets between templates, then the content is automatically available in the switched template also. Each facet can be individually saved and reverted (or versioned in advanced projects).
Design & Layout : This is technical in nature and defines the HTML structure, CSS styling of the page along with nay dynamic behavior governed by JavaScript. This is modifiable only by a Web developer with HTML/CSS/JavaScript skills. Hence the template code itself is not available in this section of admin.
Special Attributes : We can associate specal features to templates, like customize their preview URL, or other information we may want to supply to the page that may not be content and may need to be supplied by the Site manager. This helps in more advanced scenarios where we want the page to be influenced by other factors in addition to content supplied by content author.
The following is just an example of a Sample Template page with 3 Facets and some common coded elements. Your final page is a mashup of various facets and coded elements.
What is coded and what is content facet should be discussed during the design phase. Whatever is colour coded below is what the content autor can modify. Depending on the design tis may look very different based on needs but is just here as a sample.
Uploading Documents
Before we get into Content editing, a lot of content relies on images and files. Images are also nothing but files. It is important you understand how to upload these files to your webserver so you can use them in your content later.
What is FTP and why use it?
FTP is a way to upload your documents on the webserver. No matter what sort of website you use, knowing how to use FTP is essential to any content management activity. FTP stands for File Transfer Protocol. It is a way to upload and download files on the internet in a fast and releiabe fashion. Many people nowadays rely on third party services like WeTransfer or DropBox, however if you have your own webserver you must switch to FTP for the following reasons:
Centralized Storage: FTP means all your files are loaded and managed from a single server. It also means the files for your website are on the same machine as the website. Unlike WeTransfer or DropBox, where you would have to re-upload the files again to the WebServer somehow.
Faster Reliable Access: FTP can handle multiple file uploads and downloads. You can drag and drop the files and go for lunch and montor the process of your uploads. Some FTP servers even support pause, which means if your download or upload breaks you can resume it.
Better Security: Since you own the server which runs FTP. Your admin can create multiple accounts, and restrict access to folders for each user. This creates a more relaible way of organizing your documents on your webserver. Note: it is not necessary that every file uploaded will be available for the web, this depends on the folder it is saved in. You should consult the developer/admin on which folder you need to upload what files to.
How to use FTP
Using FTP is really simple. You need to follow these steps in general:
Ensure you know your Webservers Hostname or IP Address. Typically this is the same as the domain name as your website.
Ensure you have an FTP account username & password. If you do not know, get one from the admin.
, VIDEO TUTORIAL : https://www.youtube.com/watch?v=MCGctsHKizw
Where to upload files
Your developer/admin will ensure you have an FTP area to upload. Be sure to upload your files to the area you have been told. This is because some folders are wiped out and re written each time the website has a major update. Please be sure not to upload anything to those folders. You developer will mention where to upload the files and you should restrict yourself to those folders.. The FTP folder will map to a folder in your admin view, and you will be informed of the same. Use the folder given for all your files or you may lose files or not have permission to access other folders.
Content Editor
To Get to the content editor follow the following screen shots:
In CMS > Content Author. Select the page from the Left tree.
On the right the page with various sections will appear. Click Add/Edit for the section you wish to update. Based on the project, cusotmized help guides will also appear to explain what the facet/template part does.
If your content requires links or images to be changes or added. You need the Link address to that image or file. You can do this by clicking the Document Manager icon on top of the Content page Admin. The Document Manager will list all the Web folders. Click on the folder where your files were uploaded and se the listing of files.
You can also, see thumbnail images by clicking Show image thumbnails. For the file of interest copy the path visible on top of the file. It is also good to check the File Size. If the file size is too heavy (> 300 KB say) then you may want to consider not using heavy files as they slow your site.
You can also upload files from here, however it is recommended you use FTP for that as described before.
Once you have the relative path of the file(s) you wish to use. the next step is to use them. In the following section you will learn how to change Image URLs and Links.
Saving changes
Whatever changes you make you may want to:
When creating a New Page, always use the "Save All" option first time. This is because there are multiple elements to the page and you want to ensure they are all saved properly.
Save the change to the section you modified using the Quick Save Icon. Sometimes this option may not work, and you could use Save All. This is a convenience button/icon for making quick saves to changes
Save everything for that page
Preview what you just saved to check and test how the changes look on the site without it being live. Note: you have the ability to make changes without committing them on the actual website. For this reason always preview your changes after you save them. When satisfied publish them.
Publish the changes to the live site once you are convinced that what you saved works in Preview and is good.
Undo / Reset: When modifying content if you are unsure of what changes you have made you can do Ctrl+Z (undo) or press the Reset button or even refresh the page by clicking the page in the left tree. Nothing is saved until you press Save.
.
Ideally, saving content should follow the following steps:
SAVE : Save changes, so you don't loose content. You also have the option to SAVE ALL or just the part of the content of interest. To localize effects of any change.
PREVIEW : When you have made all your changes intended, then you can see it online before there is some blunder or mess up. At this point you also have the opportunity to undo, reset, revert content.
PUBLISH: When you are satisfied with what you see in PREVIEW then only PUBLISH.
Editing Content
Each project, content is subject to how the developer developed it to adapt it to suit the needs of the design and content admin. While this is subjective from situation to situation, the following points can help you understand what to keep in mind.
There are also project specific guides configured to help you know which size images etc. to use that are optimal for your design. Follow the guides where applicable.
Always Preview your changes before Publish. Remember, until you Publish you have many ways to recover and avoid catastrophic content level failure. You can rely on UNDO : Simply undo changes within the Editor, RESET - Rest to last state when you opened the editor in its current active session, REVERT options
UNDO: Simply undo changes within the Editor.
RESET: Rest to last state when you opened the editor in its current active session.
REVERT: Revert the current Published content, and and undo everything to the last Published state.
Editing HTML/CSS aka sub-layouts or content Template
Due to design or project complexities, it may not always be possible to over-simplify. In such situation you should edit the content in Source mode and make changes to the text within the markup. Updating directly in the visual editor may cause unpredictable results. This is because, the editor may not understand the nuances of how you wish to format the content and those details are available only in Source mode.
If you wish to create a new page, that uses a content Template, then COPY an existing one in Source Mode, and PASTE it in Source Mode, in the new page editor for the same facet.
You can check with the developer, which templates within your project use sub-layouts aka content templates.
Delete or Disable Content
You can delete a page by going to Site Manager and deleting the page. A Facet cannot be deleted, but you can simply blank it out.
In some cases you may want to temporarily disable the page and all its related content. You can do this from Content Author using the Special Setting Code for that page. For most projects the value of this code is 1 for disable. The reason why its a special code is because, disable can mean different things in different projects and context. Hence one may have custom values for various custom scnearios. By default 1 (One) implies it will be cut out of any CMS search or navigation. Please be sure to clear cache, if the changes do not take effect immediately. In some cases, specially navigation the items maybe cached. Deleting a Page does not delete any assets related to the page. Like images etc will remain on your Server hard drive.
Copy Paste content
Following screnarios maybe attempted while trying to copy/paste to and from the CMS:
Copy Text from a Text editing software like Word, to CMS: If you copy from Word to CMS, it will retain the formatting like Bold, colours etc. However this is not recommended because how your Word Editing Software does formatting may not be suitable for Web (specially for your website). Additionally Fonts etc can differ to some fonts not even being supported on your website. In such a case there is a high chance of you to corrupt the nature of your content over time. While its ok for one off cases, this is not recommended.
The recommended way, is to copy the content into a formatting neutral editor like notepad and from there to copy it or remove any formatting from within the text you wish to copy. Once you have copied the content in plain text, then apply formatting within the editor and use the source button to perform advaced formatting within HTML.
You can always try to use HTML Text editing software like FrontPage express, DreamWeaver, NotePad++ etc. to write your content. Copying text based content, from these HTML friendly softwares ensures your content is good to go for Web.
Copying images to CMS: Please do not try to directly copy paste images. This will not work. You have to upload images onto the CMS first before yo ucan use them. How that can be done has been described in detail in this document.
Copying content from CMS: One can copy content from the CMS. You can directly copy from the "EDIT" (Add/Edit) mode.
Document Manager / Uploader
Use FTP to upload files
Though the CMS provides a way to upload files; we recommend FTP as the preferred way to upload files reliabily and quickly. Please read the section on FTP on how to upload files to the server. You can only use files, once they are uploaded on the server.
Upload via CMS
If for some reason you cannor or are not comfortable uploading via FTP then...
Getting to know where your documents are and how you can refer to them on the Web:
If your content requires links or images to be changes or added. You need the Link address to that image or file. You can do this by clicking the Document Manager icon on top of the Content page Admin. The Document Manager will list all the Web folders. Click on the folder where your files were uploaded and see the listing of files.
You can also, see thumbnail images by clicking Show image thumbnails. For the file of interest copy the path visible on top of the file. It is also good to check the File Size. If the file size is too heavy (> 300 KB say) then you may want to consider not using heavy files as they slow your site.
You can also upload files from here, however it is recommended you use FTP for that as described before.
Once you have the relative path of the file(s) you wish to use. the next step is to use them. In the following section you will learn how to change Image URLs and Links.
File types and size
Before you upload please ensure the file is of correct TYPE and size.
For instance do not upload a ZIP file and expect the system to read through it or Do not upload a really heavy image.
Use ETL for example ETL Ready Images for any type of activity that requires pre processing.
Uploading Documents / Images
One can click the Choose File on the Document Manager to upload a file. But before clicking Choose File, ensure you Select a Folder in the Document tree where the file will go. Another point to keep in mind is that certain folders are Application folders and each time the project is upgraded the folders are rest. Be sure to know which folders are right to upload to.
Once you select a file; its an image it will show a Crop Tool. The tool is a nifty way to edit pictures without requiring a photo editor.
You can drag the image around such the area you want to crop out is under the light region. Incase the area does not match your crop area size, you can specify the width & height to change that. You can also Zoom + / - in and out to crop a closeup or far shot.
If you crop the image, and click Upload, it will upload the Cropped version. If the image was not cropped or cropped version for removed (using delete icon on top left of cropped image), then the original file will be uploaded.
On website updates, some folders are refreshed and replaced. Hence it is important to know which folders you can upload to, to avoid losing data. These folders are used by the developer(s) to supply some base images etc for the website that will always be there on any install. Ideally these can be marked READ-ONLY on the file system by admin to prevent the user from uploading files to them in the first place, but that may not always be the case.
The CMS is also capable of auto setting the Crop dimensions if it is configured from the backend for the Facet. Additional operations like compression are also possible, if configured.
If an interface has multiple document editors, be sure to use the one specific to the facet.
Resizing images
It is ideal to resize the original image to the design specifications given to you by designer or mentioned in the guide (if any provided. Like in the example below the part in rectangle).
However, do not constrain the size style yourself. See the below image of an example where the user is trying to set the style.
This is wrong for a responsive site, as it will override the sites automatic capability to adjust the actual image based on screen size. When you specify a size constriant then that will apply across screens and will cause an issue.
In the example below, the part in circle is wrong. This will override pre-programmed website styles and constrain the image not to adapt to screen size.
Context sensitive uploads
The path of a file for a particulat section can be fixed and pre-configured to a facet or content type. This has two benifits:
Consistent organized files, not vulnerable to different admins fancies.
Admin does not have to waste time to browse to the designated folder for that content section each time they open the document manager.
ETL capabilities over uploaded files
We can do advanced configurations, where an ETL process can be applied to images loaded for a particular catalog or CMS facet. These include things like rename, compression etc. Bulk actions on files on the server can also be performed.
For example, lets assume for Image based ETL, we want to keep manual uploads in synch with automated ones. So when a file is uploaded by admin, the file is renamed, compressed, put in the right folder and associated with the product all automatically.
New Page
To create a page, you need to provide some basic infromation about the page (also called meta-data).
The following describes various pieces of this information:
Page Name : Set from Site Manager, can also be updated. Note this is the display name of the page. Every page has a human readable name and a system name (which is unique). In content author you can only change the Display Name.
Special Settings Code : Content can be disabled, or have special meaning for a project given a special code. (Optional and Project specific)
Template : This is one of the most important attributes. This determines the parts (or facets) to the page and the page design/template to be used.
SEO Key words : Fills the keywords meta tag on the resulting resulting HTML page.
Page Headers : One can insert any HTML compatible text here that you want to put in the resulting HTML page header.
Page heders and Open Graph Tags
One can use it for the following but not limited to:
JavaScript / CSS for specific for the page. Example a CSS override like: <style>.Le-Mill-SS-14 .band label {color: black;}</style>
Facebook Open Graph Tags. Be sure also to check Open Graph recommendations. Also once you test a tag, facebook will cache it. You need to use Facebook debugger tool to refresh it. You can upload your images in the server and create your own tags to control social share look.
Links and Images
Updating Image URL
Using the WYSIWYG editor you can click on an image and change its path by seecing the image icon and then in the URL updating the path to change it.
Updating/Creating an Image URL
While the WYSIWYG is good for editing, for creation of new resources it maybe best to wotk in HTML view. You can do this by clicking SOURCE button. You will notice HTML code. In the example here, you see a list of images with the URL in src attribute. You can copy paste a row and modify it to add a new image to the slide show or list of images or content in this example.
Creating a Link through the WYSIWYG Edtior
Depending on the section you modify this option may or may not be available. You can speak to the admin to make it available if you really want it.
Creating a Link through HTML
In the HTML code you can place the image or content between <a> ... </a> tags. In the a tag ensure you provide an href to specify the link.
Note: The paths are case sensitive, which means /img/abc.jpg is not the same as /img/ABC.JPG
Common Content Editing Tasks
While its always advised to learn HTML and edit things in source mode as things get complex, some common edit tasks can be performed without knowledge of HTML also.
HTML tutorial references are mentioned at the end of this document.
Align an image or content
One can directly select the content and try the WYSIWYG buttons. In the case of center align and images this may not work always because the concept of center depends on what the width is. In order to give a context to the editor of the width to which we want to center, try including one line before or after in the selection of your mouse and then use the center justify button.
Another way, to custom align with margins etc. can be to create a Table using the Table icon, and placing your content in one of the cells in the table. Then using the mouse one can adjust the height, width, spacing around within the table. Also, using the table tool one should ensure border width is 0 so no lines appear. A table defines a defined space, within which then its easy to control spacing and margins. Learning to tables can also allow you to do cool things like having multi column content etc within the block.
The above image shows how you can create a table. The one below shows how you can drag content in a table. On Right click you can access table properties and edit the table and its spacing, borders etc.
Copy / Paste pure content without formatting
Content Editors are not compatible with each other many times. So if you copy/paste from a Word Editor, do not be surprised if you format gets messed up on the website. This is because styles and formats are subject to medium of display and the context. So it may or may not work, but rather than playing bingo one can adhere to the following guideline.
The correct or ideal way to copy / paste content is to select the pure content and get rid of any formatting from the source editor. One can do this in multiple ways.
Paste the content in a format neutral editor like Notepad and copy again and paste it in the CMS edtior.
Depending on the editor you are using, for example for MS-Word, once can also remove formatting from within the editor. Here is a tutorial that shows you how.<
Content Delivery Networks
What is a CDN ?
For more advanced websites like E-Commerce. Your site maybe configured with a CDN network like Amazon. A CDN helps distribute your content to various locations across the world so that it can be equally fast from every corner in the world. It should be employed for sites that demand an international presence and have to use a lot of images and content.
One should typically use a CDN if the target audience is far from the hosted location (ususally America) and you are experiencing erratic performance in images loading etc. CDN are cloud hosted and are addtional costs depending on the company providing the CDN infrastructure. This is in addition to you Hosting however, charges are based on actual usage mostly than a monthly fixed fee.
How do CDN's work and fit in?
The site is developed in a way that the site pages refer to the CDN server for images instead of the actual Host machine. So when a request is made for an image, it contacts the CDN network. The CDN internally decides the closest server having that content and sends that to the users browser. If the content does not exist, then it will fetch it fresh from the Host server where the site is hosted. For this reason there can sometimes be issues wih the CDN may have an old version of the same image. The following section will talk about CDN related issues and how they can be overcome by the administrator of the site.
CDN related problems and fixing them on the site
There are some pain points with dealing with your content and CDN. Namely, caching issues. When you update a File with the name unchanged, it may not reflect on the actual website because the File tha the CDN is showing your users is the old cached one. To ensure there is no cache issue, please follow the steps:
(Note: ensure you are using a browser like Chrome or one with a FireBug extension)
Check Path of resource
Goto your website and check the image. If its not updated for some reason, Right Click on it and select Firebug option. You will get the path of the image being shown on the browser. Copy the path. Example: //d2e2u0vtg49awe.cloudfront.net/img/home/banners/NB_3.jpg in this case.
Extract relative path
From the copied path, like in our example //d2e2u0vtg49awe.cloudfront.net/img/home/banners/NB_3.jpg. Derive the actual Web relative path by replacing the CDN address //d2e2u0vtg49awe.cloudfront.net with your website host address, to make it http://yourhost.com/img/home/banners/NB_3.jpg. This is the address of the file on your actual webserver. Open this in a browser and check if it the same the CDN is showing. If not, it means the CDN has an older version of the same file.
Update CDN File
If the files on the CDN and your webserver are not the same then you should create a comma separated list of all the relative path names, eg. /img/home/banners/NB_3.jpg,/img/home/banners/NB_4.jpg etc. Feed this to the CDN Admin consle or our Admin ETL CDN integration tool and update the files. It takess about 30 minutes for the CDN to refresh the files. You can check later again if the files are upto date and in synch between the CDN network and your website. Note: The paths are case sensitive, which means /img/abc.jpg is not the same as /img/ABC.JPG
After you press progress, you will get an ID from the CDN that is generated by the CDN. You can use this ID to verify the status later. The ETL Id on top is the website process ID. For instance in this example the CDN ID = I1F0YYZAK55HVL and the website ETL process internal ID is 565830.
Check CDN invalidation Status - Amazon
This step is applicable if you have Amazon login credentials; if not, then you can wait and hour or 2 as the CDN will be updated across the regions in the world. Check back later.
Goto Invalidations, by clicking the distrbution for your website and then INVALIDATIONS tab on the following screen:
You can check the invalidation staus of your changes via your CDN Admin console. In the case of Amazon it looks like the above.
To check the details behind the invalidation you can further try the above step.
Content is behind the scenes HTML markup content. This includes HTML tags and attributes (Source mode). The WYSIWYG editor hides these details to make it easy for a non-technical editor to edit; but at best its just a gimmick in fact. Often switching between the actual markup and display content can cause some undesired effects. For example if you paste a link in content mode of your editor; then in source mode its not just text but it would be decorated as content. This makes any content undesirable for use as raw data or raw as is. One must go into source mode and fix it.
Scripts are not intended for human consumption. Scripts are special code that are intended for UI-development. Unfortunately, since a lot of free plugins come, they require a non-technical user to paste such `code` into the editor.
Embedding Scripts/plugins
Please keep the following in mind when embedding scripts:
If your page supports a facet called Script; then place all scripts there.
Always ensure you are in Source mode to embed the script. It technically does not really matter for the most where you place this script. Only if there are multiple scripts and dependencies between them, then it matters. But for that you should anyway be a developer and this tutorial should seem trivial.
Single quotes (') are not supported and will be converted to ASCII symbols. You can choose to use double quotes (") or `.
If you wish to replace a lot of quotes; paste the code in a plain text editor. Then do a replace-all ' (single quote) with ` (grave accent). Then copy-paste it in the content editor in Source mode.
If you plan to use it very often then its best you talk to the developer to abstrct the solution as part of the website to avoid repeating the mess of pasting it for every page. For that matter anything that is repeated often could ideally be a case of development enhancement request.
Your plugin or widget may come with a lo(o*)t of script code. Do not just dump all this code in the content. The reason is that for each widget you will dump this every time. It will cause your code to bloat, load slower, occupy more content and disk space and can cause other issues.
The right way is to had the script + CSS to the developer and ask them to include it in the pages. You can also do this yourself also by (DIY steps):
Saving the javascript in a .js file and the css in a .css file. Note: Most good plugins even supply you with the file to include
Upload the file in an area that will not be deleted. So say call it author-plugins/myplgin/plugin.js. Where say 'author-plugins' is a folder for all your plugins. Then the specific plugin for which you want the files, and then the file(s) itself.
In the page content include the javaScript file as for example:
Note: Here the path can be verified by the doc manager. Copy the path displayed in the Doc manager for your uploaded file.
Liability: When you use a third party widget, you are doing this at your own risk and liability. Website support and warranty does not cover any use of any third party widget, that is not part of original intended scope. This liability will carry even if the developer assists you technically, as many aspects of the widget are still unknown to the developer such as license agreements, source of content or code, its full impact on existing site etc.
When making changes to the wesite itself; make changes to the css/all.css and js/all.js. Before you do, also take a backup of the files you modify. This is for testing only. Any dev level changes after verification must be communicated back to project base (Developer). Also, do not forget to test in incognito or private browsing mode as these files are cached by the client browser.
Conventions
Content management is more than just uploading content and calling it a day. Content must be organized properly. The following check list should help you maintain a helthy set of CMS and on-disk resource content:
Organize images and resources in folders you can relate with a topic, page or some category that makes sense.
Typically keep file names symbol free, lower case, and instead of spaces use hyphens. Also for SEO purposes use meaningful names. Example: board-of-advisors
File sizes should be restricted not to be too big.
Delete files for content that is no longer used from time to time to prevent disk space from being wsted over time.
Do not place files in System folders reserved for the core application/website. They will be erased on next update. Typically a content author is abstracted away from such system details for such reasons so they don't make mistakes.
Image resize and optimization tools
Othe rthan using the CMS one can also use other third party tools for image correction:
Browser based: Image optimizer for the web - https://chrome.google.com/webstore/detail/image-optimizer-for-the-w/ligiekfoifeplpmblekefdhjkhakimmd?hl=en
Content editing is required to change the images or content of any of your dynamic pages. Content is in HTML format. For convenience a WYSIWYG editor is provided that is good for editing, but it is encouraged that a Content Author, learn HTML or atleast basics like formating, links, images etc. You can learn more about these basic HTML constructs for the following by clicking on these links:
