USING your library’s WEBKIT Revised 4/2024

TABLE OF CONTENTS I. What is a Webkit? II. What is Drupal? III. Getting Started • Logging In • Administrative Toolbar • Account Name • View profile • Edit profile • Logout • Shortcuts • Rebuild Cache • Manage • Drupal logo • Content • Add Content • Files • Media library • Sitewide alerts • Structure II. Adding Content • Title • Body (CKEditor) • Link • Inserting media • Images

TABLE OF CONTENTS (con’t) • Audio • Documents • Remote video • More Media library options • Optimizing images • Text format • Summary • File attachments • Revisions • Menu settings • Book outline • URL alias • Authoring options • Publishing options • Preview & save • Editing content • Deleting content IV. Standard Content Types • Book Page • Adding book pages to a book outline • Database Link • Emedia Link • Event • Repeating events • Event types, age groups and locations • Hours • Page/Basic Page • Story/Article

TABLE OF CONTENTS (con’t) • Vendor Logo V. Custom Content Types • Big Cover • Component • Event block • FAQ • Hero (Leader) image • Icon block • Large image section • New Item • Webform VI. Using Queues VII. Other Administrative Functions • Files • Books • Content control panel • Main menu • Sitewide alerts • Rebuild cache • Drupal logo and options • Logging out VIII. Frequently-Asked Questions • What if I need more help? • How do I get an account for the Client Resources site? • What is the OPLINWEBKITS listserv? • What if I want to change the design of our site? • What is the Module Market?

TABLE OF CONTENTS (con’t) • What is the Module Market? • Can we get additional training? • Can we host video on OPLIN’s servers? • Is my library’s site handicapped-accessible? • Can vendor widgets be installed on our site? • How do I access Google Analytics? • We have a Hero or Hero Plus template. Can we change the Hero image? • Can we make custom modifications to our template?

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 appearance and options may differ slightly, based on template and/or requested features.

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 will 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”). You may wish to add other shortcuts here. • 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 and has some other options that will be covered later in this manual. • 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; • Media library: This is where your uploaded collection of documents, images, audio and remote video are stored. • Sitewide alerts allow you to place important messages at the top of the website. • Structure may have slightly different options, depending on the functionality in your Webkit. Typically, it will include queues for placing and ordering various types of content 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. Exclamation points are not recommended. Professional writing does not use exclamation points.

Adding Content: Body (CKEditor) 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. This editor is called CKEditor. Don't be tempted, however, to create complex pages in Microsoft Word and then paste them into this editor. Word and other Microsoft-created documents contain a lot of hidden formatting code that will not translate well. If you must have a very specific page layout, OPLIN recommends purchasing the Components Module, which can be purchased from the Module Market. 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 .

Adding Content: Using the editor CKEditor 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 CKEditor toolbar (looks like a chain link ). An link URL 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: Just start typing the title, and the autofill feature will bring up potential options from what already exists on the site. You can choose from this list and the site will automatically fill in the rest. When you are finished entering either the external or internal link, click the green checkmark.

Inserting Media You can insert different types of media into your content, using CKEditor. • Images. Images need to be created at the correct size in some kind of graphic software, outside of the website. All images should also be optimized before they are uploaded to your site’s media library to be used in content. Images must be uploaded to your site’s media library before they can be used. File size of images cannot exceed 2 MB. • Audio. Files that can be uploaded and embedded can use either .mp3, .wav or .aac extensions. When inserted, these create their own embedded audio player. File size of audio cannot exceed 2 MB. • Documents. This refers to PDF files. When embedded, this file appears as a link that will go directly to the file. File size of a PDF cannot exceed 2 MB. • Remote video. Video source can be either from YouTube or Vimeo. Providing the URL of the remote video and then inserting it into content via CKEditor will create an embedded video player. As this kind of video is not hosted directly on the website, there is no file limit. INSERTING AN IMAGE An image must first be uploaded to the Media Library before it can be used by CKEditor. Start by clicking the Insert media button in CKEditor.

