-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhelp.html
More file actions
115 lines (99 loc) · 7.79 KB
/
Copy pathhelp.html
File metadata and controls
115 lines (99 loc) · 7.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help - Content Buddy</title>
<!-- Pico CSS Framework -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<!-- SpringShare External Stylesheets (matches index.html baseline) -->
<link rel="stylesheet" href="https://static-assets-us.libguides.com/web/css3.23.3/lg-public-no-bs.min.css">
<link rel="stylesheet" href="https://libapps.s3.amazonaws.com/sites/64/include/libguides.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<main class="container">
<div class="app-container">
<div class="app-header">
<a href="index.html" class="wordmark" style="text-decoration: none;"><span class="blog">Content</span> <span class="buddy">Buddy</span></a>
<nav>
<a href="help.html">Help</a>
<a href="https://forms.gle/Q8qvoLaSTp8s44Gx7" target="_blank">Report Bug</a>
</nav>
</div>
<a href="index.html" class="back-link">← Back to Content Buddy</a>
<div class="help-content">
<h2>Overview</h2>
<p>Content Buddy is a tool for Caltech Library staff to create formatted HTML for blog posts and libguides on the library's SpringShare site. You fill out a form (or import content), click Format, preview the result, and paste the generated HTML into the Source tab in CKEditor.</p>
<h2>Basic Workflow</h2>
<ol class="step-list">
<li>Select a content type tab (Booklist, Event, Links, or Card Layout).</li>
<li>Enter your content manually in the form fields, or use the <strong>Import Details</strong> button to auto-fill from an external source.</li>
<li>Click the <strong>Format</strong> button to generate the HTML output.</li>
<li>Click <strong>Preview</strong> to see how the content will look on the blog.</li>
<li>Click <strong>Copy to Clipboard</strong>, then paste into the <strong>Source</strong> tab in CKEditor on your SpringShare blog post.</li>
</ol>
<div class="tip"><strong>Tip:</strong> Always preview before copying. If something looks off, adjust the form fields and reformat.</div>
<h2>Content Types</h2>
<h3>📚 Booklist</h3>
<p>Use this tab to create a formatted list or grid of books, typically for a staff picks or recommended reading post.</p>
<ul>
<li><strong>Layout:</strong> Choose between a vertical list (cover on the left, details on the right) or a horizontal grid (covers and titles in a grid).</li>
<li><strong>Manual entry:</strong> Fill in the Title, Author, ISBN, Description, Cover Image URL, Cover Alt Text, Call Number, and a link to the catalog record. Fields marked with * are required.</li>
<li><strong>ISBN Import:</strong> Click <strong>Import Details</strong>, paste one or more ISBNs (separated by commas or line breaks), and click <strong>Import Book Details</strong>. The tool will look up the title, author, and cover image automatically. Review and edit the results before formatting.</li>
<li>Use <strong>Add Another Book</strong> to add multiple books to the list.</li>
</ul>
<div class="tip"><strong>Note:</strong> ISBN import relies on the Open Library and Google Books APIs. Lookups may occasionally fail for less common titles — blank entries will be created so you can fill in details manually.</div>
<h3>📅 Event</h3>
<p>Use this tab to format one or more upcoming events with a calendar-style date display.</p>
<ul>
<li><strong>Manual entry:</strong> Enter the event Title, Date, Time, Location, Description, and an optional Link and Link Text.</li>
<li><strong>ICS Import:</strong> Click <strong>Import Details</strong> and upload a <code>.ics</code> calendar file exported from your calendar application. The tool will parse up to 5 events and populate the form. All times are converted to Pacific Time.</li>
<li>Use <strong>Add Event Manually</strong> to include multiple events in a single post.</li>
</ul>
<h3>🔗 Links</h3>
<p>Use this tab to create a formatted list of links, useful for resource roundups or curated link collections.</p>
<ul>
<li><strong>Manual entry:</strong> Enter a Link Title, URL, and optional Description for each link. You can also add an optional Section Title to group links under a heading.</li>
<li><strong>URL Import:</strong> Click <strong>Import Details</strong>, paste one or more URLs (one per line), and click <strong>Import Link Details</strong>. The tool will fetch the page title and description automatically.</li>
<li>Use <strong>Add Another Link</strong> to include multiple links.</li>
</ul>
<h3>🔳 Card Layout</h3>
<p>Use this tab to create a card layout for highlighting featured resources, services, or topics side by side.</p>
<ul>
<li><strong>Layout:</strong> Choose between a horizontal row (cards side by side) or a vertical stack (image left, content right).</li>
<li>Fill in the Title, Description, Image URL, Image Alt Text, Link URL, and Link Text for each card.</li>
<li>Use <strong>Add Another Card</strong> to include as many cards as you need.</li>
<li>The Card Layout uses a web component and does not depend on the shared stylesheet. Styles are self-contained.</li>
</ul>
<h3>✏️ Blog Posts</h3>
<p>Use this tab to add library blog posts to Publicate.</p>
<ul>
<li>Review the most current blog posts on the library's blog.</li>
<li>Click the <strong>Content URL</strong> button to copy the URL for Publicate to use.</li>
<li>Use the <strong>Web Page</strong> content element to insert the blog post and paste in the Content URL</li>
<li>Click the <strong>Post URL</strong> button to copy the direct link to the post and add as button in newsletter.</li>
</ul>
<h2>Pasting into SpringShare</h2>
<ol class="step-list">
<li>Open your blog post draft in SpringShare (LibGuides).</li>
<li>Click into the content area in CKEditor.</li>
<li>Click the <strong>Source</strong> button in the CKEditor toolbar to switch to HTML source view.</li>
<li>Place your cursor where you want to insert the content.</li>
<li>Paste the copied HTML (<code>Cmd+V</code> or <code>Ctrl+V</code>).</li>
<li>Click <strong>Source</strong> again to return to the visual editor and verify the output looks correct.</li>
</ol>
<h2>Need Help?</h2>
<p>If something isn't working as expected, use the <strong>Report Bug</strong> link at the top of the page to let Twila know. Include a description of what you were trying to do and what happened instead. </p>
<p>For general questions:</p>
<p>
Twila Smith<br>
Digital Technologies Development Librarian<br>
Digital Library Development<br>
twila@caltech.edu
</p>
</div>
</div>
</main>
</body>
</html>