Added captures to images in posts, fixed overflowing mathjax (#508)

* added captures to images in posts, fixed overflowing mathjax

* fix

* phrasing fix

qdrant-landing/static/admin/config.yml

@@ -22,7 +22,7 @@ collections:
       - { label: 'Description', name: 'description', widget: 'string',
           hint: 'Shown in previews of featured posts and on social media' }
       - { label: 'Preview Image', name: 'preview_image', widget: 'image',
-          hint: 'Image should be 1200x630' }
+          hint: 'Image should be 1200x630. Ensure that main image content is placed in the middle to make pictures friendly to cropping' }
       - { label: 'Publish Date', name: 'date', widget: 'datetime' }
       - { label: 'Author', name: 'author', widget: 'string', hint: 'Name'}
       - { label: 'Featured Post', name: 'featured', widget: 'boolean', default: false,

qdrant-landing/themes/qdrant/layouts/blog/single.html

@@ -73,7 +73,12 @@
                     </div>
                 </section>
                 <div class="qb-post__content">
-                    {{ .Content }}
+                    {{ $reAltTitleIn := "<img src=\"([^\"]+)\" alt=\"([^\"]*)\" title=\"([^\"]+)\">" }}
+                    {{ $reAltTitleOut := "<figure><img src=\"$1\" alt=\"$2\" title=\"$3\"><figcaption>$3</figcaption></figure>" }}
+                    {{ $contentWithImgCaptures := .Content | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
+
+                    {{ $wrappedTable := printf "<div class=table-responsive> ${1} </div>" }}
+                    {{ $contentWithImgCaptures | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
                 </div>
             </div>
         </div>

qdrant-landing/themes/qdrant/static/css/_mathjax.scss

@@ -1,6 +1,8 @@
-code.has-jax {
+.has-jax {
 	-webkit-font-smoothing: antialiased;
 	background: inherit !important;
 	border: none !important;
 	font-size: 100%;
+	max-width: 100%;
+	overflow-x: auto;
 }