You will then be presented with a dialog box titled Add or select media. Choose Image on the left-hand side. The next step is to upload your image to the Media Library. Click Choose Files under the label Add file. Choose the file from your computer and choose Open. This will add the image to the Media Library. Note that it is not yet inserted into your content in CKEditor.

Once the image has been uploaded to the Media Library, it is available to be used in your site’s content. The display will now look similar to this: Note that there is a required field next to the image called Alternative text. This field will be needed any time an image is uploaded to your Webkit. It is a field that is used by assistive technology for people with disabilities. In the case of the example, above, the alternative text might look something like this: A woman with her eyes closed and hands held to her head. Text reads: so many screens. We can help. Alternative text should, ideally, not exceed 150 characters. It should adequately describe the image so that someone who is blind or visually impaired will understand its meaning and context.

The next step will be to decide if you want to embed just the one image or several at a time. This decision is implemented by choosing one of the buttons at the bottom of the dialog box. • Choosing Save and select will indicate that you want to choose a different image to insert into your content—not the one you just uploaded. You will then be brought to a screen where you can choose another images before inserting. • Choosing Save and insert indicates that you only want to choose the one image that you just uploaded and want to now insert it into the content in CKEditor. If you have chosen Save and select, you will be be brought to the full list of available images in the Media Library. The one you just uploaded will automatically be selected, but you can uncheck it and choose another.

If you choose Save and insert, your uploaded image will automatically be placed into CKEditor. Note that it will be inserted at the original size of the image you uploaded. If you need a different size, you will need to upload another smaller/larger version. An image has several options once it’s inserted. First, select the image by leftclicking on it once. This will turn the frame blue. When it turns blue, you will notice a small sub-menu appears at the bottom of the image. If you hover over each icon in the sub-menu, it will tell you the function of the button.

• Toggle caption on: This will provide you with a small text field under the image in which you can add a caption. • Link media: This allows you to enter a URL to which the image will be connected. When someone clicks the image (after published), they will be taken to this URL. Note that this is an autofill field, so it will automatically fill in URLs of internal pages. • Override image media alternative text: This provides a text field so that you can provide your own alternative text, rather than what was originally included when the image was uploaded to the Media Library. • Break text: This can only be used when text is already left or right-aligned. It will usually force the text back below the image. • Align left/center/right wrap text: These force text to flow around the image in specified ways. Note that the image itself has small blue arrows on the bottom and top when selected. Using these will insert additional space either before or after the image.

INSERTING AUDIO Inserting audio into your content, using CKEditor, is very similar to the process of inserting an image. 1. Choose the Insert media button in the CKEditor toolbar. 2. In the dialog box that opens, choose Audio from the menu on the left side. 3. Upload your chosen audio file. (It will need to be in either .mp3, .wav or .aac format). 4. Once uploaded, choose either Save and select (to use a different audio file) or Save and insert to use this one. Once an audio file is inserted into CKEditor, it automatically generates an audio player. Note that clicking on the player will give you the same sub-menu options as clicking on an image.

INSERTING DOCUMENTS Inserting PDF documents into your content, using CKEditor, is very similar to the process of inserting an image. 1. Choose the Insert media button in the CKEditor toolbar. 2. In the dialog box that opens, choose Document from the menu on the left side. 3. Upload your PDF document. 4. Once uploaded, choose either Save and select (to use a different document file) or Save and insert to use this one. 5. Clicking once on the inserted PDF hyperlink will bring up the same submenu options that are available for other inserted media. How is this different than attaching a PDF to content? Note that using Insert media will create an automatic hyperlink in the content anywhere the feature is used. Attaching a PDF to content (covered later in this manual) creates a list at the bottom of the content of all attached PDF files.

INSERTING REMOTE VIDEO Inserting remote video documents into your content, using CKEditor, is very similar to the process of inserting an image. Remote video can be either from YouTube or Vimeo. 1. Choose the Insert media button in the CKEditor toolbar. 2. In the dialog box that opens, choose Remote video from the menu on the left side. 3. Provide the URL to the remote video you wish to include. 4. Once uploaded, choose either Save and select (to use a different remote video) or Save and insert to use this one. 5. Clicking once on the inserted remote video will bring up the same submenu options that are available for other inserted media. Note that the video will appear small in CKEditor. Once the content is published, the video will take up the full width of the content area.

