HAslemere hall: Content Management System (CMS).
The following quick guide illustrates and explains how to add information to the website:
- Logging on
- Summary of structure
- Adding information
- Listings
- Images (featured)
- You Tube trailers
- Changing static pages
1.Logging on:
Using the password and username given visit the following link:
Enter your details and log on.
The Dashboard is the place where you can always return if you get into trouble. The dashboard button is top left of all the screens and has a small panel of common actions you can take.
2.Summary of the structure.
The website is based around categories which contain the information i.e. event listings and single pages like, about haslemere hall, contact us etc.
Page or Post
To be clear on terminology, a page is a static page and is at the top level of the website, these are:
About us, Society links, Newsletter Signup...
A post is an update to the website (event listing) that will belong in one of categories that are already set up i.e. Cinema, Feature, Coming soon etc. T his will become evident when changing information as the posts and pages are accessed from different buttons.
3.Adding Events/Listings
Click the posts menu bar on the left or use the simple links from the home screen box.
Once in the posts page you will see similar to the image below. This will show a current list of all the posts together (from all categories). To see only the cinema listingsclickthe ‘view all categories’ dropdown box and select the ‘Cinema’ category, then click the filter button (in largest red circle below). This will show the latest listings. Here you can adjust text/add images/ and so on [explained below].
To add a new post click the ‘add new’ button at the top of the page [see image above] & you will see:
You will then see the ‘posts’ page where you can start to type your post. Enter a title at the top of the page and then write your main information in the panel beneath the title. You will see that there are some common buttons that you would see in word where you can bold and italic text or even add a link.
Important: So that the listing appears in the correct place on the website, the most important action here is to place it in the correct category. Using the tick box on the right hand side, tick the relevant category – ‘Cinema, Theatre, Featured etc. This will make sure the listing appears with all the other listings and more importantly on the home page in the ‘featured’ section.
Category Selection.
Tick which box is relevant for your listing.
Coming Next = thumbnail list on home page
Featured = Large feature on home page.
The rest are self explanatory. Don’t worry about the Haslemere Hall Calendar Category as when you enter a date (explained below) it will automatically go into this category.
Event Listing – specific information
When you have written your event summary in the main post section (explained above), you will need to enter a short summary into the excerpt field (see Fig1 at the end of the document) – this is what is currently written for the Girl who kicked the Hormets nest:
The explosive final instalment of Stieg Larsson’s Millennium trilogy. Under police guard in hospital, LisbethSalander (NOOMI RAPACE) is charged with murder…
It’s a shortened version of the film summary but this is what appears when the item is also in the featured category on the home page. So when you have ticked the box for Cinema (on the right hand side category menu’) you can also tick the featured category (if required), but this means you need an excerpt.
Then you can proceed to enter specific film information into the relevant fields (see Fig1 at the end of the document). There are guides beneath each field. This information is displayed when each listing is used as a thumbnail in a list or at the top of the listing to provide dates and ticket purchase information.
*By selecting one of the listing types (Cinema, Theatre etc) you are telling the CMS which colour to make its background in the thumbnails – if this is left out, the listing may not appear.
Calendar
So that your listing appears in the correct day of the calendar you will then need to add the date or dates to the calendar field (see fig1) in the field titled ‘Event Editor’. You can choose from a pop-up calendar or enter your information manually (keep the same format). I would have the end date and time as same as the start (which this will do for you automatically when you tab across).
Setting the featured image:
This is so that you’re nice image is displayed across the website in thumbnails and in the featured section.
The optimum size for this image is 320px wide by 238px high – when entering an image for an event that will appear as a thumbnail and the feature, it never needs to be larger than this size. You can resize the image when you upload it (as shown below). It’s best not to upload large files as the system will only compress it and you will take up lots of space.
Click the set featured image option on the right hand side (towards the bottom of the page).
Then select the image from your computer. You then have a number of options for naming the file and resizing (see below) but the main options should be as follows:
- Edit (underneath the image) click this if you need to resize or crop the image (see below for instructions).
- Title (a nice name – this will appear in the code of the document and may appear when people hover over the image).
- Alternate Text – can be the same as above or a nice description of what the image is.
- Leave the other fields blank
- ‘Link URL’ click the ‘none’ option
- Alignment should be ‘none’
- Size should be ‘Full size’
- Then you can select the ‘Use as featured image’ option.
That’s it… See below if you want to add an image into the listing. Also see You Tube Trailers below…
All you have to do now is click the blue publish button on the right-hand side. If this is a story in the featured category it would be good to have an image to support the post. If there isn’t, the system will display a temp image which is ok.
You can always make changes to this story but once you click the publish button, it is live on the website. If you want to see it first, click the ‘preview button’. If you are editing a listing the publish button will change to ‘update’
Adding YouTube trailers.
First find your trailer on YouTube, then underneath the video there is an option ‘Embed’ – click this and some options will appear. Make sure the ‘include related videos’ is unchecked. Then further down you can see the Customised size option – in the width enter ‘340’ and the height will automatically appear. You can then highlight and copy the embed code above.
Go back to your listing on the Haslemere Hall CMS and in the main writing panel pictured above. Click the HTML tab on the writing panel. Copy and paste your YouTube code before anything i.e. at the start of this panel. This will then place the you tube video in the correct place on your listing page.
You always have the option to preview page towards the top of the screen to see if you are happy with the page before you publish and make the listing live. When you make changes click the ’publish / update’ button to confirm the changes.
Adding images: (If you don’t want to add an image – skip this section.)
Before you add any images into your story, it’s best to type all of your text first. Then you can choose where you want to place the image. In the image above you can see underneath the title of the post there are some icons beside the Upload/Insert options. The first one is an image – as you hover over the icon it will say ‘add an image’ [see below].
Click your cursor into the text where you want the picture to appear i.e. at the start of the paragraph or at the start of the news story. Note that when you place an image into the story it will automatically appear on the right hand side as per the first news stories that were uploaded.
Click the ‘add image button’ [see image]and you will see the image upload screen.
Click the ‘Select Files’ button and then choose your image(s) from your pc. Once the image has uploaded you will see it on the screen. There will be some information about the image. Look closely at this -particularly the image dimensions. Images should be no bigger than the size of the page. And as mentioned above, they will always move to the right into the post. Therefore your images should really be no wider than 610px, if they are don’t worry we can re-size them. Underneath the image there is a button that says ‘edit image’ [see image], click this and you can crop / re-size the image.
If the image has been taken by a camera and his a large file, it is best to use a service such as so you can quickly make it a lot smaller for the web. This is a simple online service where you upload an image and then can reduce by a percentage, if the image is large, I would suggest a reduction by 75%. This will make it more useable and easy to deal with in the content management system.
Resize the image
After clicking the button ‘edit image’ see above, you have a number of options. Cropping: drag your mouse over the image whilst holding down the left mouse button to choose a part of the image to crop. This is great if you want to say zoom in on someone’s face etc.
Resize: If you just want to change the size, click the scale image option (top right). You will then see the dimensions of the image in the fields. When you change one (i.e. width), the other (height) will automatically resize so that it is in proportion – so here you can change the width to say 260 and the height will automatically be calculated. Then click the blue scale button and your image will be re-sized.
Above the image are buttons that allow you to rotate the image or flip the image. Hover over the buttons and the options will appear.
*When adding an image for the home featuredpage pics these images must be320px wide by 238px high.
* Adding images to the listings or pages: the largest width you can have is 605px.
When cropping the image, after you have made the initial drag with your mouse on the screen, you can set specific crop sizes so that you can meet the required image sizes above. Once you have entered your width and height into the box, click the crop icon top right of the image. Then click the use as featured image button and all is done.
You can add and remove the image in the post by hovering over it and then clicking one of the two options> edit or delete.
Changing Pages
In order to change information on the static pages (i.e. about us, society links etc) click the pages menu button and all the pages will be listed. Simply click on the page you want to change and then click the blue update button top right of that edit page. You will notice that there is a page marked private in the list of pages. This is the ‘sponsors page’ image:
Sponsor Page:
On this page is a simple image that is pulled to the bottom part of the website. Simply replace this image with one that is 610px wide by 87px high. Then in the writing panel select the image and click the chain link icon in the small buttons above (here you can set the link to the sponsors website if need be.)
Fig 1. Adding an event / listing