Merge pull request #1510 from OctopusDeploy/sf/change-image-handling

Speed up library page

Author: steve-fenton-octopus

app/components/TemplateItem.jsx

@@ -69,7 +69,7 @@ export default class TemplateItem extends React.Component {
         <div className="step-template">
           <div className="row clearfix">
             <div className="column two-thirds">
-              <img className="logo" src={"data:image/gif;base64," + this.state.template.Logo} />
+              <img className="logo" loading="lazy" src={this.state.template.Logo} />
               <h2 className="name">{this.state.template.Name}</h2>
               <p className="who-when faint no-top-margin">
                 <i>{this.state.template.ActionType}</i> exported {moment(this.state.template.ExportedAt).calendar()} by

app/components/TemplateList.jsx

@@ -26,8 +26,8 @@ export default class TemplateList extends React.Component {
       }
       let friendlySlug = SlugMaker.make(item.Name);
       return (
-        <li className={"item-summary " + item.ScriptClass} key={index + "." + item.Name}>
-          <img src={"data:image/gif;base64," + item.Logo} />
+        <li className={"item-summary " + (item.ScriptClass || "")} key={index + "." + item.Name}>
+          <img loading="lazy" src={item.Logo} />
           <h4 key={index + "." + item.Name + ".0"}>
             <Link to={`/step-templates/${item.Id}/${friendlySlug}`}>{item.Name}</Link>
           </h4>

gulpfile.babel.js

@@ -300,10 +300,8 @@ function provideMissingData() {
 
     template.Category = humanize(categoryId);
 
-    if (!template.Logo) {
-      var logo = fs.readFileSync("./step-templates/logos/" + categoryId + ".png");
-      template.Logo = Buffer.from(logo).toString("base64");
-    }
+    // Note: this deprecates base64 encoded images in the template files - they will be ignored
+    template.Logo = "https://i.octopus.com/library/step-templates/" + categoryId + ".png";
 
     file.contents = Buffer.from(JSON.stringify(template));