Skip to content

Commit 9d0a5a8

Browse files
devalogdevalog
committed
Fix images on Kobo page
1 parent 03db3d7 commit 9d0a5a8

27 files changed

+117
-216
lines changed

‎_posts/2025-01-10-librarykobo.md‎

Lines changed: 14 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -14,58 +14,30 @@ OverDrive is a digital platform that distributes library content to e-readers. U
1414

1515
# Getting started with OverDrive
1616

17-
18-
<table style="max-width: 50%;">
19-
<tr>
20-
<th>Libra H2O homepage</th>
21-
</tr>
22-
<tr>
23-
<td><img src="/assets/homepage.jpg"></td>
24-
</tr>
25-
</table>
26-
17+
![Kobo homepage](/assets/kobo/homepage.jpg){: .smaller-image}
2718

2819
1. First, [ensure your e-reader is connected to Wi-Fi](https://help.kobo.com/hc/en-us/articles/360017439594-Set-up-your-Kobo-eReader-over-Wi-Fi). You must be connected to Wi-Fi to set up OverDrive functionality. You also need Wi-Fi to check out new library books, although you can return books without the Wi-Fi enabled.
2920

3021
1. Next, navigate to the **More** icon at the bottom right of the Libra H2O homepage. In the menu that opens, select **Settings**, then to **OverDrive**.
3122

23+
<div class="image-container">
24+
<img src="/assets/kobo/more.jpg" alt="Kobo more menu" class="side-by-side-image">
25+
<img src="/assets/kobo/settings.jpg" alt="Kobo settings menu" class="side-by-side-image">
26+
</div>
3227

33-
<table>
34-
<tr>
35-
<th>More menu</th>
36-
<th>Settings menu</th>
37-
</tr>
38-
<tr>
39-
<td><img src="/assets/more.jpg"></td>
40-
<td><img src="/assets/settings.jpg"></td>
41-
</tr>
42-
</table>
4328

4429
1. In the OverDrive menu, select **Add a library**. Search for your library in the OverDrive search bar, select it, and then enter your library card and pin directly on the device.
4530

4631
> Note: Kobo warns that this method doesn’t always work and that the more reliable methods include scanning the QR code with your phone or entering a code on the OverDrive website.
4732

48-
<table>
49-
<tr>
50-
<th>OverDrive menu: user not signed in</th>
51-
<th>Add a library page</th>
52-
</tr>
53-
<tr>
54-
<td><img src="/assets/notsignedin.jpg"></td>
55-
<td><img src="/assets/addlibrary.jpg"></td>
56-
</tr>
57-
</table>
33+
<div class="image-container">
34+
<img src="/assets/kobo/notsignedin.jpg" alt="OverDrive menu: user not signed in" class="side-by-side-image">
35+
<img src="/assets/kobo/addlibrary.jpg" alt="Add a library page" class="side-by-side-image">
36+
</div>
5837

5938
1. When you’ve successfully added your library card, the device returns you to the OverDrive menu. Check the **Communication** bar to make sure your email address is up to date. OverDrive sends notifications to this email address to let you know when holds are available to borrow.
6039

61-
<table style="max-width: 50%;">
62-
<tr>
63-
<th>The OverDrive menu</th>
64-
</tr>
65-
<tr>
66-
<td><img src="/assets/overdrivemenu.jpg"></td>
67-
</tr>
68-
</table>
40+
![OverDrive menu](/assets/kobo/overdrivemenu.jpg){: .smaller-image}
6941

7042
## Switching OverDrive accounts
7143

@@ -91,36 +63,21 @@ To use your library’s catalog to find an ebook to check out to your LIbra H2O:
9163

9264
1. Log in with your library card details (this should be the same library account you’re logged into on your e-reader) and search the catalog.
9365

94-
<table style="max-width: 75%;">
95-
<tr>
96-
<th>Catalog homepage for the Arlington Public Library in Arlington, VA. </th>
97-
</tr>
98-
<tr>
99-
<td><img src="/assets/library.jpg"></td>
100-
</tr>
101-
</table>
66+
![Catalog homepage for the Arlington Public Library in Arlington, VA.](/assets/kobo/library.jpg)
10267

10368
1. When you’ve found the book you want to check out or put on hold, choose the **eBook** format and select **Borrow with Libby/OverDrive** (for books that are available now) or **Place Hold** (for books that aren’t available now).
10469

10570

10671
>Note: Different library systems might use slightly different terminology for different book formats. It’s important to choose the eBook format that is not the Kindle format, as the Kindle format, as this isn’t compatible with Kobo e-readers.
10772

108-
109-
<table style="max-width: 75%;">
110-
<tr>
111-
<th>A book you might want to check out, with different format options. </th>
112-
</tr>
113-
<tr>
114-
<td><img src="/assets/catalog.jpg"></td>
115-
</tr>
116-
</table>
73+
![A book you might want to check out, with different format options.](/assets/kobo/catalog.jpg)
11774

11875

11976
1. You might not need to do anything to get a book you checked out to appear on your Libra H2O. Automatic sync is on by default, so when you turn on your device, it syncs to your library account automatically. However, the device often requires an additional manual sync to download books you checked out on your library account. To manually sync your device, select the **Sync** icon on the top right of the homepage
12077

12178
## Searching for books on the Libra H2O
12279

123-
> Note: The built-in search functionality on the device is basic and slow. While you can filter searches by author, title, and other categories, the search results are often strange and unexpected. Searching directly from your library’s catalog is often the best bet if you’re looking for something specific.
80+
> Note: The built-in search functionality on the device is basic and slow. While you can filter searches by author, title, and other categories, the search results are often strange and unexpected. Searching directly from your library’s catalog is often the best bet if you’re looking for something specific. ![Filtering search results](/assets/kobo/results.jpg){: .smaller-image}
12481
12582
To search for a book directly on the Libra H2O:
12683

@@ -130,16 +87,7 @@ To search for a book directly on the Libra H2O:
13087

13188
1. After you’ve conducted a search, you can filter the results by a number of categories, including **Most Popular** or **Author**.
13289

133-
<table>
134-
<tr>
135-
<th>Filtering search results</th>
136-
<th>Strange results on the built-in Kobo catalog</th>
137-
</tr>
138-
<tr>
139-
<td><img src="/assets/filter.jpg"></td>
140-
<td><img src="/assets/results.jpg"></td>
141-
</tr>
142-
</table>
90+
![Filtering search results](/assets/kobo/filter.jpg){: .smaller-image}
14391

14492

14593
To borrow books that you previously placed on hold and are now ready for checkout, select the **Borrow books from your public library** option at the bottom left of the device homepage. This brings you to an OverDrive page that shows any current holds and suggests books to check out. Select **Borrow** to check out a hold that is ready to check out.

‎_site/2025/01/10/librarykobo.html‎

Lines changed: 22 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,7 @@ <h1 id="background-overdrive-and-the-libra-h2o-model">Background: OverDrive and
5959

6060
<h1 id="getting-started-with-overdrive">Getting started with OverDrive</h1>
6161

62-
<table style="max-width: 50%;">
63-
<tr>
64-
<th>Libra H2O homepage</th>
65-
</tr>
66-
<tr>
67-
<td><img src="/assets/homepage.jpg" /></td>
68-
</tr>
69-
</table>
62+
<p><img src="/assets/kobo/homepage.jpg" alt="Kobo homepage" class="smaller-image" /></p>
7063

7164
<ol>
7265
<li>
@@ -75,46 +68,35 @@ <h1 id="getting-started-with-overdrive">Getting started with OverDrive</h1>
7568
<li>
7669
<p>Next, navigate to the <strong>More</strong> icon at the bottom right of the Libra H2O homepage. In the menu that opens, select <strong>Settings</strong>, then to <strong>OverDrive</strong>.</p>
7770

78-
<table>
79-
<tr>
80-
<th>More menu</th>
81-
<th>Settings menu</th>
82-
</tr>
83-
<tr>
84-
<td><img src="/assets/more.jpg" /></td>
85-
<td><img src="/assets/settings.jpg" /></td>
86-
</tr>
87-
</table>
71+
<div class="image-container">
72+
<img src="/assets/kobo/more.jpg" alt="Kobo more menu" class="side-by-side-image" />
73+
<img src="/assets/kobo/settings.jpg" alt="Kobo settings menu" class="side-by-side-image" />
74+
</div>
8875
</li>
76+
</ol>
77+
<p>&lt;/div&gt;</p>
78+
79+
<ol>
8980
<li>
9081
<p>In the OverDrive menu, select <strong>Add a library</strong>. Search for your library in the OverDrive search bar, select it, and then enter your library card and pin directly on the device.</p>
9182

9283
<blockquote>
9384
<p>Note: Kobo warns that this method doesn’t always work and that the more reliable methods include scanning the QR code with your phone or entering a code on the OverDrive website.</p>
9485
</blockquote>
9586

96-
<table>
97-
<tr>
98-
<th>OverDrive menu: user not signed in</th>
99-
<th>Add a library page</th>
100-
</tr>
101-
<tr>
102-
<td><img src="/assets/notsignedin.jpg" /></td>
103-
<td><img src="/assets/addlibrary.jpg" /></td>
104-
</tr>
105-
</table>
87+
<div class="image-container">
88+
<img src="/assets/kobo/notsignedin.jpg" alt="OverDrive menu: user not signed in" class="side-by-side-image" />
89+
<img src="/assets/kobo/addlibrary.jpg" alt="Add a library page" class="side-by-side-image" />
90+
</div>
10691
</li>
92+
</ol>
93+
<p>&lt;/div&gt;</p>
94+
95+
<ol>
10796
<li>
10897
<p>When you’ve successfully added your library card, the device returns you to the OverDrive menu. Check the <strong>Communication</strong> bar to make sure your email address is up to date. OverDrive sends notifications to this email address to let you know when holds are available to borrow.</p>
10998

110-
<table style="max-width: 50%;">
111-
<tr>
112-
<th>The OverDrive menu</th>
113-
</tr>
114-
<tr>
115-
<td><img src="/assets/overdrivemenu.jpg" /></td>
116-
</tr>
117-
</table>
99+
<p><img src="/assets/kobo/overdrivemenu.jpg" alt="OverDrive menu" class="smaller-image" /></p>
118100
</li>
119101
</ol>
120102

@@ -152,14 +134,7 @@ <h2 id="searching-for-books-on-your-librarys-catalog">Searching for books on you
152134
<li>
153135
<p>Log in with your library card details (this should be the same library account you’re logged into on your e-reader) and search the catalog.</p>
154136

155-
<table style="max-width: 75%;">
156-
<tr>
157-
<th>Catalog homepage for the Arlington Public Library in Arlington, VA. </th>
158-
</tr>
159-
<tr>
160-
<td><img src="/assets/library.jpg" /></td>
161-
</tr>
162-
</table>
137+
<p><img src="/assets/kobo/library.jpg" alt="Catalog homepage for the Arlington Public Library in Arlington, VA." /></p>
163138
</li>
164139
<li>
165140
<p>When you’ve found the book you want to check out or put on hold, choose the <strong>eBook</strong> format and select <strong>Borrow with Libby/OverDrive</strong> (for books that are available now) or <strong>Place Hold</strong> (for books that aren’t available now).</p>
@@ -168,14 +143,7 @@ <h2 id="searching-for-books-on-your-librarys-catalog">Searching for books on you
168143
<p>Note: Different library systems might use slightly different terminology for different book formats. It’s important to choose the eBook format that is not the Kindle format, as the Kindle format, as this isn’t compatible with Kobo e-readers.</p>
169144
</blockquote>
170145

171-
<table style="max-width: 75%;">
172-
<tr>
173-
<th>A book you might want to check out, with different format options. </th>
174-
</tr>
175-
<tr>
176-
<td><img src="/assets/catalog.jpg" /></td>
177-
</tr>
178-
</table>
146+
<p><img src="/assets/kobo/catalog.jpg" alt="A book you might want to check out, with different format options." /></p>
179147
</li>
180148
<li>
181149
<p>You might not need to do anything to get a book you checked out to appear on your Libra H2O. Automatic sync is on by default, so when you turn on your device, it syncs to your library account automatically. However, the device often requires an additional manual sync to download books you checked out on your library account. To manually sync your device, select the <strong>Sync</strong> icon on the top right of the homepage</p>
@@ -185,7 +153,7 @@ <h2 id="searching-for-books-on-your-librarys-catalog">Searching for books on you
185153
<h2 id="searching-for-books-on-the-libra-h2o">Searching for books on the Libra H2O</h2>
186154

187155
<blockquote>
188-
<p>Note: The built-in search functionality on the device is basic and slow. While you can filter searches by author, title, and other categories, the search results are often strange and unexpected. Searching directly from your library’s catalog is often the best bet if you’re looking for something specific.</p>
156+
<p>Note: The built-in search functionality on the device is basic and slow. While you can filter searches by author, title, and other categories, the search results are often strange and unexpected. Searching directly from your library’s catalog is often the best bet if you’re looking for something specific. <img src="/assets/kobo/results.jpg" alt="Filtering search results" class="smaller-image" /></p>
189157
</blockquote>
190158

191159
<p>To search for a book directly on the Libra H2O:</p>
@@ -200,16 +168,7 @@ <h2 id="searching-for-books-on-the-libra-h2o">Searching for books on the Libra H
200168
<li>
201169
<p>After you’ve conducted a search, you can filter the results by a number of categories, including <strong>Most Popular</strong> or <strong>Author</strong>.</p>
202170

203-
<table>
204-
<tr>
205-
<th>Filtering search results</th>
206-
<th>Strange results on the built-in Kobo catalog</th>
207-
</tr>
208-
<tr>
209-
<td><img src="/assets/filter.jpg" /></td>
210-
<td><img src="/assets/results.jpg" /></td>
211-
</tr>
212-
</table>
171+
<p><img src="/assets/kobo/filter.jpg" alt="Filtering search results" class="smaller-image" /></p>
213172
</li>
214173
</ol>
215174

‎_site/2025/02/09/jekyll.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ <h1 class="post-title p-name">Using an LLM to revamp my site
5353

5454
<p>This isn’t a tutorial on how to install Jekyll or design a site. There are plenty of resources for that, so I’m going to skip a lot of steps and gloss over some details.</p>
5555

56-
<p><img src="/assets/jekyll_site/old_site.png" alt="Old homepage of my site" class="bordered-image" /></p>
56+
<p><img src="/assets/jekyll_site/old_site.png" alt="Old homepage of my site" /></p>
5757

5858
<p>This site used to be raw HTML. I wanted to change it to Jekyll and Markdown for a few reasons:</p>
5959

@@ -77,7 +77,7 @@ <h1 id="installing-jekyll">Installing Jekyll</h1>
7777
<li>
7878
<p>Sure enough, installing Jekyll was the first step. Claude instructed me how to do that:</p>
7979

80-
<p><img src="/assets/jekyll_site/install.png" alt="Installation instructions" class="small-image" /></p>
80+
<p><img src="/assets/jekyll_site/install.png" alt="Installation instructions" /></p>
8181
</li>
8282
<li>
8383
<p>After trying out the first step, I got an error:</p>
@@ -86,7 +86,7 @@ <h1 id="installing-jekyll">Installing Jekyll</h1>
8686

8787
<p>Claude recommended two different ways I could do it instead (I chose the second).</p>
8888

89-
<p><img src="/assets/jekyll_site/alt_install.png" alt="Enter image alt description" class="small-image" /></p>
89+
<p><img src="/assets/jekyll_site/alt_install.png" alt="Enter image alt description" /></p>
9090
</li>
9191
</ol>
9292

@@ -106,7 +106,7 @@ <h2 id="issue-1-take-posts-off-of-the-homepage">Issue #1: Take posts off of the
106106

107107
<p>The Minima style by default has the <a href="https://jekyll.github.io/minima/">posts inline on the site index</a>. I didn’t want this – I wanted the blog to be linked from the index, but I wanted the index to be relatively sparse. I set up the separate blog part relatively easily and got the posts to show up on a non-index page, but I had a harder time figuring out how to remove the posts from the index.</p>
108108

109-
<p><img src="/assets/jekyll_site/minima.png" alt="Default minima index" class="bordered-small-image" /></p>
109+
<p><img src="/assets/jekyll_site/minima.png" alt="Default minima index" /></p>
110110

111111
<ol>
112112
<li>
@@ -118,7 +118,7 @@ <h2 id="issue-1-take-posts-off-of-the-homepage">Issue #1: Take posts off of the
118118
<li>
119119
<p>I reworded my question, and Claude told me to override the home layout. This technically did what I wanted – it removed the posts, but also all other styling on the page. Other than the removing posts, I wanted the Minima layout and styling preserved.</p>
120120

121-
<p><img src="/assets/jekyll_site/nuclear_posts.png" alt="Claude suggesting to remove everything" class="small-image" /></p>
121+
<p><img src="/assets/jekyll_site/nuclear_posts.png" alt="Claude suggesting to remove everything" /></p>
122122
</li>
123123
<li>
124124
<p>I tried again. Claude wanted me to implement a bunch of JavaScript. This seemed like a hack, and I wanted a better solution.</p>
@@ -129,8 +129,8 @@ <h2 id="issue-1-take-posts-off-of-the-homepage">Issue #1: Take posts off of the
129129
<li>
130130
<p>I finally went back to Claude and asked how to override the Minima theme. This turned out to be the correct wording! I got a simple solution that worked right away.</p>
131131

132-
<p><img src="/assets/jekyll_site/posts_solution.png" alt="Solution: posts removed from index" class="small-image" />
133-
<img src="/assets/jekyll_site/post_with_proper_italics.png" alt="Site with post titles italicized" class="bordered-small-image" /></p>
132+
<p><img src="/assets/jekyll_site/posts_solution.png" alt="Solution: posts removed from index" />
133+
<img src="/assets/jekyll_site/post_with_proper_italics.png" alt="Site with post titles italicized" /></p>
134134
</li>
135135
</ol>
136136

@@ -174,15 +174,14 @@ <h2 id="issue-3-add-a-favicon">Issue #3: Add a favicon</h2>
174174
<li>
175175
<p>Next, Claude took a more nuanced, Minima-specific approach. I copied Minima’s <code class="language-plaintext highlighter-rouge">head.html</code> file over to my own, and then adjusted some of the code to account for the favicon. This worked.</p>
176176

177-
<p><img src="/assets/jekyll_site/favicon_solution.png" alt="Claude's favicon solution" class="small-image" /></p>
177+
<p><img src="/assets/jekyll_site/favicon_solution.png" alt="Claude's favicon solution" /></p>
178+
<h2 id="issue-4-add-a-linkedin-icon">Issue #4: Add a LinkedIn icon</h2>
178179
</li>
179180
</ol>
180181

181-
<h2 id="issue-4-add-a-linkedin-icon">Issue #4: Add a LinkedIn icon</h2>
182-
183182
<p>I looked online first and found a lot of solutions that looked complicated and required editing multiple files. Surely there was a better way?! Yes. According to Claude, there was indeed a one-line solution. This worked right away.</p>
184183

185-
<p><img src="/assets/jekyll_site/linkedin.png" alt="Claude's LinkedIn solution" class="small-image" /></p>
184+
<p><img src="/assets/jekyll_site/linkedin.png" alt="Claude's LinkedIn solution" /></p>
186185

187186
<h1 id="takeaways">Takeaways</h1>
188187

_site/assets/addlibrary.jpg renamed to _site/assets/kobo/addlibrary.jpg

File renamed without changes.

_site/assets/catalog.jpg renamed to _site/assets/kobo/catalog.jpg

File renamed without changes.

_site/assets/filter.jpg renamed to _site/assets/kobo/filter.jpg

File renamed without changes.

_site/assets/homepage.jpg renamed to _site/assets/kobo/homepage.jpg

File renamed without changes.

_site/assets/library.jpg renamed to _site/assets/kobo/library.jpg

File renamed without changes.

_site/assets/more.jpg renamed to _site/assets/kobo/more.jpg

File renamed without changes.

_site/assets/notsignedin.jpg renamed to _site/assets/kobo/notsignedin.jpg

File renamed without changes.

0 commit comments

Comments
 (0)