DOC: fix

Author: jklymak

doc/_static/image-rotator.js

@@ -0,0 +1,46 @@
+// accessible JavaScript tab switcher
+// modified from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
+
+function getRandomInt(max) {
+  return Math.floor(Math.random() * max);
+}
+
+var images_rotate = [
+    {"image": "sphx_glr_plot_001_2_00x.png", "caption": "plot(x, y)", "link": "plot_types/basic/plot.html"},
+    {"image": "sphx_glr_step_001_2_00x.png", "caption": "step(x, y)", "link": "plot_types/basic/step.html"},
+    {"image": "sphx_glr_scatter_plot_001_2_00x.png", "caption": "scatter(x, y)", "link": "plot_types/basic/scatter_plot.html"},
+    {"image": "sphx_glr_pcolormesh_001_2_00x.png", "caption": "pcolormesh(X, Y, Z)", "link": "plot_types/arrays/pcolormesh.html"},
+    {"image": "sphx_glr_contourf_001_2_00x.png", "caption": "contourf(X, Y, Z)", "link": "plot_types/arrays/contourf.html"},
+    {"image": "sphx_glr_step_001_2_00x.png", "caption": "step(x, y)", "link": "plot_types/basic/step.html"},
+    {"image": "sphx_glr_streamplot_001_2_00x.png", "caption": "streamplot(X, Y, U, V)", "link": "plot_types/arrays/streamplot.html"},
+    {"image": "sphx_glr_bar_001_2_00x.png", "caption": "bar(x, height) / barh(y, width)", "link": "plot_types/basic/bar.html"},
+    {"image": "sphx_glr_hist_plot_001_2_00x.png", "caption": "hist(x)", "link": "plot_types/stats/hist_plot.html"},
+    {"image": "sphx_glr_imshow_001_2_00x.png", "caption": "imshow(Z)", "link": "plot_types/arrays/imshow.html"},
+];
+
+document.addEventListener("DOMContentLoaded", function(event) {
+  ///////////////////////////////////////
+  // rotate images in images-rotate directory:
+  var ind = getRandomInt(images_rotate.length);
+  var info = images_rotate[ind];
+  var img_src = "../_images/" + info.image;
+  var caption = info.caption;
+  var link = "https://matplotlib.org/stable/" + info.link;
+  var html = '<a href="' + link + '">' +
+    '<img class="imrot-img" src="' + img_src + '" aria-labelledby="sample-plot-caption"/>' +
+    '<div class="imrot-cap" id="sample-plot-caption">' + caption + '</div>' +
+    '</a>';
+document.getElementById('image_rotator').innerHTML = html;
+
+  ind = getRandomInt(images_rotate.length);
+  info = images_rotate[ind];
+  img_src = "../_images/" + info.image;
+  caption = info.caption;
+  link = "https://matplotlib.org/stable/" + info.link;
+  html = '<a href="' + link + '">' +
+  '<img class="imrot-img" src="' + img_src + '" aria-labelledby="sample-plot-caption"/>' +
+  '<div class="imrot-cap" id="sample-plot-caption">' + caption + '</div>' +
+  '</a>';
+document.getElementById('image_rotator2').innerHTML = html;
+
+});

doc/_static/mpl.css

@@ -120,3 +120,16 @@ div.wide-table table th.stub {
     left: 0;
     position: sticky;
 }
+
+.imrot-img {
+    display: flex;
+    margin: auto;
+    max-width:15em;
+    align-self: center;
+  }
+
+  .imrot-cap {
+    text-align: center;
+    font-style: italic;
+    font-size:  large;
+  }

doc/conf.py

@@ -772,4 +772,5 @@ def setup(app):
         bld_type = 'rel'
     app.add_config_value('skip_sub_dirs', 0, '')
     app.add_config_value('releaselevel', bld_type, 'env')
+    app.add_js_file('image-rotator.js')
     app.connect('html-page-context', add_html_cache_busting, priority=1000)

doc/users/index.rst

@@ -2,16 +2,19 @@
 
 .. redirect-from:: /contents
 
-
 ##########
 User guide
 ##########
 
-
 .. grid:: 1 1 2 2
 
    .. grid-item-card::
 
+      .. raw:: html
+
+         <div class="grid__intro" id="image_rotator"></div>
+
+
       .. toctree::
          :maxdepth: 1
 
@@ -20,6 +23,16 @@ User guide
          faq/index.rst
          resources/index.rst
 
+   .. grid-item-card::
+
+      .. toctree::
+         :maxdepth: 2
+
+         explain/index.rst
+
+
+.. grid:: 1 1 2 2
+
    .. grid-item-card::
 
       .. toctree::
@@ -31,21 +44,10 @@ User guide
          ../tutorials/index.rst
          ../gallery/index.rst
 
+      .. raw:: html
 
+         <div class="grid__intro" id="image_rotator2"></div>
 
-.. toctree::
-   :hidden:
-   :maxdepth: 1
-
-
-.. grid:: 1 1 2 2
-
-   .. grid-item-card::
-
-      .. toctree::
-         :maxdepth: 2
-
-         explain/index.rst
 
    .. grid-item-card::
 

galleries/users_explain/index.rst

@@ -3,6 +3,8 @@
 
 .. redirect-from:: /users/explain
 
+
+
 Using Matplotlib
 ----------------