More Media Library features You can access the Media Library at any time by going to Content —> Media —> Media library. From here, you have some additional options. • Searching for specific files by title, published/unpublished status, or media type • Seeing your media in either a grid or table view • Delete media • Unpublish or publish media • See the revision history of an individual media item.

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. 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. There are free tools that allow you to optimize images: WebResizer Compressor.io Optimizilla Learn more about creating great graphics for your Webkit, in this video: https://youtu.be/kXCyN2Htex8

Beneath the body (editor), there is an option for Text Format. This should always be set to Full HTML. Do not change this unless you have been so instructed by OPLIN staff. (NOTE: This feature is only applicable for Story Blocks, Icon Blocks and Event Blocks. ) 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 provides a short amount of teaser text. Users can then click “Learn more” or the item’s title to get the full content, depending on the type of block. Summaries usually have a character limit, to ensure that their content is the correct length for their block. ***SUMMARY TEXT SHOULD NOT BE MORE THAN 1-3 SENTENCES FOR BEST USABILITY*** Adding Content: Text format Adding Content: Summary

You can attach PDF files to many types of 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. Attached PDFs will look like this, at the bottom of the other content: Adding Content: File attachments

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. It is important to note that the book outline is not the same as putting something into the main menu. Book outline refers to the actual structure of the site. The menu system and the book outline are not directly connected. 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 in the list, while positive numbers sink towards the bottom. However, OPLIN recommends using the Books 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 or 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 Uncheck to remove public access

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. Adding Content: Preview & Save Do not change!

Editing a page is very similar to creating a page, except that you start by navigating through your site to the item 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 (not the menu) or modify its weight. *This does not apply to some content types. This typically includes Database links, eMedia links. These need to be edited by locating them in the Content Control Panel. Once you have reached the edit page for the item you want to make changes to, you will have the exact same options available that you saw while creating the content. The main difference is that there is an option to Delete at the bottom of the page. Adding Content: 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. 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. Adding Content: Deleting Content


Standard 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 basic content types you will have available in your Kit are (others may be available, depending on the library’s requirements): 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 "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 a list of categories from which the user can select up to three (3). The image only shows on non-mobile devices. Categories are standardized across the Webkit service and are not adjustable.

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. Site admins can choose an unlimited number of categories for an eMedia link. Categories are standardized across the Webkit service and are not adjustable. 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 “Upcoming Events” block . Events can be created using either the native Webkit calendar, or can be imported from our list of supported registration software providers. If your Webkit does not use the native Events feature, events are being imported from a third-party provider such as WhoFi or LibCal. Please contact OPLIN for additional information about these. Hours (Edit only) This content type allows the library to regularly change hours per specific location. Note that only hours already existing in your Webkit can bed edited; new instances cannot be created. Vendor logos Above the site footer there is a horizontal region that shows various logos. This region holds a minimum of three (3) logos and a maximum of five (5). Other types of content may also be available in your Webkit, depending on the custom options you requested from OPLIN.

USED BY: All templates 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. Basic Pages/Pages use the same form to create them, but do not create any of their own navigation. **REMEMBER:** The book page system and the main navigation system are not directly connected! Something can be in the book page system and not the main navigation, and vice-versa. Book pages have to be manually assigned to the main menu. Standard Content Types: Book Page

If you did not use the Book Outline feature when creating the book page, you can still assign it. Once a book page has been created and saved, a new tab will be available at the top: Outline. This allows you to insert book pages into the site’s hierarchy of pages. A drop-down menu will ask you which book to place the item into. Once the book is chosen from the drop-down, a new field will appear, showing which items are already in that book. This allows you to more specifically place your new item into the hierarchy. Note that you will also see an option for Weight here. OPLIN does not recommend using this feature; instead, it is much easier to use the Books function to organize book pages in the site. Adding Book Pages to a Book Outline

USED BY: All templates 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. Standard Content Types: Database Link

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.

