Move embedded PDFs from SlideShare to *here*

Firefox and Chrome both, finally, after years, have good working native PDF <embed> support. I even managed to get the boxes sized to fit 16:9 or 4:3 aspect PDFs.
neuropoly · Oct 29, 2021 · 706bef5 · 706bef5
1 parent 27bbfb7
commit 706bef5
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 6 deletions.
diff --git a/_static/_media/201907187tspinecoil.pdf b/_static/_media/201907187tspinecoil.pdf
diff --git a/_static/_media/20201120updatedprojects.pdf b/_static/_media/20201120updatedprojects.pdf
diff --git a/_static/_media/acdc3t.pdf b/_static/_media/acdc3t.pdf
diff --git a/_static/_media/neuropolyslides.pdf b/_static/_media/neuropolyslides.pdf
diff --git a/_static/theme.css b/_static/theme.css
@@ -40,3 +40,36 @@ body > div.container-xl {
 div.navbar-brand-box {
   padding-top: 0;
 }
+
+
+/* make sure embedded pdfs render in 16:9 aspect ratio.
+ * You can't use CSS to directly calculate width in terms of height or vice versa,
+ * but there's a clever hack involving a wrapper div:
+ * https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
+ *
+ */
+div.pdf-container {
+  position: relative;
+  width: 100%;
+}
+
+div.pdf-container.r16-9 {
+  /* Our PDFs are in 16:9 aspect ratio, or 56.25%. 59% gives that plus a bit of room for the toolbar. */
+  padding-top: 59%;
+}
+
+div.pdf-container.r4-3 {
+  /* 4:3, or 75% plus some leeway for the toolbar = 78% */
+  padding-top: 78%;
+}
+
+div.pdf-container > embed[type="application/pdf"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  width: 100%;
+  height: 100%;
+}
diff --git a/research/README.md b/research/README.md
@@ -9,4 +9,6 @@ data-scripts
 collaborations
 ```
 
-<iframe src="//www.slideshare.net/slideshow/embed_code/key/13AFh159hwCSr1" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/jcohenadad/neuropoly-slides" title="NeuroPoly" target="_blank">NeuroPoly</a> </strong> from <strong><a href="https://www.slideshare.net/jcohenadad" target="_blank">jcohenadad</a></strong> </div>
+<div class="pdf-container r4-3">
+  <embed src="../_static/_media/neuropolyslides.pdf" type="application/pdf" />
+</div>
diff --git a/research/rf-and-shim-coil-design.md b/research/rf-and-shim-coil-design.md
@@ -4,14 +4,18 @@ The RF Lab is supported by [TransMedTech](https://www.polymtl.ca/transmedtech/en
 
 ## RF Coils for MRI
 
-<iframe src="//www.slideshare.net/slideshow/embed_code/key/dm5HYqLGZtee8p" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/neuropoly/design-and-manufacturing-of-coils-for-mri-application-239360452" title="Design and manufacturing of coils for MRI application" target="_blank">Design and manufacturing of coils for MRI application</a> </strong> from <strong><a href="https://www.slideshare.net/neuropoly" target="_blank">NeuroPoly </a></strong> </div>
-
+<div class="pdf-container r16-9">
+  <embed src="../_static/_media/20201120updatedprojects.pdf" type="application/pdf" />
+</div>
 
 ## C-Spine Coil for 7T MRI
 
-<iframe src="//www.slideshare.net/slideshow/embed_code/key/BM50VgTl7437uA" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/neuropoly/20190718-7-tspinecoil" title="20190718 7 t_spine_coil" target="_blank">20190718 7 t_spine_coil</a> </strong> from <strong><a href="https://www.slideshare.net/neuropoly" target="_blank">NeuroPoly </a></strong> </div>
-
+<div class="pdf-container r16-9">
+  <embed src="../_static/_media/201907187tspinecoil.pdf" type="application/pdf" />
+</div>
 
 ## Real-time shimming
 
-<iframe src="//www.slideshare.net/slideshow/embed_code/key/lhvoyKuHLsgc8L" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/neuropoly/integrated-rf-and-shim-coils-for-mri-105560384" title=" Integrated RF and Shim coils for MRI" target="_blank"> Integrated RF and Shim coils for MRI</a> </strong> from <strong><a href="https://www.slideshare.net/neuropoly" target="_blank">NeuroPoly </a></strong> </div>
+<div class="pdf-container r16-9">
+  <embed src="../_static/_media/acdc3t.pdf" type="application/pdf" />
+</div>