Website How-To Guide: Mastering the Code
Background Info
This is a brief guide of how to code pages for the UBC Farm website and also how, where, and what to put in entries for the website. We know coding seems overwhelming if you’ve never coded before, but with this guide, you should have everything you need to make the process a breeze.
If you have questions about making entries for the website that are not covered here or if you are unsure how to do something on the website, please contact the communications team or Karen Lee for assistance.
Important Notes Before Starting
NEVER use the visual editor mode when coding pages. You must edit in the text (HTML) editor. If the page opens with the visual editor, click on Text – or else it will break the page!
NEVER take photos from Google without checking their usage rights (see images section for more details)
ALWAYS make sure to optimize images for web use before posting them to avoid having massive pages (see images section for more details)
ALWAYS use existing code or template from an existing page rather than coding a page from scratch.
ALWAYS make sure to check your work over before publishing the page/post/event – correcting entries is harder than making them from scratch
NEVER publish a page before it’s finished because it will be public in its unfinished state (see posts/events section for more details)
Pages, Posts, Events
Let’s start here. What is a page, post, or event and when should you use each one?
A Page is a main, permanent website page where permanent content lives. Unless we are making a new section for the website, making new pages is not common in day-to-day editing. If you need to make a page or think you need a page on the website, please contact the communications team and we can help.
A Post is for time-based or temporary content, usually used to promote events and news postings. Posts are versatile and are used to autopopulate sections of the website, such as the front-page news and events feeds as well as sliders (e.g. researcher profile slider), and category pages.
An Event is exactly what you think it is. An event entry shares much of the same code as a post, so usually you can make a post and then copy and paste the code into an event entry if you are promoting an event on the website, you just have to add the event date and time as well. Event entries are important for populating our events calendar.
Components Page The “template” page which has all the elements to be used on the website, from colours to headers styles. (Go into editing the page to copy the relevant code from this page, but don’t make any changes to this page). This page is helpful and provides our style backbone, but generally, just cut and paste from an existing page or post (pick one that looks good!), and you won’t need the component page very often.
Making a Post
Important Notes:
- All code fragments listed below do not have triangular brackets around them because they would be implemented if the brackets were inputted. You must add <> around each of these code strings so that they work in your pages.
- HTML works by putting your text between two tags in these triangular brackets, one begins the instruction e.g. h5 (header font 5), and when you want that instruction to end, you add a backslash, e.g. /h5. This applies to all HTML code.
- Make sure you preview before publishing to make sure there are no errors. Best practice is to learn and use a code editor, such as the free Visual Studio Code, which will help you detect errors.
Login to CMS UBC and open the UBC Farm Website dashboard (Don’t have access to the UBC Farm website? First log in to the UBC CMS with your CWL, then contact Melanie Kuxdorf or the comms team and ask for access and provide the email address you used to log into the CMS.)
Press the + New button at the top of the dashboard toolbar and select post
This will open up a blank post creation page as below. Let’s explain a few of the components on this page
The blank white box in the middle of the page is where you will be inputting your code and functions.
The buttons next to the white box will let you publish, update, set visibility (privacy) of your created post, select which category the post belongs to, and set featured images.
The toolbar above the white box will let you add photos/media into your page, insert forms or payment information, and hyperlink content in your posts.
The white box above the big white box is the title box, where you can title your post.
The boxes below the white box labelled “Custom Fields”, “Custom CSS”, and “Custom Javascript” allow you to do interesting things with your page. The only box you will work with is the Custom Fields box. The other two fields should not be touched unless you want specific complicated elements for your post, in which case you should contact the communications team about using these (the guide will not cover much on this because it is unnecessary for basic posts).
Write a title for your post at the top
Click in the blank white box. You can type in code here. Put this code at the START of your post div class=”row-fluid expand row-padding-default” followed by div class=”container”. This will signify that your page width is contained and not spanning the whole width of person’s screen
Type in div twice at the end of the post to wrap up the two strings of code you inputted in the previous step. These div’s must be at the END of all of your code
Type in h1 and /h1 and type in the title of the post you are creating between these two code phrases. This will create a big text title at the top of your page
At this point, you can start plugging in different text elements and photos into your post.
Here are a few strings of code you should use in your post:
Every line or paragraph of text needs code at the beginning and end. You can type/paste in your text into the page and then add the p style=”padding-bottom:20px;” to the beginning of the paragraph and and /p at the end of the paragraph. This will create text on the page in the default font of the website. The text you are reading now is in the p font style. The “padding-bottom:20px;” portion of the code defines where (bottom = below) and how much (20px = 20 pixels) space is added relative to the text. You should generally stick with padding-bottom to keep things simple, though padding-top does the same thing above the paragraph. Avoid using padding-left/right. Additionally you can usually stick with 20px as the spacing amount since that give you 1.5 line spacing found everywhere on the website; you can increase this spacing or decrease it if there are images – it’s fairly modular, so play around with it!
There are several fonts you can use for section headers and sub-headers. These codes are the H and /H string of codes. There is H1, H2, H3, H4, H5, and H6 accompanied by their closing codes /H1, /H2, /H3, /H4, /H5, and /H6, . Each H-code will create text in your page of different style, size, and font.
Refer to the components page to see what each H-code looks like and use whichever ones you think are appropriate for your post.
Generally speaking, you will use H1 for the main title text at the top of the page, H2 for the big subheaders under the title of the page, H4 for the sub-sub-headers, and then H5 for small headings or important notes that need to be emphasized. H3, H6, H7, and H8 will generally not be used in your posts.
You should also make sure to add in padding-code after your H code to make sure your text maintains the same spacing throughout the document. The style=”padding-bottom:20px;” can be used after you type in any of the H-series codes to add spacing to that title/subtitle. Here is an example of how the full code string will look like h1 style=”padding-bottom:20px;” INSERT TEXT HERE /h1. As you can see the code pair and style for this padding is the same as the one listed above for the p style=”padding-bottom:20px;” and /p code pair. Just replace the P with any of the H-code pairs and the spacing should work out fine.
If you are having trouble creating spaces between blocks of text or images with the padding code, you can use the br (break) tag to make a line break. There is no closing tag for it, only the <> around the br is needed. This is a great cheat code to have in your back pocket!
Also, add class=”container component-container ubc-bottom-border” to posts and events that have sponsors, in order to separate the body of the post from the sponsor info at the bottom. An example of this can be found at: https://ubcfarm.ubc.ca/events/event/food-sovereignty-africa-post-covid-19/
Here are some text-edit codes you can use to make your text pop:
If you’re looking to bold your text, you can use the strong and /strong code strings. This will bold the text as shown in this line.
If you’re looking to add italics to your text, then you can use the em and /em string of code. This will italicize your text as show in this line.
You can also put in a special type of p-style code that can make your p-text larger than the default font size on the website. This is called the lede style font and can be used immediately after the H1 text (i.e. the main page title text) to enlarge the following text. You can use the code string p class=”lede” and /p to create this larger font. You usually want to reserve this text style to the introductory paragraph of your post since it’s meant to act as the lede or hook of the page.
Here are some in-text elements that you may also find useful to use, and shortcuts for these can be found above the editor (highlight the text and the editor will automatically add the start and end tags)alg:
If you are looking to make bulleted lists in your post, then put the ul and /ul code strings at the start and end of the list items to indent the list properly. After the ul code, you should then add your list items and make sure each line has the li and /li code strings at the start and end of each bullet item.
The convenient thing is, if you want a numbered list, it is simply a matter of following the same steps as above, but replace the ul and /ul code strings with ol and /ol and voila, you have a numbered list instead of a bulleted list.
Here is an example of how this should look:
ul
li INSERT TEXT HERE /li
li INSERT TEXT HERE /li
li INSERT TEXT HERE /li
/ul
Using the formatting tips for text entry above, you should just be able to assemble paragraphs and titles with ease. There are other features and fonts that are possible on our website, but these will be the main ones you will use.
Now that you have text on your page, it’s time to put in some photos and media in your post. You can easily put in photos by clicking the Add Media button on the toolbar above the white code box you were working in. From here, you will be taken to a menu that will allow you to plug in photos that have already been uploaded to the website or upload your own from internet searches or our photo archives.
To add a photo, you can click on it or upload an image and then click on it. Then you should choose an alignment for the photo and a size. Alignment will adjust where your image will populate the page: left-align will put a photo along the left margin of the page, right-align will put a photo on the right margin of the page, center-align will put a photo in the middle of a page (generally not recommended for most posts unless your image is really wide, which should not happen), and none-align will place your photo in line with your text (this option should never be used).
You can choose some of the default sizing options from this menu when inputting images, but it is usually better to edit image size in the code after inserting it into the page.
Clicking insert image into page will result in a string of code to populate your white code box where your cursor was last. The string of code will look something like this img src=” IMAGE URL HERE ” alt=””width=”400″ height=”400″ class=”alignleft size-full wp-image-22750″/. This string of code will show you the width and height of your photo, the photo URL, and also the alignment of the photo – all things that can be edited directly in the code!
It’s generally best to use square images to make resizing easier from the code, but even if you have rectangular images, resizing images is easy. You can simply increase and decrease the width and height portions of the image code to resize the image. You need to make sure to increase/decrease both width and height by the same amount for the resizing to work. If you do not do so, the image will not resize and revert to its default size. What I mean is, from the example above where the width and height are 400 x 400 px, you can’t change width to 350 px and then change height to 375 px. You HAVE to make both height and width equal to 350 px for the resizing to work. This is the only way to resize your photos on the website. DO NOT USE VISUAL EDITOR TO DO SO OR YOU RISK BREAKING YOUR CODE AND RUINING YOUR HARD WORK.
You can just change the alignment in the image code by changing the location portion (i.e. left, right, center, none) of the class=”alignleft” in the image code string. This will move your photo left, right, center, etc… depending on what you write.
There a few options here that are worth mentioning:
You can edit images in this menu directly through the website image editor. This feature is not extensive, but if your image simply needs cropping, then it will do in a pinch. It is preferable to use software on your computer to edit images before uploading images and OPTIMIZE (OR REDUCE THE FILE SIZE).
You can also add captions to photos from here. Adding captions is generally not recommended for most posts because it doesn’t fit with our general posting guidelines, but for those who want to put in captions, please insert this code string in the caption slot p style=”text-align: center;” INSERT CAPTION TEXT HERE /p. This will make all captions automatically middle aligned relative to the photo you’re putting into the page.
Important Note About Captions: If you resize your images directly in the code after inserting an image, you must make sure to resize your caption width in the code too!
Here is an example of a captioned image code: caption id=”attachment_22750″ align=”alignleft” width=”300″ img src=”https://lfs-ubcfarm-clone-2018.sites.olt.ubc.ca/files/2019/12/Siyun-Wang-400×400-1-300×300.jpg” alt=”” width=”300″ height=”300″ class=”size-medium wp-image-22750″ / < p style="text-align: center;" >Siyun Wang, PhD< /p > /caption
You can adjust the image alignment and size the same way as mentioned above, but in addition to changing the image alignment and size, you must edit the code within the caption id=”attachment_22750″ align=”alignleft” width=”300″ to match the size/alignment of your photo. For example if you make the photo above width and height of 250 px, you must change the caption width to 250 px as well or your photo will not scale properly.
PLEASE GO TO THE IMAGES SECTION OF THIS DOCUMENT FOR SPECIFICS ON ADDING PHOTOS
After putting in photos and text, you’re almost done! You have to put in a featured image to your post. To add a featured image to your post, go to the box beside your white code box labeled Featured Image and click on Set Featured Image. You will be taken to a menu that looks the same as the Add Media menu. From this menu, you should choose a photo to use for your featured image. The photo MUST BE A SQUARE IMAGE NO LARGER THAN 300 X 300 Pixels. You can either use the photo editor in the menu to quickly crop your photo or more preferably edit the photo in another program on your desktop before uploading to the site. Refer to the Images section of this page for specifics about photo uploads, optimizing photos, and preferred image sizes.
Afterwards make sure to select a category for your post! This step must be done or else your post will be tagged with uncategorized making it unviewable on the website. Choose the relevant category the post belongs to and tag as many as necessary for your post.
Here’s how your posts should be categorized:
Researcher, Worklearn, Internship, Practicum or Workshop Profiles are categories used for interviews or one-on-one features on workshop presenters, worklearn/internship/practicum students, or researchers. Generally this a category the comms team uses and nobody else.
Events-Feed-New should always be tagged since it will cause your post to show up on the front page of the website or wherever Events features show up on the website. These categories will be the most used categories you will use!
On a slow day, remove the Events-feed-new tag from posts consisting of (solely) previous events that have already passed. When you press New -> Post (in the drop-down menu), then you’ll see an option called All Posts on the left sidebar (it’s located beneath the larger Posts option, which is highlighted in blue). Click on that, and you’ll see an All Categories filter option near the top. Press that drop-down, and then click on Events-feed-new, then finally press the Filter button (on the right).
You can see the Date option on the right, just above the published dates. Click on that in order to organize the posts from oldest -> newest (since older posts tend to be more likely to contain past events – but always check!). Access a post by hovering your mouse over its Title section, and click View. If you’ve found a post with an outdated event, hover your mouse over its Title section again, and click on Quick Edit. There, you’ll see the Categories checkboxes (in the center) – uncheck Events-feed-new, press the blue update button on the right, and you’re finished!
News-Feed category is also a very common one to use. Tagging your post with this category will cause your post to show up under the news section of the front page of the website.
The News and Media category has two subcategories in it which are the Research News and Cluster News categories, which will automatically populate the “Our Researchers in the News” news feed or the diversified agroecosystems research cluster page newsfeed, respectively. You can alternatively tag one or both if you only want that news story to show up under general research news or news relevant only to cluster members.
Markets and Market Blog categories should also be tagged together. These categories will cause your post to show up under the market page on the website and subsequently the market blog. Recipe blogs or vendor features will ALWAYS be tagged with these two categories.
Community Kitchen Blogs, Coffee Series, and Future of Food categories will link your post to the community kitchen recipe page, Feeding Growth Coffee Series page, and Future of Food talks page respectively and populate in the respective section of the website.
The remaining categories are not relevant except for communications team purposes or IT purposes
Contact the communications team or your team supervisor if you’re not sure which category to tag your post with
The last thing you need to do with your post before publishing it is add custom fields!
Custom Fields are necessary when tagging posts for the events feed, news feed, news and media fields, and researcher/intern/worklearn/practicum/future of food profiles.
For events feed items, you need to add a custom field of event-date and post-link. In the event-date custom field box, you should put in the date of the event you’re creating the post for. In the post-link custom field box, you should put in the title of the event you are creating a post for. After filling in these two custom fields, you can press Add Custom Field and they will be added to your posts. Once you update or publish the page at this point, your posts will have titles and dates attached to them on the events feed
For news-feed and news/media tagged items, you need to add the custom field post-link. To do this, create a link with the text editor. In there, the link of the news story is the URL (or, the URL is your own post’s link if there are multiple news outlets). The post title (“Link Text”) for sharing news stories is [Media Outlet Name]: [article headline, which is shortened if necessary]. An example would be National Observer: Plant-Based Meats and Sustainability. Then, press the Add Link button. Cut and paste the created link into the post-link custom field, and then press Add Custom Field.
Other custom fields will be irrelevant for most users of the website, so don’t worry about them. If you suspect that you need assistance here, then please again contact the communications team.
YOU ARE DONE!!! NOW ALL YOU HAVE TO DO IS SAVE YOUR DRAFT AND PREVIEW YOUR POST. CHECK TO SEE THAT THE POST LOOKS LIKE HOW YOU WANT IT TO LOOK AND THAT IT IS FINALIZED.
Also check the News category of the home page for a news-feed post, to ensure that it’s displaying properly there.If everything looks fine, then go ahead and publish your work! Congratulations, you just created your first post on the website. Guess what, creating events will be a cinch after because you will just copy and paste everything you did and put it into an event!
Making an Event
Every time you make an event, you need to make a post so that you can promote it on the website. This is great because it basically means you simply have to copy and paste the code you created for the posts above. If you forget these steps, then simply refer to the steps to make a post above.
After copying the code from the post you made, you need to scroll down and schedule a date and time for it so that it can show up on our events calendar page.
Unlike posts, you don’t need to worry about adding in a featured image or any custom fields. You will still have to tag a category for each event and these will usually vary between events. The categories are fairly self-explanatory for events (e.g. UBC Farm Markets will be tagged if it’s an event relevant to the Markets, Community Workshop category for workshop-related events, etc…) The only categories that may need some explanation are special events and public external events at the UBC Farm. Special events should be tagged for any event that does not fit in any of the other categories, but is still hosted and run by the Farm. Public external events at the UBC Farm should be tagged for ALL events that are not run by the Farm, but hosted at the Farm. Examples include any cross-organization collaborations with City of Vancouver or the Medicine Collective at UBC.
Click Publish and voila, an event has been created.
Rule of Thumb: Every event needs a post, but not every post needs an event.
Images: Finding and Choosing the Right One
Images are so integral to making engaging and informative posts and events. All posts and events must have one or two pictures.
Whenever possible you should always use photos in your posts/events that were taken by you or others at the Farm. These are usually much more pertinent to the post/event you are promoting and avoid any usage rights issues.
What are Usage Rights?
To make a long story short, these are copyrights that companies and individuals place on content (like videos and photos) that prevent people from just using their work without credits or payment. Breaking these protections will result in copyright strikes against us at best or a lawsuit if someone wants. These violations are easy to avoid; read on to see how.
Generally speaking, you can use most images that have been posted on other UBC-affiliated organizations and faculties, but a Photo Credit should be given if possible. The photo credit just needs to acknowledge the organization or faculty.
If you are promoting a publication or news article that features one of our researchers, feel free to use the photos from the news publication, but as before a Photo Credit should be used. The photo credit should include the news organization or source AND if possible the name of the photographer if provided.
Using photos from Google Images is a really big *NO NO*. Google will screen images by popularity so the first images you see may not be have a free license to use. Using these images in any post or publication would violate these usage rights, BUT there are plenty of images on Google that do have a free license to use. How do you find them you may ask?
Well, open up Google Images and type in whatever you want an image of. Once the results load in, you can then click on Tools under the search bar and small toolbar will appear underneath the search bar. Click on Usage Rights in this toolbar and then click on labelled for non-commercial reuse with modification. Voila! Google Images will now provide you with images that have a free to use license that match your search request.
One Caveat: Just because these images exist, does not mean you should rely on them. Unfortunately, free to use images are usually lower in image quality and don’t always match exactly what you may be looking for for your post. Let this be an incentive to use the other sources mentioned above or our own images over Google’s.
What Images do we have?
We have an absolute treasure-trove of images for you to use in your posts and events. We constantly update our Flickr and Instagram accounts with beautifully shot photos, so I would suggest you search there first. If those images just aren’t quite cutting it, then feel free to peruse our website for images too. Finally, we have a full folder on our server with thousands of wonderful, albeit poorly organized and categorized images.
Image Optimization: The Essential Action
Before you upload an image to the website, you must optimize the image to make it a small file size.
Not even large images should ever be over 400kb (that’s less than 1mb). This is to speed up loading time, and to reduce the amount of data it takes a user to view our website. See the standard below.
Banner image (change via CSS, see bottom section of this page – they’re the largest images on the site): Up to 2000 pixels wide. Max size: 400kb.
Post/Profile/Square images: 300 x 300 pixels (cropped square). Below 200kb.
All other images: Under 1000 pixels wide. Below 300kb.
How to optimize images:
Photoshop: If you are using photoshop, make sure you first Save For Web (Save for Web function: keyboard shortcut: ctrl + alt + shift + s (Windows) and cmd + opt + shift + s (Mac)), and there you can control pixel dimensions and file size.
Optimize: Next (or first if you are not using photoshop): Optimize the image using an app, (simply drag the photo into the app and it will do the work for you).
You can use Web-based apps to optimize images too:
https://tinypng.com/ (max 20 images before you must go pro)
https://imagecompressor.com/ (max 20 images before you must go pro)
App Download for PC:
App Download for Mac:
Drag the image into the program and voila! You have a web-sized image. Then you can upload the image to the website and everything is good.
What about all those giant images I already uploaded? Many of you have already uploaded huge images, and unfortunately we can’t leave them on the site. This is what happened with our old site and it became a monster. If it’s a past event post that we don’t need to keep, you can go ahead and delete that post and the original image (ask me if you’re not sure). Otherwise you will have to optimize the original image, reupload and replace it on the site. And please delete the large image version when you’re done. Warning: make sure you replace the image in all the pages that it appears (i.e. event page and post). Then you’re done, and you will always optimize new images before uploading so you will never have to go back and do this again.
Steps to change banner images:
In order to change the banner image, use the code below, replacing the capitals with the required information (ie, Banner name, URL, descriptive text). In order to find the copy and pastable code, go to https://ubcfarm.ubc.ca/csfs-research/effect-of-artificial-light-at-night/, click to edit the page, find the banner code at the top, copy and paste into your desired page, and make the necessary changes. Instructions for adding the image and getting the correct URL in the next steps.
Download your desired image. Optimize and edit the image (with Photoshop, etc.) to make it suitable – I personally get the image to a height of around 410px.
Add the optimized/resized image to the Media Library. Either use the Media button on the left sidebar, or the Add Media button above the HTML editor. I like to open the Add Media in a new tab to make it easier. Upload your resized and optimized image, then, once it is done “crunching” copy the file URL – click where it says “Copy URL to clipboard” right above the Attachment Display Settings. Paste this URL into the location in the code where it says IMG URL.
Working with Accordions
What is an accordion? It’s similar to a drop-down menu, and is a tool to make website content collapsible in order to show and hide HTML content. You’ve likely seen this from other websites before. At CSFS, this is used on things such as the People page – click on the link to open it in a new tab. The below code is of a slightly-modified profile from the page. There are explanations in red that highlight the key components you need to know. The code’s visual output is shown to the right of this text!
Important – please read before editing accordions:
In this accordions tutorial, “objects” refer to each separate thing on the website that requires one or more accordions. For example, each profile on the People page could be considered as a separate object!
When modifying code with accordions, you must add, delete, or change the location of row-fluid code snippets, as well as the number of /div at the bottom of each object. As you add or remove an object, the below objects’ placements would also change, so you’d need to go through not only code you added/removed, but also all of the code with accordions that, in the HTML text editor, is beneath what you’ve changed.
Please see the screenshot above for details.On the People page, the profiles are placed in alphabetical order by last name.
On most pages, there are many /div in multiple locations. Make sure to add and remove these in the correct place when working with accordions! It’ll become increasingly intuitive as you do it more.
If the webpage does not display properly, a common mistake (well, at least for me!) is that you’re either missing or have an extra /div. Check to see that all of the div tags have a /div to them at the correct places.
Adding code that includes accordions:
Copying and pasting an existing object’s code makes for a good starting point. Look at the existing code to deduce where certain types of text (e.g. an associate’s bio) should be added.
Removing code that includes accordions:
When you remove an object with accordions, you remove the part starting from either the row-fluid or the spanX code, as row-fluid is only present if the object was placed at the start of a new row.
Also remove the associated /div – the number to remove depends on whether the object is the right-most one in the page display.
If it is, then check the code to see how many /div are placed for objects not at the right-most position. Then, remove an additional /div when removing the last object in a row.
If the object to remove is not the last one in the row, then check to see how many /div are used for objects not at the right-most position. Then, remove that number of /div when removing an object.
CSS Editor
*Please note the CSS editor is currently broken.*
Making it mobile-friendly: formatting code to include in your posts
Go to this Google Doc, which contains everything else you need. The code on there has all of the necessary brackets included – no need to add or change anything 🙂
Template Code
Do you have code that you want to save, but don’t need it currently displayed? You’ve come to the right place! Template code is really useful for saving data from a previous job posting or former event, stuff that may reappear in the future (but needs to be kept off of the website for the time being). See the code of LFS 496 as an example.
The below screenshot consists of code from the Work With Us page, essentially it greys out the code so we can use it for page instructions, templates, placeholder text, that sort of thing.
Adding a Publication
Step 1: Upload the PDF as a media item and copy the link provided. (or, if there’s a direct link to the publication, that can be used as well)
Step 2: Paste this URL into the “File Link” section of the publications entry.
Step 3: Add the publication! You can see past publications if that helps (via “Edit”), please select the Research Areas as appropriate. A screenshot of a past one is attached:
Custom Fields and Events Calendar
Please see this Google Doc for info on categorizing posts and adding the appropriate details to ensure proper display on the website.
Not seeing the ‘Custom Fields’ section on your editing page? At the top of the page, open ‘Screen Options’ from the top right, and select ‘Custom Fields’ as visible by checking it off in the menu.