USING your library’s WEBKIT Revised 11/2022
TABLE OF CONTENTS I. What is a Webkt? • What is Drupal? II. Getting Started • Logging In • Administrative Toolbar • Account Name • View profile • Edit profile • Logout • Shortcuts • Rebuild Cache • Manage • Content • Add Content • Files • Structure II. Adding Content • Title • Body • Writing for the Web • Don’t literally welcome people to your website • Stop using all-caps • Annotate and link all lists • Nobody is reading your website • Writing for the web is different than for print
TABLE OF CONTENTS (con’t) • Using the Editor • Link • Images • IMCE file browser (image library) • Insert new folder • Resize an image • Delete an image • Delete a directory • Insert images dialog box • URL • Alternative text • Align • Caption • Linking an image • Optimizing images • Embedding YouTube videos • Width and height • Video and image link only • Show suggested videos at the video’s end • Use old embed code • Enable privacy-enhanced mode • Show start at • Show player controls • Delete video
TABLE OF CONTENTS (con’t) • Text format • Summary • File attachments • Flippingbook format • Revisions • Menu settings • Menu link title • Description • Parent menu item • Weight • Book outline • Weight • URL alias • Authoring options • Publishing options • Preview and save III. Editing Content • Outline tab IV. Deleting Content V. Content Types (Overview) • Book page • Book outline field • Database link • Image • Alternative text field
TABLE OF CONTENTS (con’t) • Category • Database URL • eMedia • eMedia category • Help links • Events • Date • Repeating events • Exclude date checkbox • Event Types, Age Groups and Locations • Page/Basic page • Slider • Slider image • Slider URL • Story/Article • Front page image field • Edit summary VI. Other Administrative Functions • Your account • View profile • Edit profile • Logout
TABLE OF CONTENTS (con’t) • Files • Books • Content control panel • Actions • Queues • Main menu • Edit • Description • Weight • Parent link • Attributes • Enabled checkbox • Logging out • “Access denied” VII. Frequently-Asked Questions • What if I need more help? • How do I get an account for the Client Resource site? • What is the OPLIN Webkits listserv? • How do I report a problem or ask a question? • What if I want to change the design of our site? • What is the Module Market? • Can we get additional training? • Can we host videos on OPLIN servers? • Is my library’s site handicapped-accessible? • Can vendor widgets be installed on our site? • How do I access Google Analytics?
What is a Webkit? Briefly, an OPLIN Webkit is a fully-customized content management system (CMS) for your library’s website. We call it a “kit” because we provide a customized shell and technical support, while your library provides the content. Since the back end (the system under the hood) and the front end (the design) are separate pieces, a Webkit can be given an entirely new design at any time, without your library’s staff having to recreate all of the site’s content from scratch. What is Drupal? Your Webkit has been built for you using the Drupal content management system. You need to know very little about Drupal, because four of the five main layers in the Drupal system have already been created for you by OPLIN. The last layer—the actual site content, the words and images that people will see—will be created and managed by you. This is not as hard as it sounds. This simple documentation should be all you need to get started, and OPLIN staff are available to help when you need it.
Getting Started: Logging In To start using your Webkit, open your web browser and go to the URL OPLIN gives you (typically https://<yourlibraryURL >/user); enter the username (usually "site_admin") and password OPLIN has assigned to you. Once you are successfully logged in, notice that your website now looks a little different. Across the top you will see a menu of things you can now do on your website. This is the Administrative Toolbar. The options will differ slightly from library to library, based on requested features. Learn more about the administrative toolbar: https://youtu.be/Rg3YR-4PK1U
Getting Started: The Administrative Toolbar Once you are successfully logged into your site, you will see the Administrative Toolbar appear at the top of the site. That bar will be available on every page, as long as you are logged in with an administrative account. Note that there is the top black bar and that clicking options on this bar may open sub-options in a grey bar directly below.
• When you click your Account Name in the black bar, the submenu has three options: • View profile: This will take you back to the screen you see when you first log in. • Edit profile: This is where you can change your password and/or email address associated with the account. • Log out: You should always log out when you are done working with your Webkit. • When you click the Shortcuts button in the black bar, there are two links that are quick access to creating new content and also to the content control panel (“All Content”). • When you click the Rebuild Cache button in the black bar, this clears out what the public will see. When you are logged in as an administrator, you are seeing the site in real time. The public does not; they see a cached version. NOTE: You should not use this function overly much, as it can take several minutes for the site to re-index the new data, which can slow the site down.
• When you click on Manage in the black bar, this presents the sub-menu you will use the most often. • The blue Drupal logo will allow you to log out of the site. • Content has two options: • Add content allows you to create a new content item; • Files gives you a list of the images and PDFs used on the site and some related data. • Structure may have slightly different options, depending on the functionality in your Webkit. Typically, it will include queues for placing and ordering front page content and for sliders, as well as a link to manage the main menu and one called “Books” (both of which will be covered later in this manual).
Adding Content To create a new page, click Content —> Add content on your Administrative Toolbar. You will see a list of the types of content you can create. (This list will depend on the content types which OPLIN has set up for you.) Click on the type of content you wish to create and you will get a blank creation template. Adding Content: Title The Title field is required for all content types. The Title is what will normally show in the menus that provide access to this page, so make it short but descriptive. And don't use exclamation points in your title. Professional writing does not use exclamation points; go look at newspapers. Murders and wars are exciting stuff, sure. Yet, newspapers do not end all of their potentially exciting headlines with exclamation points. It isn’t done. Don’t lose credibility for your library as an institution—write professionally. Further reading: Exclamation points. Don’t use them Confessions of a serial exclamation pointer
Adding Content: Body Let's look now at the Body section, which is where you will actually create your content. You will write things in the body using a rich-text editor that looks very much like a scaled-down version of Microsoft Word. Don't be tempted, however, to create complex pages in Word and paste them into this editor. Word documents contain a lot of hidden formatting code that will not translate well. You can paste portions of simple Word documents, or other text with hidden formatting such as text from your old website, into the editor using the Paste from Word icon —at the top of the editor——but it is generally better to either work directly in the rich-text editor or paste from a simple text editor like Notepad. If you must have a very specific page layout, OPLIN recommends installing the Components Module, which can be purchased from the Module Market. If you need to paste text from somewhere else, the Paste from Word icon is strongly suggested. This button will strip out a lot of the strange behind-thescenes code that Microsoft products (not just Word!) generate and enable most, if not all, formatting to remain.
Remember that your page will be displayed on the web, which requires that you consider a few conventions that differ from traditional print documents. For instance, underlining in an online document is very confusing for the reader, since only links are supposed to be underlined. Because of this, the editor does not include an "underline" option at all. Also note that it is best not to use the source button for creating content, unless you are very familiar with HTML5 standards-compliant coding and want to achieve some special formatting that is not available in the rich text editor. Adding Content: How to Write for the Web Don’t literally welcome people to your website. Typically, when we see “Welcome to our library’s website,” we know we’re looking at a library that doesn’t know how to best utilize its front space. Don’t waste prime real estate on the obvious or useless fluff. It’s so nice and friendly to put a big “Welcome to our library website!” heading at the top of the front page, right? Sorry...no. Here’s the thing: if people weren’t welcome on your library’s website, you would have password-protected it, right? People are inherently welcome to your library’s site. They don’t need a literal, text-based welcome mat. Further reading: Stop putting out the welcome mat Stop using all-caps. Long a netiquette convention on the Web, there simply is no reason to use all-caps on your site. People make assumptions about content that appears in all capital letters. Most often, all-caps text indicates the act of yelling. Do you really mean to be yelling at your patrons? Further reading: Typography Basics: some fundamentals for body copy Why Text in All Caps is Hard for Users to Read
Make sure any lists are annotated and link (whenever possible) directly to the site or catalog entry. Don’t just list website links without including relevant text about why they’re being recommended. If you’re creating lists of books, include a synopsis and a direct link to it in your library’s catalog. Don’t frustrate your users by providing lists that are essentially useless and have no value. Libraries are often major producers of lists. Reading lists, reference source lists, and many more. However, once a library starts putting lists on the Web, the format needs to change...and, often, the library fails to acknowledge the advantages available by putting a list online. For example: many libraries include lists of recommended links for users. Many times, that’s all those lists are: links. There’s not always a description that explains what the site is or why someone would want to use it. The same issue can often occur with lists of library services. If your library’s site says that your library has a meeting room, then the meeting room policy and any other related information should be linked and immediately apparent. What about reading lists? These can include not only a summary of the book, but a direct link to the book’s listing in your library’s online catalog. The goal is to make getting more information about the thing you’re recommending as easy as possible for the end user. If you force your users to search for more, they probably won’t. They’ll just leave, instead. Remember, the most anyone will read on the front page of your library’s website is 20%—and that includes the name of your library and the navigation! Use the least amount of words possible on the front page. Use teasers to show just the first bit of the text (more on that later). If visitors want more information, they’ll click the “Read/Learn more” link. Further reading: How Little Will Users Read?
Writing for the Web is different than writing for print. People scan, they rarely stop to read large chunks of text, especially on a homepage. It’s imperative that you capture their attention with writing that is geared for this common behavior. • Use scannable keywords. This includes using italics and bold (sparingly!) and, of course, hyperlinks are easily scannable as well. Make them clear and to the point. • Bulleted lists. They’re popular for a reason; they are easy to scan and break information down into manageable chunks. • One idea per paragraph. Studies have found that users typically skip over any additional ideas if they are not caught by the first few words of the paragraph. • Use the inverted pyramid style of writing. This means starting with the conclusion & working backwards. People want to know, up front, what they’re going to get out of what you’re writing about. • Halve the word count. Take your first draft and take out half. Narrow it down to the absolute nitty gritty. • When you master writing text for the web, you will be doing two important things: 1. You’ll be increasing the credibility of your site. These techniques are used by professional writers. Borrow them to make your library site more appealing and professional. 2. You’ll be making your site more usable. If your site scans more easily, people don’t get frustrated or turned off. Further reading: Writing so people give a darn Quick Course On Effective Website Copywriting How Do I Get People to Care About What I’m Doing? – Tell Bigger Stories How to Optimize Your Headlines for Google and Humans Five Copywriting Errors That Can Ruin A Company’s Website Learn more about writing correctly for your Webkit, in this video: https://youtu.be/ITgweYCbfwA
Adding Content: Using the editor The WYSIWYG editor used in the Webkits does have some of the same functions as Microsoft Word, but also includes some functions that are unique. Link 1. You can turn any text into a hyperlink. To create a link, highlight the text you want to be a link. 2. Click the Link button in the editor toolbar (looks like a chain link ).
An Edit link dialog box will appear. You can put an external URL (e.g., https://cnn.com) in here, or you can use the autofill feature to find an internal page. Use the autofill feature to find an internal page:
The autofill feature will automatically add in the correct relative link to the internal page. 3. Then click Save.
Images: Images need to be created at the correct size in software outside of the website. All images should also be optimized before they are uploaded to your site’s image library to be used in content. Images must be uploaded to your site’s image library before they can be used. 1. Put your cursor at the point at which you want to insert the image. 2. To insert an image, click the Image button. (It looks like mountains with a sun.) An additional dialog box will appear. 3. You must first upload your image to your site’s image library. Click Open File Browser.
Using the File Manager: 4. Click Upload. 5. Browse for the image you want to upload. 6. Once you click Open, that image will upload into the IMCE image library. 7. To insert the image into your content, double-click the image in the library you wish to use (alternatively, you can single-click and then click the Insert button). It will automatically appear in the original image editor dialog box. Note that you can create new directories, if you wish to organize images by department, event, etc. Do not move images into new directories after your content has been saved! This will break the link to that image and you will have to re-insert it. Always upload images into the correct directories before you insert them into any content. NOTE: You can see image previews of images in the File Manager by singleclicking. The preview will appear at the bottom.
Additional features in the File Manager: Add a new folder: Clicking this will allow you to create a new directory and name it. The directory will be a subdirectory of whichever folder you are already in. Directory names should not have spaces in them. REMEMBER: create new directories before adding an image to a piece of content, or the link to that image will break later if it is moved to a new directory.
Resize an image: You can resize an image by first selecting the image to be resized (it should be highlighted in blue) and then clicking the Resize button. Put in the new dimensions in pixels. NOTE: be sure to click the “Create a Copy” checkbox, so that you don’t affect the measurements of the original image. You can now insert the resized (copy) version into your content. Images can be deleted by selecting them and then clicking the Delete button. A message will appear with a second confirmation step, in order to prevent accidental deletion of items.
Deleting a directory: It is possible to delete an entire directory (be sure to double-check that there is nothing in it you want, first!). You cannot delete a directory by selecting it directly: you have to go to the parent directory first and then select it for deletion. See images, below. RIGHT: WRONG: Deleting an entire directory will also delete ALL files in that directory!
After the appropriate image is inserted, using the Insert Image dialog box: URL: REQUIRED, but see description Defines the URL address of the image. However, you should always upload images to your site’s file manager; never link to them on your computer’s desktop or on a third-party site (the latter is copyright infringement.; the former will cause the image to be broken for everyone but you). Alternative Text: VERY IMPORTANT AND REQUIRED! Short text that serves the same purpose and presents the same information as the image. Primarily used by assistive technology devices, so should conform to the W3C Web Content Accessibility Guidelines 2.0. For a discussion of best practices, see http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/ G94. For a demonstration of why this is so important, watch this 30-second video: https://www.youtube.com/watch?v=NvqasTVoW98 Align (Optional) Specifies the alignment of the image. You can choose from Left, Right or Center. Left aligns the image with the left margin of the page and allows text to wrap around the right side of the image. Right aligns the image with the right margin of the page and allows the text to wrap around the left side of the image. If the text is smack up against the image, with no white space, you may want to add some white space to the actual image. Caption (Optional) This field will create a short text box under the image (once Save is clicked on the Insert Image dialog box) where you can type a small amount of text.
Linking an image Images can by hyperlinked, just like text. Just select the image after it has been inserted into the editor by clicking on it once, then clicking the Link button in the editor’s toolbar. Learn more about creating great graphics for your Webkit, in this video: https://youtu.be/kXCyN2Htex8 Videos about adding graphics to Webkits https://youtu.be/_CV6yj3fzMQ (Part 1) https://youtu.be/VwzELrxtHhA (Part 2)
Optimizing images One of the biggest bottlenecks in downloading a website is the size of the graphics. And, people leave your website if it fails to load in less than three seconds. You probably already know to make your pictures as small on the screen as possible. After all, those pictures you took with your library’s digital camera are absolutely huge, right? You wouldn’t want to inflict added download time on unsuspecting website visitors. No doubt you’ve been using some kind of software to make your pictures visually smaller. But this is only half of the job . Reducing the file size of your images makes web pages load faster. If you take a look at the picture below (from WebResizer.com), you can see that there is no discernable difference in the visual size of the pictures. Nonetheless, the optimized version has a significantly smaller file size. Resizing your pictures so they are visually smaller is one thing—but that’s not the only thing you need to do. An image optimizing tool removes unnecessary pixels from digital images. The human eye doesn’t notice the difference, but this type of tool can significantly reduce the amount of time it takes for an image to download from your site. Many professionalend image editors (e.g., Photoshop, Paint Shop Pro) have built-in functions or addons that can do this type of reformatting. However, most libraries don’t own these and they have a very steep learning curve. There are free tools that allow you to optimize images: WebResizer Compressor.io Optimizilla (does images in batches as well) Learn more about optimizing images for your Webkit, in this video: https://youtu.be/HbP31ubIIxw
Embedding YouTube Videos You can embed YouTube videos directly in a webpage. To do so, you will need either the embed code or the URL for the video. Click the Embed YouTube Video button in the editor (it looks like a “play” button). Paste the embed code in the box that pops up OR the URL into the “Paste YouTube Video URL” field. NOTE: Whichever field you choose, the other field will become unavailable once something is entered. If you change your mind, simply delete whatever you’ve entered in either field and the other field will become available. THIS THIS • Width and Height: Regardless of which field you use (embed or URL), the width and height fields will autofill with the default measurements of the video. OPLIN strongly recommends that you accept those, as-is, and then proceed to check the “Make Responsive” checkbox below. This will allow mobile devices to appropriately resize the video to fit the available screen. OR
• Video and image link only: Checking this box will mean that only a thumbnail and a link to the YouTube video will appear; a playable video, embedded in the page, will not be available. • Show suggested videos at the video’s end: This is optional, and a personal choice on your part. • Use old embed code: Ignore this checkbox; leave unchecked. • Enable privacy-enhanced mode: You should always check this box. This is a YouTube feature that prevents some data collection and tracking of viewers. To learn more, see https://www.ghacks.net/2018/05/23/why-youshould-always-use-youtubes-privacy-enhanced-mode/ • Start at: This allows you to insert a specific timestamp to start playing the video at. If you want your video to start at the beginning, leave this empty. • Show player controls: This is checked by default and should not be unchecked, as it decreases usability and removes control from the user. Once the video is embedded, it will show up in the editor. If you want to get rid of the video, simply place the cursor after the video in the editor, and hit the backspace key on your keyboard. Learn more about embedding YouTube videos for your Webkit, in this video: https://youtu.be/a1psZS_G5g4
Beneath the body (editor), there is an option for Text Format. This should always be set to “Full HTML.” This field is never changed, except in some special circumstances (which are very rare). Do not change this unless you have been so instructed by OPLIN staff. (NOTE: This feature is only applicable for front pages that use either the Standard Story Block or Blog formats.) The front page of your site is not intended to be full of text. In fact, the majority of users are turned off by lots of text and will not read it or will even leave your site! This summary field is used if you place an Event or a Story/Article on your website's front and provides a short amount of teaser text. Users can then click “Learn more” or the item’s title to get the full content. ***SUMMARY TEXT SHOULD NOT BE MORE THAN 1-3 SENTENCES FOR BEST USABILITY*** To control exactly what is included in the summary, rather than cutting it off after a certain number of characters, click on Edit summary and a plain text field for the writing the summary will appear above the Body field. Click Hide summary to return to the full text of the article. If your site uses the standard story block layout, you MUST use the summary field to add text specifically for the homepage. NOTE: If anything is put into the “Summary” field, it will always replace whatever is in the Body field—but only on the homepage. Adding Content: Text format Adding Content: Summary
You can attach PDF files to your content, which users can then click to download. This is useful for items such as program fliers and bibliographies. PDF files must be 2 MB or less. If you have a PDF document larger than that, you will need to either split it into multiple, smaller parts, or possibly compress it with a tool like Small PDF. There is no limit on the number of attachments per piece of content. Once you uploaded a PDF file to be attached, you will also have the option of the Description field. This allows you to change the name so that it is not just the name of the file showing. You can also drag-and-drop the PDF files (if you have more than one) so they are in a different order. NOTE: Don’t forget that you can also have PDF documents, such as newsletters, converted to a Flippingbook format and embedded directly in a page. Adding Content: File attachments Learn more about using Flippingbooks for your Webkit, in this video: https://youtu.be/11HJk0PRecE
Adding Content: Revisions The revisions feature allow you to keep internal notes attached to each content item, as well as to potentially revert back to an older version of that item. Adding Content: Menu Settings You can add content items directly to your site’s main navigation by checking the Provide menu link checkbox. Once checked, additional options will appear: • Menu Link Title: This is the text that will show up for that ink in the dropdown menu. • Description: If you would like additional text to appear as a tooltip when someone hovers over the link, put it in this field. NOTE: This field will often not appear on mobile devices. We recommend either using this field for ALL of the main navigation links, or none. This is because users may think a link is broken if it does not have a tooltip, while others do. • Parent Item: This is where you select the location of the link within the hierarchy of the drop-down menus. • Weight: “0” is the default, which means that the link will appear alphabetically within the scope of the current list being displayed. You can use this function to make it appear higher or lower: positive numbers rise, and negative numbers sink. However, OPLIN recommends using the “Books” feature instead, which is more intuitive. OPLIN provides a 5-minute video tutorial on using the revision feature: https://www.youtube.com/watch?v=7Fy7C74_Ui0&t=7s
This option is required if you are working with Book pages, but is not usually used for any other content type. If you created a book page by using the Add child page option on an existing page, this field will already be filled in. Otherwise, you will need to set the location of the new book page. NOTE: While you cannot create new books (top-level sections), you can create multiple sub-levels as needed. If your library needs a new book, please contact OPLIN. Weight: By default, the Webkit will simply alphabetize lists of book pages. However, if you wish to override this order, you can change the weight of an individual book page. “0” is the default and will alphabetize the book page. Negative numbers rise, while positive numbers sink. So a “-15” will be at or near the top of a list, while “15” will be at or near the bottom. However, OPLIN recommends using the Book feature to move book pages to different orders or locations, as that is generally much easier to use. Adding Content: Book Outline
Adding Content: URL Alias You can assign special, custom URLs to your content. For instance, let’s say you wanted something like http://www.examplelibrary.org/summer , to make the URL easier to remember and to put on a flyer/poster. The syntax is /NAME-OF-ITEM Remember, don’t use spaces! URL aliases may have dashes or underscores to separate words. Examples: • /about/history • /storytime • /about/locations/main This box is checked by default. To create your own, custom URL, uncheck it. The URL alias field will then be available. You can learn more about making your site’s URLs more useful and intuitive for your users in this video: https://youtu.be/-ygK9X09rxc
This information is filled in by the system and should not be changed. By default, every piece of content you create will have “Published” checked. That means that, once you click the Submit button, that content is available to the public. However, sometimes you may not want content available yet. If so, just uncheck Published. Then, the content will only show to you as an administrator. Adding Content: Authoring Options Adding Content: Publishing Options
Once you are finished working on a piece of content, it is a good idea to click on the Preview button at the bottom of the page to be sure it looks as you expected. You will see what the page will look like. If you need to make changes, or, if you’re ready to publish, you can click the Back to content editing button. When you are satisfied that everything is OK, click on Save. Nothing will be saved until you choose Save. If you want to save the page as a draft, or work on it with others, just remember to unpublish it before you submit it. Once a page has been saved, a Delete button will appear at the bottom of the editing view, as well as a new tab on the saved item, if you want to completely remove the page from your server. Editing a page is very similar to creating a page, except that you start by navigating through your site to the page you want to edit. Since you are logged in and able to edit content, you will see a tab at the top of your page that allows you to edit the page. (Note: the Outline tab is a shortcut that will allow you to assign the page to a book hierarchy or modify its weight.) Adding Content: Preview & Save Editing Content
Once a piece of content has been created and saved, a new button will be available at the bottom of the Edit page: Delete and a Delete tab will also appear at the top of the content when you are logged in as an administrator. When you click the “Delete” button, you’ll notice you need to take another action, in order to actually fully delete the content: You must click Delete the second time, or the content will not be deleted. This is a failsafe, to make sure that you cannot accidentally delete your content. Once the Delete button has been clicked twice, that content is truly gone; it cannot be recovered by OPLIN. So be sure you mean it. NOTE: This same idea applies to all content and images in your Webkit. Deleting anything requires a two-step process, as a failsafe against accidental deletion. Deleting Content
Content Types As you create the content for your Webkit, you will find that not all content is similar. Some content will be fairly static . Other content may be created, changed, and removed fairly frequently by a variety of people. Some content, like announcements of events, will only be needed temporarily. So your Webkit allows you to create different types of content. The most typical content types you will have available in your Kit are: Article/Story Articles are generally used for information items which are only relevant for a period of time (e.g. news stories) and are expected to expire. They appear on the site’s homepage. Basic Page/Page Basic Pages are intended to be used for static content, but they are not a part of any content hierarchy and must be manually linked from another page in order to access them. One possible example would be a page of levy campaign information that's not related to any other pages. Book page Book Pages are designed to be part of a collaborative "book," a set of pages tied together in a hierarchy, just as chapters and parts of books are organized in a hierarchy. At the bottom of book pages, your Webkit will automatically provide links for moving to the previous page and the next, and a link labeled "up" that leads to the level above in the structure. Book pages also automatically create breadcrumb navigation trails. Database Link This content type shows a small image (258 x 177 pixels), a description and a “Use this resource” link for a given database in a specially-scripted display. The display includes an alpha paginator and a list of categories from which the user can select. The image only shows on non-mobile devices.
eMedia Link Similar to the Database Link content type, with many of the same features, including a specific display. Individual entries can also include up to three (3) links to help documents or tutorials. Events An Event is a content type that includes a start and end date, and may include other fields such as event type, location and/or age group. Events automatically appear in the events calendar and in the “Upcoming Events” block (if your library has one). Events can also be promoted to the site’s homepage, in addition to appearing in the site’s calendar functions. Hours (SELECT LIBRARIES ONLY) This content type allows the library to regularly change hours per specific location. Slider (SELECT LIBRARIES ONLY) These are images that are used by a front page carousel. Images generally have to 925 x 300 pixels. Graphics should be of high quality and images should be optimized. Carousels hold a maximum of five (5) images. Other types of content may also be available in your Webkit, depending on the custom options you requested from OPLIN.
Book Page Book pages are pages that are part of the site’s permanent architecture and are typically added to the main navigation. When created, because they live inside the site structure directly, they will automatically create associated navigation (outside of the drop-down menus) such as breadcrumb trails at the top of and sibling navigation at the bottom of book pages. To create a new Book page, go to Content—>Add content—>Book page. Fill in the title (name) of the book page. The body field can remain empty or you can put almost anything you’d like here. You may also attach PDFs, add it to the main menu and create a URL alias if you wish. You’ll want to make sure that the Book outline field is filled out appropriately, so that your book page will be placed into the site’s structure correctly.
Database Link Your Webkit comes with a custom display that allows you to easily show the research databases available for your library’s patrons—regardless of where they come from (statewide, through a consortium, and/or as an individual library subscriber). To create a new database link, go to Content—>Add content—>Database link. Fill in the title (name) of the database, and a very (!) brief description. The body field is NOT intended for lengthy text and should not be more than 23 sentences, at most.
You must also include a database image. Images must be 258 x 177 pixels. Vendor logos are discouraged, as most patrons don’t recognize them. OPLIN recommends using the provided images on the Client Resource site, which are pre-sized for Webkits. Note that the Alternative text field will appear once an appropriate image has been uploaded. At least one category (but up to three) must be chosen for each database link. You can select more than one by holding down the control key on your keyboard while clicking. Categories are standardized across OPLIN’s Webkits and cannot be modified.
You must also enter a URL for the database. If it is a statewide database, you can find the authoritative list of correct links here. For links to consortium-provided or individually-purchased databases, you will need to contact the consortium or the vendor. Learn more about the Database Display in this video: https://youtu.be/lRItrp_XA74
eMedia The eMedia content type is very similar to the Database Link content type, with only two differences: 1. In the eMedia Category field, the choices are different (of course), but you can select as many options as you wish, instead of only three (3), like the category option for Database Links. 2. There is an additional field: Help Links. This field is not required. However, if you have links to either internal or external resources about using a particular eMedia item, you can include up to three (3) here. You will need both the URL and the text that the link should display. Learn more about the Emedia Display in this video: https://youtu.be/lRItrp_XA74
(This section does NOT apply to libraries using third-party event services, such as Demco Signup, Eventkeeper or LibCal.) As a library, one of the most common information items you create for your page will be event announcements. The next several upcoming events will appear in the “Upcoming Events’ block on the homepage, where they will be most visible to visitors, and all upcoming events will automatically appear on your Events Calendar. The creation of Events differs from other content types in some significant ways. When you create or edit an Event, what you see at first is very similar to what you would normally see when creating most other content types. The main differences are some additional fields. Date All events have a beginning and end date. Click in the Date field, and a popup calendar will appear. Select the month, day and year of the program— both beginning and end (if it’s a recurring date, the end date will always be the same as the beginning date: more on that, later). Also input the beginning and end times. Events
Repeating events Many events happen more than once or in series. To accommodate that, there is a function that allows you to easily create events the recur in certain patterns. To begin with, create only the FIRST instance of the event as you would any other (non-repeating event. In other words, if the first instance is November 20 from 1:00 pm to 2: 00 pm, create that in the date fields. THEN, change the select box at the top to reflect the type of pattern you want (usually weekly or monthly). The idea here is that you create one instance, and then tell the website to repeat that one instance in a certain way. WARNING: Do not use the last day of the events series as the end date in the Date field! This will result in the event appearing on the site’s calendar every day between the beginning and ending dates.
Note that you can repeat an event daily (using the Multiple days option), weekly, or monthly. You can also specify how often it repeats (for example, every 2 weeks). You can also repeat events on multiple days (e.g., every Tuesday and Thursday). You will need to tell the event when to stop repeating. Notice that you can either specify a date, or you can give it a number of occurrences after which the event should stop.
Some events will need to exclude one or two dates, due to holidays or library closures . You can specify dates for which the pattern should not apply, by checking the Exclude checkbox. You can add multiple exclusion dates, if needed. Event Types, Age Groups and Locations All events generally require at least one event type be assigned. The list of event types was originally set you you/your library when the site was constructed; however, if you need additions and/or changes, don’t hesitate to contact OPLIN. If your library has more than one location, an option to choose one or more locations for the event will also likely be available. Some libraries also have an option to select age groups. You can choose more than one option by holding down the Control key on your keyboard, while clicking on the options you would like to use for an event.
Page/Basic Page A Page (sometimes called a Basic Page) is very like creating a Book Page, with one major difference: it does not live anywhere inside the site’s structure. This means that, when created, it does not automatically also create breadcrumb navigation or sibling navigation. It is, essentially, an orphan. Some libraries use this content type, while others do not. There are limited use cases for the Page/Basic Page. Think of it as a place that is good for one -offs; something that is not a permanent piece of your site, but perhaps you need something with more flexibility than say, a Story/Article. For example, if your library is running a levy, you might have a Story/Article on the homepage, but link to a Page/Basic page from that, in order to provide further information, such as testimonials or millage. Keep in mind that, when you create a Page, you will need to manually link to it from somewhere else—since it doesn’t live inside the book navigation at all. Otherwise, the only other way the public will be able to find it is if it comes up as a search result. A Page can become a Book Page later, if you want!
Slider (Optional premium feature) Sliders are the images that appear in carousels, usually on the homepage. Because carousels are often prominently featured and take up a great deal of prime real estate, it is critical that someone with some graphic design skill create your sliders. We often try to discourage libraries from having carousels installed if they do not have adequate staff expertise. Bad design does your organization no favors in the realm of public perception! Standard carousels require images that are 925 x 300 pixels, with some exceptions. Standard full-width carousel images must be exactly 1350 x 300 pixels. Images must be in either JPG, JPEG, GIF or PNG formats and should be optimized. Remember, these are large images and can significantly slow your site down if they are not optimized! Each image in a carousel must be linked: therefore, the URL field is required. Learn more about sliders (AKA carousels): https://youtu.be/-oqUavafrXA
Story/Article The Story/Article is the main type of content that will be used on your site’s homepage. Stories/Articles do not show up elsewhere on the website, unless it’s as a search result. It’s meant to be a very ephemeral type of content, used to promote new service or collections, or events. If you are using the story block or Visual story block layout, the Front Page Image field is required. Standard story block mages must be 330 x 186 pixels and Visual story blocks must be 386 x 290 pixels. Both should be optimized. Remember not to use clip art; your community institution’s reputation is not enhanced by using the same clip art that a third grader uses! Stock photos, graphics made in-house or photos taken at your library are all better choices. Also using the standard story block layout, you’ll want to make use of the Edit Summary link. This allows you to create a specific, short teaser for the home page. This same functionality should also be used for events that are placed into front page story blocks. Summaries should be 1-3 sentences at most. Click “Edit summary” link If there is any text in the Summary field, it will override anything in the Body field—but only on the homepage. If you don’t use the summary field, the website will use an arbitrary amount of the beginning of the body field, which is rarely ideal. Use of the summary field is strongly encouraged.
OTHER ADMINISTRATIVE FUNCTIONS
When you log in and click on your account name in the Administration Navigation Bar, you’ll get a sub-bar with these options: View Profile When you click View Profile, you’ll topically see a screen showing your account name and the length of time that account has been a “member.” The amount of time is actually how long this particular type of profile has existed in OPLIN’s system, so you can ignore that number, since it is meaningless. Your Account
Edit Profile If you would like to edit the email address or password associated with your account, this is where you change those things. Leave all other options alone—they either don’t apply to your site or should not be changed. Log Out This is a secondary place where you can log out of your account. Remember to ALWAYS LOG OUT when you are finished! Failure to log out may result in being denied access later. If you encounter an “Access denied” message when attempting to log in, clear the cookies in your browser. (If you log in with the wrong username or password, the website will not say “Access denied”—it will give you a more intuitive message.)
Files Going to Content—>Files will show you a list of all of the images and files in use (or not) on your website. If you click on the Name, you can see the the item being referred to. The Used in link will let you know where the item is currently in use on published items on your website. Note that it will not only detect embedded images in the Body field, but also attached Front Page Images. A note about PDFs: many times, the Files list will show a “0” even when a PDF is in use. This is likely due to PDFs not being embedded, but rather attached or linked to. Do not assume a PDF is NOT in use simply because it says “0” here.
The Books option (Structure—>Books) gives you a tool for quickly changing the structure of an entire Book (section) from your site, without the need to individually edit multiple book pages. To edit multiple titles and/or book page orders, choose the book you wish to edit from this screen: You can drag and drop book pages into a different order, or change the titles of any of the book pages in a particular book. NOTE: Don’t forget to click the “Save Book Pages” button at the bottom, or your changes will not save! Books
Content Control Panel Perhaps the most useful item on the administrative toolbar is the link to Content. This gives you "control panel" access to all the content in your website. Simply click the Content link in the Administrative Tool Bar. Here can see and modify all the content in your site, including unpublished content. You can also select a number of content items and transform them all at once by using the Actions pull-down menu. Your options here are to publish/unpublish or delete. This can be very handy, or very dangerous; be careful! (The other options in the Action menu will either not apply or should not be used.) NOTES: • You can also view, edit and delete individual pieces of content from here as well (see options to the right of each title). • If you try to delete either an individual item or more than one at a time, you will still get a “Are you sure?” message, asking you to confirm the deletion. If you confirm the deletion with the second click, that content is GONE—it cannot be retrieved by OPLIN!
Queues All Webkits have at least one Queue. This is a lineup of which items are to appear in a specific area. All Kits have a queue for the front page, to determine not only which items appear there, but in what order. Other sites may also have a separate queue for Sliders, and some sites may have queues for more specialized, custom content types. All queues can be found under Structure in the Administrative Navigation Bar. • Regardless of what kind of content the queue is associated with, they work the same way. Each queue can only hold a certain number of items (Typically 4 for a front page queue and 5 for a slider queue). If the queue is full, you will need to delete an item before you can add more. • Front page queues typically only hold either Event or Story/Article content types, since the front page is specifically designed for promotional items. • All queues have drag-and-drop handles to the left of the item’s title. You can use these to re-arrange items in the order you prefer. • Don’t forget to click the Save button when you’re finished!
Main Menu You can control which items appear in your site’s main navigation by going to Structure—>Manage main menu. You will see each item, currently in the menu, in a visual hierarchy. You can use the drag-and-drop handles to the left of each item to change the order and level. Note that, if an item has sub-items, those will come along with it. • By clicking the Edit button to the right, you’ll be able to change the item’s name in the menu and/or the link to which it will go. • You can also add a quick Description (optional), which will appear as a tooltip when a user hovers over the item in the main navigation. OPLIN does not recommend that this is used, unless all menu options use it. This is because users may believe a link is broken if tooltips are inconsistent. • The Weight is equivalent to using the drag-and-drop handles to change the level of an item. • The Parent link select box allows you to choose where and at what level an item appears. The drag-and-drop functionality will allow you to do the same.
Do NOT use! • Do NOT use the Attributes section! Under no circumstances should you ever have a link open a new window or tab. That is poor usability and takes away control from the user. • Using the Enabled checkbox on either the edit screen or the main menu listing page will allow you to disable specific items by unchecking it.
Sitewide Alerts There will be times when you may need to alert your library’s patrons with important announcements, such as weather closures. Your Webkit comes with a feature that allows you to place such announcements in noticeable, visual way, at the top of the site. The Sitewide Alerts feature allows you to not only place announcements at the top of the site, but you can specify it to appear on only some pages or on all; you can also choose from two different color schemes, to indicate the severity of the message. To learn how to create and use Sitewide Alerts, see this video tutorial: https://www.youtube.com/watch?v=tGGmy1aY8g8
Logging Out Remember to logout when you are done; the next person to use your computer will have access to your content if you don't logout. After you logout you will be returned to the normal view of your website, without the Edit button at the top of the pages. "Access Denied" The most common issue reported to OPLIN is seeing an "Access Denied" message. However, this message is very misleading: if you enter the incorrect password or username, you actually will receive a very different message. The "Access Denied" message actually means that you (or someone else on the same computer) did not logout of the website the last time. The browser now believes that you are attempting to open a new session, when session cookies for an existing session still exist. In order to clear the problem, you will need to clear the cookies from your browser. To prevent this issue, always be sure to click the "Logout" option on the Administration Toolbar when you're finished.
What if I need more help? Firstly, there is always the Webkit Manual. There is a link to it in the administration menu when you’re logged into your library’s website. You can also directly access it here: https://www.oplin.ohio.gov/website-kit-documentation Secondly, be sure to subscribe to OPLIN’s YouTube channel. We have video tutorials for some of our custom features, and are adding more all of the time: https://www.youtube.com/c/oplinorg Thirdly, you can always contact Laura Solomon directly for help: firstname.lastname@example.org or (614) 752-0792. If it’s an emerHow do I get an account for the Client Resources site? Most libraries already have an account. Remember, there is one account per library, not accounts for individuals. If you believe that your library does not already have an account, please contact OPLIN to set one up. The Client Resource site is found at https://webkits.oplin.org/ Learn more about the Webkit Client Resource site here: https://youtu.be/rO9RAszrhWM