Merge pull request internetarchive#11077 from emggeorge/10933/fix/use-cover-and-title-endpoints

Use cover and title endpoints for IA cover upload

Author: cdrini

openlibrary/i18n/messages.pot

@@ -5474,7 +5474,7 @@ msgstr ""
 
 #: covers/external_image.html
 #, python-format
-msgid "Or, use the cover from %s"
+msgid "Or, use a cover from %s"
 msgstr ""
 
 #: covers/manage.html

openlibrary/templates/covers/add.html

@@ -81,9 +81,11 @@
 $#</form>
 
 $if doc.type.key == "/type/edition" and doc.ocaid:
-    $ img_url = "https://archive.org/services/img/%s/full/pct:600/0/default.jpg" % doc.ocaid
-    $:render_template("covers/external_image", action, img_url, _("Internet Archive"))
+    $ img_url_cover = "https://archive.org/download/%s/page/cover" % doc.ocaid
+    $ img_url_title = "https://archive.org/download/%s/page/title" % doc.ocaid
+    $:render_template("covers/external_image", action, img_url_cover, img_url_title, _("Internet Archive"))
 
 $if doc.type.key == "/type/author" and data.get('wikidata_images'):
-    $ img_url = data.get('wikidata_images')[0]
-    $:render_template("covers/external_image", action, img_url, _("Wikidata"))
+    $ img_url_cover = data.get('wikidata_images')[0]
+    $ img_url_title = None
+    $:render_template("covers/external_image", action, img_url_cover, img_url_title, _("Wikidata"))

openlibrary/templates/covers/external_image.html

@@ -1,13 +1,17 @@
-$def with (action, img_url, source_name)
+$def with (action, img_url_cover, img_url_title, source_name)
 
 <form class="ol-cover-form ol-cover-form--external" method="post" enctype="multipart/form-data" action="$action">
     <div class="label">
-        <label>$_("Or, use the cover from %s", source_name)</label>
+        <label>$_("Or, use a cover from %s", source_name)</label>
     </div>
-    <div class="input">
-        <a href="$img_url" target="_blank">
-            <img class="ol-cover-form--external_image" src="$img_url" style="height: 200px" alt="" />
-        </a>
-        <button type="submit" class="cta-btn cta-btn--vanilla" name="url" value="$img_url">$_("Upload Image")</button>
+    <div class="input-container">
+        $for url in [img_url_cover, img_url_title]:
+            $if url:
+                <div class="input">
+                    <a href="$url" target="_blank">
+                        <img class="ol-cover-form--external_image" src="$url" style="height: 200px" alt="" />
+                    </a>
+                    <button type="submit" class="cta-btn cta-btn--vanilla" name="url" value="$url">$_("Upload Image")</button>
+                </div>
     </div>
 </form>

static/css/components/cbox.less

@@ -279,7 +279,12 @@ div.floater {
 
   .input {
     flex-direction: column;
-    align-items: flex-start;
+  }
+
+  .input-container {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
   }
 
   button[type="submit"] {