USED BY: All templates The eMedia Link 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. Standard Content Types: Emedia Links

USED BY: All templates* (*This section does NOT apply to libraries using third-party event services, such as LibCal, Library Market, Communico or WhoFi.) 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. Standard Content Types: Event

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.

Standard Content Types: Hours USED BY: All templates Hours are used somewhat differently, depending on the template and on how many locations a library system has. • Hero and Hero Plus templates: “Open” hours in site header. Other, optional areas include the main library’s full hours listing in the footer and/or individual listings on respective branch pages. • Core and Core Plus templates: Optional areas include the main library’s full hours listing in the footer and/or individual listings on respective branch pages. Regardless, with all templates, . When your site is created, OPLIN will have already constructed the individual instances your library needs. You can only edit existing instances, not create new ones. If your library uses the Hero or Hero Plus templates, the “Open” hours feature in the header will pull directly from the hours of your main (or only) library and will not need to be edited if you have already edited the main library’s hours. To edit existing hours, you’ll need to find these in the content control panel, much in the same way you do for Database links or Emedia links. Once you’ve found the correct instance, you can choose it and then edit it.

I • f the hours are left entirely blank for a given day of the week, the hours listing will automatically read “Closed.” • Please do not use the Comment field unless instructed to do so by OPLIN • Please do not add Time slots unless instructed to do by OPLIN • Clicking Remove will clear the hours entirely rom that day. • Copy last day can be very useful when you have more than one day, consecutively, that have the exact same hours. This feature will fill in the hours for you, using the previous day’s entries. Be sure to click Save at the bottom of the listing.

Standard Content Types: Page/Basic Page USED BY: All templates 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!

Standard Content Types: Story/Article USED BY: All templates. Core, Core Plus and Hero have three (3); Hero Plus has four (4) The Story/Article is a type of content that is used only 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. The Front Page Image field is required. Images for Core, Core Plus and Hero templates must be 410 x 130 pixels and Hero Plus blocks must be 925 x 300 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. If your site uses the Core, Core Plus or Hero templates, the Summary field is required. This allows you to create a specific, short teaser for the home page. If your site uses the Hero Plus template, it will require the Teaser field, instead of the Summary field. The Teaser field has a character limit of 90 characters, while the Summary field has a longer limit of several sentences.

Standard Content Types: Vendor Logo USED BY: All templates The Vendor Logo content type items show in the region directly above the Featured Database area. This region can hold as few as three (3) logos or as many as five (5) logos. To create a new logo, go to Content—>Create Content—>Vendor logo.

Creating a new vendor logo has three (3) elements:  Title: This does not show for the public, only for administrators. It all allows you to tell which vendor logo is which in the content control panel.  Image: This is the logo itself. Images can be in either JPG, GIF or PNG formats. Images cannot be larger than 300x250 pixels. For best results, logos shown on the homepage should be similar sizes.  URL: This can be either an internal or external address. Users will be taken to this URL when they click the logo. In order to be shown on the homepage, a vendor logo must be added to the appropriate queue. To edit an instance of a vendor logo content type, it needs to be located in the content control panel, much in the same way as Database links and Emedia links.


USED BY: All templates (Premium add-on module) Big Covers is an additional module that can be purchased for your Webkit from the Module Market. It allows four (4) large book covers to be featured on your site’s homepage in a horizontal strip, with direct links to those books in your library’s catalog. To add a new Big Cover, go to Content—>Add Content—>Big Cover. Custom Content Types: Big Cover

This content type requires four (4) fields: • Title • Author • Large cover image which must be 250 x 400 pixels • Catalog URL Because only four (4) covers can be shown at a time, Big Covers have their own queue. You will need to place the Big Cover s you want shown in this queue.

USED BY: All templates (Premium add-on module) Components is an additional module that can be purchased for your Webkit from the Module Market. It allows for specific alternative layouts on Book pages and/or Pages/Basic pages. The following layouts are currently included with this module: • Left-aligned image • Right-aligned image • Video with side text • Parallax header • Image Cards • 4-image gallery OPLIN has a series of YouTube tutorials for learning how to create and use Component layouts.* Find the tutorial series at https://youtu.be/Wd9ZgR_n2DI?si=iN6338IFJgLWNdUy *Note the video series will show/reference a component (Tabs Wrapper) that is not currently available. Custom Content Types: Component

