Lovelace to dashboard (#23205)

source/_dashboards/alarm-panel.markdown

@@ -8,7 +8,7 @@ description: "The Alarm Panel card allows you to arm and disarm your alarm contr
 The Alarm Panel card allows you to arm and disarm your [alarm control panel](/integrations/#alarm) integrations.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_alarm_panel_card.gif' alt='Screenshot of the alarm panel card'>
+<img src='/images/dashboards/alarm_panel_card.gif' alt='Screenshot of the alarm panel card'>
 Screenshot of the Alarm Panel card.
 </p>
 
@@ -66,7 +66,7 @@ Title example:
 ```
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_alarm_panel_title_card.gif' alt='Screenshot of the alarm panel card'>
+<img src='/images/dashboards/alarm_panel_title_card.gif' alt='Screenshot of the alarm panel card'>
 Screenshot of the Alarm Panel card.
 </p>
 

source/_dashboards/area.markdown

@@ -8,7 +8,7 @@ description: "The Area card gives control of your entities in a specified area."
 The Area card lets you control and monitor an individual area.
 
 <p class='img'>
-  <img src='/images/blog/2021-12/area-card.png' alt='Screenshot of the Area card'>
+  <img src='/images/dashboards/area-card.png' alt='Screenshot of the Area card'>
   Screenshot of the Area card.
 </p>
 

source/_dashboards/button.markdown

@@ -8,7 +8,7 @@ description: "The Button card allows you to add buttons to perform tasks."
 The Button card allows you to add buttons to perform tasks.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_entity_button_card.png' alt='Screenshot of three Button Cards'>
+<img src='/images/dashboards/entity_button_card.png' alt='Screenshot of three Button Cards'>
 Screenshot of three Button Cards.
 </p>
 
@@ -135,6 +135,6 @@ tap_action:
 ```
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_entity_button_complex_card.png' alt='Screenshot of the Button card with Script Service'>
+<img src='/images/dashboards/entity_button_complex_card.png' alt='Screenshot of the Button card with Script Service'>
 Screenshot of the Button card with Script Service.
 </p>

source/_dashboards/calendar.markdown

@@ -8,7 +8,7 @@ description: "The calendar card displays your calendar entities in a month, day
 The Calendar card displays your [calendar](/integrations/#calendar) entities in a month, day and list view.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_calendar_card.png' alt='Screenshot of the 
+  <img src='/images/dashboards/calendar_card.png' alt='Screenshot of the 
   calendar card'>
   Screenshot of the Calendar card.
 </p>

source/_dashboards/entities.markdown

@@ -398,7 +398,7 @@ entities:
 Above the divider are regular entity rows, below one of type `buttons`. Note that regular entity rows automatically show the entity name, whereas for buttons you have to explicitly specify a label / name.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_entity_row_buttons.jpg' alt='Screenshot of buttons row'>
+<img src='/images/dashboards/entity_row_buttons.jpg' alt='Screenshot of buttons row'>
 Screenshot of buttons row.
 </p>
 
@@ -419,7 +419,7 @@ entities:
 ### Other special rows
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_entity_row_special.jpg' alt='Screenshot of other special rows'>
+<img src='/images/dashboards/entity_row_special.jpg' alt='Screenshot of other special rows'>
 Screenshot of other special rows.
 </p>
 

source/_dashboards/entity-filter.markdown

@@ -10,7 +10,7 @@ The Entity Filter card allows you to define a list of entities that you want to
 This type of card can also be used together with rest of cards that allow multiple entities, allowing you to use [glance](/dashboards/glance/) or [picture-glance](/dashboards/picture-glance/). By default it uses [entities](/dashboards/entities/) card model.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_entity_filter.png' alt='Screenshot of the Entity Filter card'>
+<img src='/images/dashboards/entity_filter.png' alt='Screenshot of the Entity Filter card'>
 Screenshot of the Entity Filter card.
 </p>
 
@@ -124,7 +124,7 @@ card:
 ```
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_entity_filter_glance.png' alt='Entity filter combined with glance card'>
+  <img src='/images/dashboards/entity_filter_glance.png' alt='Entity filter combined with glance card'>
   Entity filter combined with glance card.
 </p>
 

source/_dashboards/entity.markdown

@@ -8,7 +8,7 @@ description: "The Entity card gives you a quick overview of your entity's state"
 The Entity card gives you a quick overview of your entity's state.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_entity_card.png' alt='Screenshot of the entity card'>
+  <img src='/images/dashboards/entity_card.png' alt='Screenshot of the entity card'>
   Screenshot of the Entity card.
 </p>
 

source/_dashboards/gauge.markdown

@@ -8,12 +8,12 @@ description: "The Gauge card is a basic card that allows visually seeing sensor
 The Gauge card is a basic card that allows visually seeing sensor data.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_gauge_card.gif' alt='Screenshot of the Gauge card'>
+<img src='/images/dashboards/gauge_card.gif' alt='Screenshot of the Gauge card'>
 Screenshot of the Gauge card.
 </p>
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_gauge_needle_card.png' alt='Screenshot of the Gauge card in needle mode'>
+<img src='/images/dashboards/gauge_needle_card.png' alt='Screenshot of the Gauge card in needle mode'>
 Screenshot of the Gauge card in needle mode.
 </p>
 
@@ -108,7 +108,7 @@ entity: sensor.cpu_usage
 ```
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_gauge_card.gif' alt='Screenshot of the gauge card with custom title and unit of measurement'>
+<img src='/images/dashboards/gauge_card.gif' alt='Screenshot of the gauge card with custom title and unit of measurement'>
 Screenshot of the gauge card with custom title and unit of measurement.
 </p>
 
@@ -128,7 +128,7 @@ severity:
 Multiple segments:
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_gauge_segments.png' alt='Screenshot of the gauge card with multiple colored segments.'>
+<img src='/images/dashboards/gauge_segments.png' alt='Screenshot of the gauge card with multiple colored segments.'>
 Screenshot of the gauge card with multiple colored segments.
 </p>
 

source/_dashboards/glance.markdown

@@ -8,7 +8,7 @@ description: "The Glance card is useful to group multiple sensors in a compact o
 The Glance card is useful to group multiple sensors in a compact overview. Keep in mind that this can be used together with [entity-filter](/dashboards/entity-filter/) cards to create dynamic cards.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_glance_card.png' alt='Screenshot of the glance card'>
+<img src='/images/dashboards/glance_card.png' alt='Screenshot of the glance card'>
 Screenshot of the Glance card.
 </p>
 
@@ -129,7 +129,7 @@ entities:
 ```
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_glance_card.png' alt='Screenshot of the glance card with custom title'>
+<img src='/images/dashboards/glance_card.png' alt='Screenshot of the glance card with custom title'>
 Screenshot of the glance card with custom title.
 </p>
 

source/_dashboards/grid.markdown

@@ -8,7 +8,7 @@ description: "The Grid card allows you to show multiple cards in a grid."
 The Grid card allows you to show multiple cards in a grid. It will first fill the columns, automatically adding new rows as needed.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_grid.png' alt='Screenshot of the grid card'>
+  <img src='/images/dashboards/grid.png' alt='Screenshot of the grid card'>
   Screenshot of the Grid card.
 </p>
 

source/_dashboards/history-graph.markdown

@@ -8,12 +8,12 @@ description: "The History Graph card allows you to display a graph for each of t
 The History Graph card allows you to display a graph for each of the entities listed.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_history_graph.png' alt='Screenshot of the history graph card for entities without a unit_of_measurement'>
+<img src='/images/dashboards/history_graph.png' alt='Screenshot of the history graph card for entities without a unit_of_measurement'>
 Screenshot of the History Graph card, when the sensor has no `unit_of_measurement` defined.
 </p>
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_history_graph_lines.png' alt='Screenshot of the history graph card for entities with a unit_of_measurement'>
+<img src='/images/dashboards/history_graph_lines.png' alt='Screenshot of the history graph card for entities with a unit_of_measurement'>
 Screenshot of the History Graph card, when the sensor has a `unit_of_measurement` defined.
 </p>
 

source/_dashboards/horizontal-stack.markdown

@@ -39,6 +39,6 @@ cards:
 ```
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_horizontal_stack.PNG' alt='Two picture cards in a horizontal stack card'>
+  <img src='/images/dashboards/horizontal_stack.png' alt='Two picture cards in a horizontal stack card'>
   Two Picture cards in a Horizontal Stack card.
 </p>

source/_dashboards/humidifier.markdown

@@ -8,7 +8,7 @@ description: "The Humidifier card gives control of your humidifier entity, allow
 The Humidifier card lets you control and monitor humidifiers, dehumidifiers, and hygrostat devices.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_humidifier_card.png' alt='Screenshot of the humidifier card'>
+  <img src='/images/dashboards/humidifier_card.png' alt='Screenshot of the humidifier card'>
   Screenshot of the humidifier card.
 </p>
 

source/_dashboards/iframe.markdown

@@ -12,7 +12,7 @@ You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
 </div>
 
 <p class='img'>
-  <img width="500" src='/images/dashboards/lovelace_iframe.png' alt='Windy weather radar as Webpage'>
+  <img width="500" src='/images/dashboards/iframe.png' alt='Windy weather radar as Webpage'>
   Windy weather radar as Webpage.
 </p>
 

source/_dashboards/light.markdown

@@ -8,7 +8,7 @@ description: "The Light card allows you to change the brightness of the light."
 The Light card allows you to change the brightness of the light.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_light_card.png' alt='Screenshot of the Light card'>
+<img src='/images/dashboards/light_card.png' alt='Screenshot of the Light card'>
 Screenshot of the Light card.
 </p>
 
@@ -71,6 +71,6 @@ name: My Office
 ```
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_light_complex_card.png' alt='Screenshot of the Light card'>
+<img src='/images/dashboards/light_complex_card.png' alt='Screenshot of the Light card'>
 Screenshot of the Light card names.
 </p>

source/_dashboards/logbook.markdown

@@ -8,7 +8,7 @@ description: "The Logbook card displays entries from the logbook for specific en
 The Logbook card displays entries from the logbook for specific entities.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_logbook.png' alt='Screenshot of the logbook card'>
+  <img src='/images/dashboards/logbook.png' alt='Screenshot of the logbook card'>
   Screenshot of the Logbook card.
 </p>
 

source/_dashboards/map.markdown

@@ -8,7 +8,7 @@ description: "The Map card that allows you to display entities on a map"
 The Map card that allows you to display entities on a map
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_map_card.png' alt='Screenshot of the map card'>
+<img src='/images/dashboards/map_card.png' alt='Screenshot of the map card'>
 Screenshot of the map card.
 </p>
 

source/_dashboards/markdown.markdown

@@ -10,7 +10,7 @@ The Markdown card is used to render [Markdown](https://commonmark.org/help/).
 The renderer uses [Marked.js](https://marked.js.org), which supports [several specifications of Markdown](https://marked.js.org/#specifications), including CommonMark, GitHub Flavored Markdown (GFM) and `markdown.pl`.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_markdown.png' alt='Screenshot of the markdown card'>
+<img src='/images/dashboards/markdown.png' alt='Screenshot of the markdown card'>
 Screenshot of the Markdown card.
 </p>
 
@@ -125,7 +125,7 @@ You can also use our [\`ha-alert\`](https://design.home-assistant.io/#components
 Example:
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_markdown_ha-alert.png' alt='Screenshot of the ha-alert elements in a markdown card'>
+<img src='/images/dashboards/markdown_ha-alert.png' alt='Screenshot of the ha-alert elements in a markdown card'>
 Screenshot of the ha-alert elements in a markdown card.
 </p>
 

source/_dashboards/media-control.markdown

@@ -8,7 +8,7 @@ description: "The Media Control card is used to display media player entities on
 The Media Control card is used to display [Media Player](/integrations/#media-player) entities on an interface with easy to use controls.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_mediaplayer.png' alt='Screenshot of the media player control card'>
+<img src='/images/dashboards/mediaplayer.png' alt='Screenshot of the media player control card'>
 Screenshot of the Media Control card.
 </p>
 

source/_dashboards/picture-elements.markdown

@@ -10,7 +10,7 @@ The Picture Elements card is one of the most versatile types of cards.
 The cards allow you to position icons or text and even services on an image based on coordinates. Imagine floor plan, imagine [picture-glance](/dashboards/picture-glance/) with no restrictions!
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_picture_elements.gif' alt='A functional floorplan powered by picture elements'>
+  <img src='/images/dashboards/picture_elements.gif' alt='A functional floorplan powered by picture elements'>
   A functional floorplan powered by picture elements.
 </p>
 

source/_dashboards/picture-entity.markdown

@@ -8,7 +8,7 @@ description: The Picture Entity card displays an entity in the form of an image.
 The Picture Entity card displays an entity in the form of an image. Instead of images from URL, it can also show the picture of `camera` entities.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_picture_entity.gif' alt='Picture entity card'>
+  <img src='/images/dashboards/picture_entity.gif' alt='Picture entity card'>
   Background changes according to the entity state.
 </p>
 

source/_dashboards/picture-glance.markdown

@@ -8,7 +8,7 @@ description: "The Picture Glance card shows an image and corresponding entity st
 The Picture Glance card shows an image and corresponding entity states as an icon. The entities on the right side allow toggle actions, others show the more information dialog.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_picture_glance.gif' alt='Picture glance card for a living room'>
+  <img src='/images/dashboards/picture_glance.gif' alt='Picture glance card for a living room'>
   Picture glance card for a living room.
 </p>
 

source/_dashboards/picture.markdown

@@ -8,7 +8,7 @@ description: "The Picture card allows you to set an image to use for navigation
 The Picture card allows you to set an image to use for navigation to various paths in your interface or to call a service.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_picture.png' alt='Screenshot of the picture card'>
+<img src='/images/dashboards/picture.png' alt='Screenshot of the picture card'>
 Screenshot of the picture card.
 </p>
 

source/_dashboards/plant-status.markdown

@@ -8,7 +8,7 @@ description: "The Plant Status card is for all the lovely botanists out there."
 The Plant Status card is for all the lovely botanists out there.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_plant_card.png' alt='Screenshot of the plant status card'>
+<img src='/images/dashboards/plant_card.png' alt='Screenshot of the plant status card'>
 Screenshot of the plant status card.
 </p>
 

source/_dashboards/sensor.markdown

@@ -8,7 +8,7 @@ description: "The Sensor card gives you a quick overview of your sensors state w
 The Sensor card gives you a quick overview of your sensors state with an optional graph to visualize change over time.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_sensor.png' alt='Screenshot of the sensor card'>
+  <img src='/images/dashboards/sensor.png' alt='Screenshot of the sensor card'>
   Screenshot of the sensor card.
 </p>
 

source/_dashboards/shopping-list.markdown

@@ -10,7 +10,7 @@ The Shopping List card allows you to add, edit, check-off, and clear items from
 Setup of the [Shopping List integration](/integrations/shopping_list/) is required.
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_shopping_list_card.gif' alt='Screenshot of the shopping list card'>
+<img src='/images/dashboards/shopping_list_card.gif' alt='Screenshot of the shopping list card'>
 Screenshot of the Shopping List card.
 </p>
 

source/_dashboards/statistics-graph.markdown

@@ -12,12 +12,12 @@ Statistics are gathered every hour for sensors that support it. It will either k
 If your sensor doesn't work with statistics, check [this](/more-info/statistics/).
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_statistics_graph_line.png' alt='Screenshot of the statistics graph card for power entities'>
+<img src='/images/dashboards/statistics_graph_line.png' alt='Screenshot of the statistics graph card for power entities'>
 Screenshot of the Statistics Graph card with none metered entities and `chart_type` `line`.
 </p>
 
 <p class='img'>
-<img src='/images/dashboards/lovelace_statistics_graph_bar.png' alt='Screenshot of the statistics graph card for energy entities'>
+<img src='/images/dashboards/statistics_graph_bar.png' alt='Screenshot of the statistics graph card for energy entities'>
 Screenshot of the Statistics Graph card with a metered entity and `chart_type` `bar`.
 </p>
 

source/_dashboards/thermostat.markdown

@@ -8,7 +8,7 @@ description: "The Thermostat card gives control of your climate entity, allowing
 The Thermostat card gives control of your [climate](/integrations/#climate) entity, allowing you to change the temperature and mode of the entity.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_thermostat_card.gif' alt='Screenshot of the thermostat card'>
+  <img src='/images/dashboards/thermostat_card.gif' alt='Screenshot of the thermostat card'>
   Screenshot of the Thermostat card.
 </p>
 

source/_dashboards/vertical-stack.markdown

@@ -43,7 +43,7 @@ cards:
 ```
 
 <p class="img">
-  <img src="/images/dashboards/lovelace_vertical-stack.png" alt="Picture- and entities-card in a stack">
+  <img src="/images/dashboards/vertical-stack.png" alt="Picture- and entities-card in a stack">
   Picture and entities-card in a stack.
 </p>
 
@@ -66,6 +66,6 @@ cards:
 ```
 
 <p class="img">
-  <img src="/images/dashboards/lovelace_vertical-horizontal-stack.png" alt="Create a grid layout using vertical and horizontal stack">
+  <img src="/images/dashboards/vertical-horizontal-stack.png" alt="Create a grid layout using vertical and horizontal stack">
   Create a grid layout using vertical and horizontal stack.
 </p>

source/_dashboards/weather-forecast.markdown

@@ -8,7 +8,7 @@ description: "The Weather Forecast card displays the weather. Very useful to inc
 The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall.
 
 <p class='img'>
-  <img src='/images/dashboards/lovelace_weather.png' alt='Screenshot of the weather card'>
+  <img src='/images/dashboards/weather.png' alt='Screenshot of the weather card'>
   Screenshot of the Weather card.
 </p>
 

source/_posts/2021-12-11-release-202112.markdown

@@ -135,7 +135,7 @@ automatically populates with entities of devices you have assigned
 to that specific area.
 
 <p class='img'>
-<img src='/images/blog/2021-12/area-card.png' alt='Screenshot of a new area Lovelace card'>
+<img src='/images/dashboards/area-card.png' alt='Screenshot of a new area Lovelace card'>
 Screenshot of a new area Lovelace card.
 </p>
 

source/_redirects

@@ -498,3 +498,6 @@
 /integrations/yessssms /more-info/removed-integration 301
 /integrations/yweather /more-info/removed-integration 301
 /components/zwave /integrations/zwave_js
+
+# Lovelace images
+/images/dashboards/lovelace_* /images/dashboards/:splat

source/dashboards/views.markdown

@@ -10,7 +10,7 @@ You can add a view to your user interface, by clicking the menu (three dots at t
 Click the `+` button in the top menu bar.
 
 <p class="img">
-  <img src="/images/dashboards/lovelace_views.png" alt="Views toolbar">
+  <img src="/images/dashboards/views.png" alt="Views toolbar">
   Use titles and icons to describe the content of views.
 </p>