fix WikipediaImage bug; support alt text in spreadsheet config

Author: JoeGermuska

CHANGELOG.md

@@ -1,3 +1,8 @@
+3.9.4 (2024-12-04)
+-------------------------
+* Fix bug in WikipediaImage when float width parameters are sent to WP APIs
+* Add support for 'Alt Text' column in Google Sheets configuration.
+
 3.9.3 (2023-06-26)
 -------------------------
 * Update for Google Analytics 4 (GA4)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@knight-lab/timelinejs",
-    "version": "3.9.3",
+    "version": "3.9.4",
     "license": "MPL-2.0",
     "description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.",
     "dependencies": {

src/js/core/ConfigFactory.js

@@ -65,7 +65,8 @@ function extractEventFromCSVObject(orig_row) {
             caption: row['Media Caption'] || '',
             credit: row['Media Credit'] || '',
             url: row['Media'] || '',
-            thumbnail: row['Media Thumbnail'] || ''
+            thumbnail: row['Media Thumbnail'] || '',
+            alt: row['Alt Text'] || ''
         },
         text: {
             headline: row['Headline'] || '',

src/js/media/types/WikipediaImage.js

@@ -44,7 +44,7 @@ export default class WikipediaImage extends Media {
 
     _loadMedia() {
         var api_url,
-            image_width = this.options.width || 1000,
+            image_width = Math.round(this.options.width) || 1000, // value to WP API must be int
             language_code = this.getLanguage().lang.toLowerCase(),
             self = this;
 
@@ -140,8 +140,9 @@ export default class WikipediaImage extends Media {
 
     _getImageURL(w, h) {
         if (w && this.base_image_url) {
-            let match = this.base_image_url.match(/(\/\d+px-)/)
+            let match = this.base_image_url.match(/(\/[\d\.]+px-)/)
             if (match) {
+                w = Math.round(w) // WP image URLS 404 if floats are used so round it.
                 return this.base_image_url.replace(match[1], `/${w}px-`) // Wikipedia will autoscale the image for us
             }
         }
@@ -156,4 +157,4 @@ export default class WikipediaImage extends Media {
  * 
  * https://commons.wikimedia.org/w/api.php?action=query&titles=File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg&prop=imageinfo&iiprop=url&&iiurlwidth=1000
  * https://commons.wikimedia.org/wiki/File:Beryl-Quartz-Emerald-Zambia-33mm_0885.jpg
- */
+ */

website/templates/docs/using-spreadsheets.html

@@ -11,6 +11,7 @@ <h2 class="header-story">Making a timeline from a Google Spreadsheet</h2>
             <p>
                 For an example of a completed spreadsheet, see <a href="https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml" target="_blank">the spreadsheet</a> which powers the example on our <a href="/index.html">home page</a>.
             </p>
+            <p>Note that while this documentation refers to columns by their letter IDs (A, B, C, etc), what actually matters to TimelineJS is the text in the header row (row 1) of the spreadsheet. You must not change any of this text, or TimelineJS will not understand the configuration data.</p>
         </header>
     </section>
     <section class="product-page container">
@@ -41,23 +42,26 @@ <h3 id="media">Adding media (optional)</h3>
                 <a href="media-types.html">Read more about the media types TimelineJS works with.</a>
             </p>
             <p>
-                You have the option to add media to your slides in columns <strong>L-O</strong>. Under the <strong>Media</strong> column (<strong>L</strong>) enter the link (URL) to the media you wish to display. TimelineJS supports multiple <a href="media-types.html">media types</a>.
+                You have the option to add media to your slides in columns <strong>L-P</strong>. Under the <strong>Media</strong> column (<strong>L</strong>) enter the link (URL) to the media you wish to display. TimelineJS supports multiple <a href="media-types.html">media types</a>.
                 In the next column (<strong>M</strong>), you can credit the media's original source, and in column <strong>N</strong> you can include a short caption. As with the text and headline, you may use basic HTML for formatting and linking in
                 the credit and caption (<strong>M</strong> and <strong>N</strong>) columns.
             </p>
+            <p>
+                Column <strong>P</strong> can be used to provide descriptive "alt text" for images. You should not use HTML in this column. Support for alt text in spreadsheets was added in December, 2024. If you created a timeline before that date, you can add alt text to your existing Google Sheets document by adding a column with the header "Alt Text" (you must match this capitalization, with no white space before or after). This inserted column can be in any position, but if you want to match up with this documentation, you should insert it as column <strong>P</strong>.
+            </p>
             <p id="media_markup">
-                If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering <code>&lt;iframe&gt;</code> markup in the <strong>Media</strong> column (<strong>L</strong>) instead of a URL. You can also enter <code>&lt;blockquote&gt;</code>                markup in column L.
+                If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering <code>&lt;iframe&gt;</code> markup in the <strong>Media</strong> column (<strong>L</strong>) instead of a URL. You can also enter <code>&lt;blockquote&gt;</code> markup in column L.
             </p>
             <p id="thumbnail">
                 Markers for slides that contain media show a small icon representing the type of media used. If you'd like, you can show a thumbnail of the media there, instead. Simply add the URL of the image you'd like to use to column <strong>O</strong>.
             </p>
             <p id="slide_background">
                 If you like, you can set the background of the slide to a specific color or an image. To do this, enter a <a href="https://www.w3schools.com/cssref/css_colors.asp">CSS hex color</a> value, <a href="http://www.w3schools.com/cssref/css_colors.asp">CSS named color</a>,
-                or the URL to an image in the <strong>Background</strong> column (<strong>R</strong>).
+                or the URL to an image in the <strong>Background</strong> column (<strong>S</strong>).
             </p>
             <h3 id="title_slides">Titles and Eras</h3>
             <p>
-                The <strong>Type</strong> column (<strong>P</strong>) can be used to activate a few more specialized features in Timeline. In most cases, you'll leave it blank. Many support questions we get relate to people accidentally filling in the
+                The <strong>Type</strong> column (<strong>Q</strong>) can be used to activate a few more specialized features in Timeline. In most cases, you'll leave it blank. Many support questions we get relate to people accidentally filling in the
                 "type" column when they don't intend to use it.
             </p>
             <p>
@@ -75,7 +79,7 @@ <h3 id="organizing_slides">Organizing slides</h3>
                 first in the spreadsheet will be shown first in the timeline.
             </p>
             <p id="groups">
-                Using the <strong>Group</strong> column (<strong>Q</strong>), you can organize your slides by groups (formerly known as "tags"). You can put any values you want in the Group column. Events with the same group will be put in the same row
+                Using the <strong>Group</strong> column (<strong>R</strong>), you can organize your slides by groups (formerly known as "tags"). You can put any values you want in the Group column. Events with the same group will be put in the same row
                 or adjacent rows, and TimelineJS will use the text from the Group column as a label at the left edge of the row(s) containing those events. The group text will also be displayed on each slide. If you like, you can have a mix of slides
                 in groups and slides with a blank value in the Group column. Creators cannot control the order in which groups are shown in the navigation area: they are listed based on the chronological order in which they are used, except that if there
                 are slides with no group, those are at the bottom after the other groups.
@@ -103,4 +107,4 @@ <h3 id="publishing">Publishing your Timeline</h3>
         });
     });
 </script>
-{% endblock %}
+{% endblock %}