fixed some images (#9237)

docs/sources/features/datasources/graphite.md

@@ -41,7 +41,7 @@ Proxy access means that the Grafana backend will proxy all requests from the bro
 Click the ``Select metric`` link to start navigating the metric space. One you start you can continue using the mouse
 or keyboard arrow keys. You can select a wildcard and still continue.
 
-{{< docs-imagebox img="/img/docs/v45/graphite_query1_still.png" class="docs-image--center"
+{{< docs-imagebox img="/img/docs/v45/graphite_query1_still.png"
                   animated-gif="/img/docs/v45/graphite_query1.gif" >}}
 
 
@@ -52,7 +52,7 @@ a function is selected it will be added and your focus will be in the text box o
 a parameter just click on it and it will turn into a text box. To delete a function click the function name followed
 by the x icon.
 
-{{< docs-imagebox img="/img/docs/v45/graphite_query2_still.png" class="docs-image--center"
+{{< docs-imagebox img="/img/docs/v45/graphite_query2_still.png"
                   animated-gif="/img/docs/v45/graphite_query2.gif" >}}
 
 
@@ -60,7 +60,7 @@ by the x icon.
 
 Some functions like aliasByNode support an optional second argument. To add this parameter specify for example 3,-2 as the first parameter and the function editor will adapt and move the -2 to a second parameter. To remove the second optional parameter just click on it and leave it blank and the editor will remove it.
 
-{{< docs-imagebox img="/img/docs/v45/graphite_query3_still.png" class="docs-image--center"
+{{< docs-imagebox img="/img/docs/v45/graphite_query3_still.png"
                   animated-gif="/img/docs/v45/graphite_query3.gif" >}}
 
 
@@ -68,7 +68,7 @@ Some functions like aliasByNode support an optional second argument. To add this
 
 You can reference queries by the row “letter” that they’re on (similar to  Microsoft Excel). If you add a second query to a graph, you can reference the first query simply by typing in #A. This provides an easy and convenient way to build compounded queries.
 
-{{< docs-imagebox img="/img/docs/v45/graphite_nested_queries_still.png" class="docs-image--center"
+{{< docs-imagebox img="/img/docs/v45/graphite_nested_queries_still.png"
                   animated-gif="/img/docs/v45/graphite_nested_queries.gif" >}}
 
 

docs/sources/features/datasources/influxdb.md

@@ -41,7 +41,7 @@ mode is also more secure as the username & password will never reach the browser
 
 ## Query Editor
 
-{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--block docs-image--no-shadow" animated-gif="/img/docs/v45/influxdb_query.gif" >}}
+{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--no-shadow" animated-gif="/img/docs/v45/influxdb_query.gif" >}}
 
 You find the InfluxDB editor in the metrics tab in Graph or Singlestat panel's edit mode. You enter edit mode by clicking the
 panel title, then edit. The editor allows you to select metrics and tags.

docs/sources/features/datasources/mysql.md

@@ -57,7 +57,7 @@ If the `Format as` query option is set to `Table` then you can basically do any
 
 Query editor with example query:
 
-{{< docs-imagebox img="/img/docs/v45/mysql_table_query.png" class="docs-image--block" >}}
+{{< docs-imagebox img="/img/docs/v45/mysql_table_query.png" >}}
 
 The query:
 

docs/sources/features/datasources/prometheus.md

@@ -39,7 +39,7 @@ Name | Description
 
 Open a graph in edit mode by click the title > Edit (or by pressing `e` key while hovering over panel).
 
-{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png" class="docs-image--center"
+{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png"
                   animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}}
 
 Name | Description

docs/sources/features/panels/table_panel.md

@@ -22,6 +22,8 @@ To view table panels in action and test different configurations with sample dat
 ## Options overview
 
 The table panel has many ways to manipulate your data for optimal presentation.
+{{< docs-imagebox img="/img/docs/v45/table_options.png" class="docs-image--no-shadow" max-width= "500px" >}}
+
 
 1. `Data`: Control how your query is transformed into a table.
 2. `Paging`: Table display options.
@@ -29,7 +31,7 @@ The table panel has many ways to manipulate your data for optimal presentation.
 
 ## Data to Table
 
-{{< docs-imagebox img="/img/docs/v45/table_data_options.png" max-width="500px">}}
+{{< docs-imagebox img="/img/docs/v45/table_data_options.png" max-width="500px" class="docs-image--right">}}
 
 The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric
 query should be transformed into a table format.  The **Columns (2)** option allows you to select what columns
@@ -39,26 +41,26 @@ you want in the table. Only applicable for some transforms.
 
 ### Time series to rows
 
-{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--block" >}}
+{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png"  >}}
 
 In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series.
 
 ### Time series to columns
 
-{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--block" >}}
+{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" >}}
 
 
 This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series.
 
 ### Time series aggregations
 
-{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--block" >}}
+{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" >}}
 
 This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added.
 
 ### Annotations
 
-{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--block" >}}
+{{< docs-imagebox img="/img/docs/v45/table_annotations.png" >}}
 
 
 If you have annotations enabled in the dashboard you can have the table show them. If you configure this
@@ -66,17 +68,17 @@ mode then any queries you have in the metrics tab will be ignored.
 
 ### JSON Data
 
-{{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--block" max-width="500px">}}
+{{< docs-imagebox img="/img/docs/v45/table_json_data.png" max-width="500px" >}}
 
 If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this
 transform mode and pick the columns using the **Columns** section.
 
 
-{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--block" >}}
+{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" >}}
 
 ## Table Display
 
-{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow" max-width="350px">}}
+{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow docs-image--right" max-width="350px" >}}
 
 1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages.
 2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows.
@@ -87,7 +89,7 @@ transform mode and pick the columns using the **Columns** section.
 
 The column styles allow you control how dates and numbers are formatted.
 
-{{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow docs-image--block" >}}
+{{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow" >}}
 
 1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values.
 2. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`.

docs/sources/features/shortcuts.md

@@ -8,7 +8,7 @@ weight = 7
 
 # Keyboard shortcuts
 
-{{< docs-imagebox img="/img/docs/v4/shortcuts.png" max-width="20rem" >}}
+{{< docs-imagebox img="/img/docs/v4/shortcuts.png" max-width="20rem" class="docs-image--right" >}}
 
 Grafana v4 introduces a number of really powerful keyboard shortcuts. You can now focus a panel
 by hovering over it with your mouse. With a panel focused you can simple hit `e` to toggle panel

docs/sources/reference/playlist.md

@@ -16,7 +16,7 @@ Since Grafana automatically scales Dashboards to any resolution they're perfect
 
 ## Creating a Playlist
 
-{{< docs-imagebox img="/img/docs/v3/playlist.png" max-width="25rem" >}}
+{{< docs-imagebox img="/img/docs/v3/playlist.png" max-width="25rem" class="docs-image--right">}}
 
 The Playlist feature can be accessed from Grafana's sidemenu, in the Dashboard submenu.
 

docs/sources/tutorials/hubot_howto.md

@@ -74,7 +74,9 @@ If you do not get an image when opening this link verify that the required font
 
 ### Grafana API Key
 
-<img src="/img/docs/v2/orgdropdown_api_keys.png" style="width: 150px" class="right"></img>
+<!--<img src="/img/docs/v2/orgdropdown_api_keys.png" style="width: 150px" class="right"></img>-->
+{{< docs-imagebox img="/img/docs/v2/orgdropdown_api_keys.png" max-width="150px" class="docs-image--right">}}
+
 You need to set the environment variable `HUBOT_GRAFANA_API_KEY` to a Grafana API Key.
 You can add these from the API Keys page which you find in the Organization dropdown.