USED BY: Hero Plus template The Hero Plus template includes a homepage feature that allows three different events to be featured. These are called Event blocks. This is not a separate type of content; rather, existing events are assigned to these blocks. Any type of imported event can be assigned to an event block, regardless of source. These typically include events imported from WhoFI, LibCal, Library Market and Communico. To assign an event to appear in an event block on the homepage, it will need the following: • An event block image (this needs to be 683 x 1084 pixels) • A summary • To be assigned to the Event Block queue. Custom Content Types: Event Blocks

USED BY: All templates (Premium add-on module) FAQ is an additional module that can be purchased for your Webkit from the Module Market. It allows for the addition of questions and answers to a special FAQ display. To create a new question with matching answer, go to Content—>Add content—>FAQ. Custom Content Types: FAQ

FAQ content has three (3) fields: • Title: This is something that will only be seen internally, by site administrators. It is intended to help distinguish one FAQ from another in the Content Control Panel. It is not the same as the Question field. • Question • Answer Note that the Text format of the Answer field is different than most other fields in your Webkit: instead of being “Full HTML,” it is set to “Plain text.” Do not change this setting! Many HTML tags or HTML-formatted text can break the FAQ display.

This is another content type that requires the additional step of adding it to its own dedicated queue. This is the only queue that does not have a limit on how many items can appear in it.

USED BY: Core Plus template Non-static Hero images are specific to the Core Plus template. This template has the only hero image region that is user-changeable. In order to differentiate this function from the non-changeable, static hero images in the Hero and Hero Plus templates, OPLIN will often refer to this content type as a “Leader image.” A hero/leader image appears directly below the header region. It spans the full width of the site and has a built-in button that appears near the center of the image when displayed. Custom Content Types: Hero Image (AKA Leader Image)

Hero/leader images have four elements: 1. Title: This only shows up for administrators, not users. 2. Image: This can be in either JPG, GIF or PNG formats. The recommended size is 1300 x 400 pixels. 3. Button text: The text that will appear on the embedded button. For best results, this should be no more than 1-2 words. 4. URL: The web location to which the user will be taken when the button is clicked. The site will always use the most recently-created instance of a hero image for the homepage. To edit an existing icon block, you will need to locate it in the Content control panel and edit it from there.

USED BY: Core Plus template Icon blocks are specific to the Core Plus template. This template has three (3) of them on the homepage, directly below the Story block region. The region displaying the icon blocks cannot hold more or less than three such blocks. To create a new icon block, go to Content—>Add content—>Icon block. Custom Content Types: Icon Blocks

Each icon block consists of four elements: 1. Title: This will appear directly below the icon, in bold text. For best results, this should be as short as possible. 2. Icon: This pulls from a master list of available Font Awesome icons that can be used. While different styles of icons are available, it is strongly recommended that a library decide on a style and use that style consistently when creating new icon blocks. 3. Short text: This appears directly below the title. This field has a limit of 255 characters. 4. URL: This address will be used for the Read more button. When users click this button, they will be taken to the URL you have entered.

If you start typing the name of a possible Font Awesome icon, the autofill field will attempt to find a potential match. Note that some icons and/or styles are not available; these are shown with the dotted exclamation point symbol. In the above example, the exclamation points denote specific styles that are not available, rather than entire icons that are not. You can still choose any of these; the style you will have as a result will be the one shown in the drop down. Once an icon block has been created, it must be assigned to the appropriate queue in order to appear in the Icon block region on the homepage. To edit an existing icon block, you will need to locate it in the content control panel and edit it from there.

