Add altmetric badges

layouts/custom/publications.html

@@ -6,31 +6,35 @@
 </div>
 
 <style>
-    @media (min-width: 1000px) {
-        .column {
-            float: left;
-        }
+    .column {
+        float: left;
+    }
+
+    .right {
+        width: 100%;
+    }
+
+    .split {
+        width:50%;
+    }
+
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
 
+    @media (min-width: 1000px) {
         .left {
             width: 20%;
         }
 
         .mid {
-            width: 70%;
+            width: 60%;
         }
 
         .right {
-            width: 10%;
-        }
-
-        .badge {
-            text-align: right
-        }
-
-        .row:after {
-            content: "";
-            display: table;
-            clear: both;
+            width: 20%;
         }
     }
 </style>
@@ -41,33 +45,41 @@
         {{ range first 10 (.Pages.ByParam "odate" ).Reverse }}
             <div class="row">
                 <div class="column left">
-                    <img src="images/{{.Params.ppic}}" alt="" width="100px;"
-                        style="border:5px double black; border-radius:20%;">
+                    <img src="images/{{.Params.ppic}}" alt="" width="100px;" style="border:5px double black; border-radius:20%;">
                 </div>
                 <div class="column mid">
                     <h3>{{.Params.pname}}</h3>
+                    {{ if not (eq .Params.ppubmed "") }}
+                        <h4><i><a href="https://www.ncbi.nlm.nih.gov/pubmed?term={{.Params.ppubmed}}" target="_blank">
+                    {{else}}
+                        <h4><i><a href="{{.Params.plink}}" target="_blank">
+                    {{end}}
+                    {{.Params.pauthor}}, {{.Params.pjournal}},{{.Params.pdate}}</a></i></h4>
                 </div>
                 <div class="column right">
                     <br>
-                    <span class="__dimensions_badge_embed__" data-pmid="{{.Params.ppubmed}}" data-style="small_circle"></span><script async src="https://badge.dimensions.ai/badge.js" charset="utf-8"></script>
+                    <div class="row">
+                        <div class="column split">
+                            <span class="__dimensions_badge_embed__" data-pmid="{{.Params.ppubmed}}" data-style="small_circle" style="text-align: left;"></span><script async src="https://badge.dimensions.ai/badge.js" charset="utf-8"></script>
+                        </div>
+                        <div class="column split">
+                            <div class='altmetric-embed' data-badge-type='donut' data-doi="{{.Params.doi}}" data-condensed="true" data-badge-popover="left" style="text-align: right;"></div><script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
+                        </div>
+                    </div>
                 </div>
             </div>
-            {{ if not (eq .Params.ppubmed "") }}
-                <h4><i><a href="https://www.ncbi.nlm.nih.gov/pubmed?term={{.Params.ppubmed}}" target="_blank">
-            {{else}}
-                <h4><i><a href="{{.Params.plink}}" target="_blank">
-            {{end}}
-            {{.Params.pauthor}}, {{.Params.pjournal}},{{.Params.pdate}}</a></i></h4>
-            {{ range first 1 .Params.prepo }}
-                {{ if not (eq .title "") }}
-                    <u>Data Repository:</u><br>
+            <div class="row">
+                {{ range first 1 .Params.prepo }}
+                    {{ if not (eq .title "") }}
+                        <u>Data Repository:</u><br>
+                    {{end}}
                 {{end}}
-            {{end}}
-            {{ range .Params.prepo }}
-                {{ if not (eq .title "") }}
-                    <a href="{{.loc}}" target="_blank">{{.title}}</a><br>
+                {{ range .Params.prepo }}
+                    {{ if not (eq .title "") }}
+                        <a href="{{.loc}}" target="_blank">{{.title}}</a><br>
+                    {{end}}
                 {{end}}
-            {{end}}
+            </div>
             <hr><br>
         {{end}}            
     </div>