USED BY: Core, Core Plus, Hero Plus The Large Image Section features a large image to the left, with accompanying text to the right of it. The image itself will automatically clip itself to the shape determined by the template (Hero Plus is a circle, Core and Core Plus are right-facing arrow shapes). Images for this content type need to be at least 650 x 530 pixels. The homepage display of this content type will only pull the most recently-created instance. Older ones will not be displayed. To create a new Large Image Section, go to Content—>Create Content— >Large Image Section. Custom Content Types: Large Image Section

• Large image field: Images must be at least 650 x 530 pixels. Images can be in JPG, GIF or PNG format. It is strongly recommended that little to no text be included in this image. This image will not show on mobile devices. It is intended for decoration only. • Body: This is the text that will appear to the right of the image. Note that the field does not allow for any HTML formatting. If you use line breaks, those will be recognized. This text should be relatively short, in order to not go past the bottom of the image. Text that is too long may also cause formatting issues with the placement of the Read more button underneath. • URL: This is the internal or external URL address of where a user will be taken when they click Read more. Be sure to click Save at the bottom of the form when completed.

USED BY: All templates (Premium add-on module) New Items are a type of content associated specifically the CAC (Cover Art Carousel). The CAC is an additional module that can be purchased for your Webkit from the Module Market. It allows for a user-rotated display of book or other material covers on the homepage of your Webkit. Additional CACs can be installed in other locations; each will be invoiced at the module’s full rate. To add a New Item to the display, go to Content—>Add content—>New item. Custom Content Types: New Item (Cover Art Carousel)

New items have three (3) fields: • Title: This will only show for site administrators and not users. It is intended only to help administrators distinguish between instances of New items in the Content Control Panel. • New item image: This is the cover of the book or other item (DVD, CD, etc). Image sizes can vary slightly for each Webkit. Please refer to the field’s instructions for the applicable measurements for your library’s site. • URL: This is intended to be the catalog URL, so that users can be taken directly to the item in your library’s online catalog. The display for New items does not have an associated queue. Rather, the most recent twenty (20) items are shown.

USED BY: All templates (Premium add-on module) Webform is an additional module that can be purchased for your Webkit from the Module Market. It allows for the creation of unlimited online forms for your library’s Webkit. **WARNING: Because the Webform module is a development platform with access to a near endless arrangement of fields and configurations, OPLIN can only support those fields covered in our custom training videos. Webforms have a significant learning curve. If you are not prepared to undertake this on your own time, OPLIN recommends NOT purchasing this module. Support requests that go beyond the scope of the OPLIN training videos will result in perhour charges to the library. ** To learn how to use the Webform module, please see the YouTube tutorial playlist at https://www.youtube.com/watch? v=ePMoX4_lMSc&list=PLP3tiL6bDbfb7YAco8dvhKDgLbKbnhOPR Custom Content Types: Webform


Using Queues USED BY: All templates (front and vendor logos). Some templates also have the following, additional queues: Core Plus (Icon blocks); Hero Plus (Event blocks). Some purchased modules also have associated queues (Big Covers, FAQ, Cover Art Carousel). Certain types of content require that they be assigned to a queue in order to show up on the homepage. For example, there could be many instances of the vendor logo content type, but the homepage has a limit of five (5) that can be displayed at a time. Assigning a vendor logo to the vendor logo queue not only tells the site which logos to display, but allows you to decide the order of those logos . The concept is the same for other content types that have queues. To assign a content item to its respective queue, go to Structure—>Edit queue: [NAME OF QUEUE]. For example, to make changes to the front page story blocks, you would go to Structure—>Edit queue: front page.

The next step is to assign the item to its respective queue. Different queues have different limits on how many items they can hold: • Front page: 3 stories (Core, Core Plus, Hero); 4 stories (Hero Plus). This can hold only the stated number—not more or less. • Vendor logos: A minimum of 3 logos, a maximum of 5. • Event blocks (Hero Plus only): 3 events. This can only hold 3 events—not more or less. • Icon blocks (Core Plus only): 3 icon blocks. This can only hold 3 icon blocks—not more or less. To assign an item to a queue, start typing the title of the item. The autofill field will find all instances that fit that title. Choose the one you’re looking for and then click Add Item. This will add the item to the queue. However, you’re not done yet!