From a1861ff6def2c0c0fae8acd5a98a7f653d24de95 Mon Sep 17 00:00:00 2001
From: Jesse Hills <3060199+jesserockz@users.noreply.github.com>
Date: Fri, 24 Nov 2023 08:10:39 +1300
Subject: [PATCH] Add documentation for images using URL (#3409)

---
 components/display/index.rst | 32 ++++++++++++++++++++------------
 lint.py                      |  1 +
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/components/display/index.rst b/components/display/index.rst
index 5e8bfd2b6..2388f7233 100644
--- a/components/display/index.rst
+++ b/components/display/index.rst
@@ -184,7 +184,7 @@ Next, create a ``font:`` section in your configuration:
 
       - file: "fonts/tom-thumb.bdf"
         id: tomthumb
-        
+
       - file: 'gfonts://Material+Symbols+Outlined'
         id: icon_font_50
         size: 50
@@ -202,7 +202,7 @@ Configuration variables:
 
     **Google Fonts**:
 
-    Each Google Font will be downloaded once and cached for future use. This can also be used to download Material 
+    Each Google Font will be downloaded once and cached for future use. This can also be used to download Material
     Symbols or Icons as in the example above.
 
   - **family** (**Required**, string): The name of the Google Font family.
@@ -407,10 +407,10 @@ You can display current time using a time component. Please see the example :ref
 Screen Clipping
 ***************
 
-Screen clipping is a new set of methods since version 2023.2.0 of esphome. It could be useful when you just want to show 
+Screen clipping is a new set of methods since version 2023.2.0 of esphome. It could be useful when you just want to show
 a part of an image or make sure that what you draw on the screen does not go outside a specific region on the screen.
 
-With ``start_clipping(left, top, right, bottom);`` start you the clipping process and when you are done drawing in that region 
+With ``start_clipping(left, top, right, bottom);`` start you the clipping process and when you are done drawing in that region
 you can stop the clipping process with ``end_clipping();`` . You can nest as many ``start_clipping();`` as you want as long
 you end them as many times as well.
 
@@ -420,7 +420,7 @@ you end them as many times as well.
       - platform: ...
         # ...
         id: my_binary_sensor
-    
+
     color:
       - name: my_red
         red: 100%
@@ -439,12 +439,12 @@ you end them as many times as well.
           it.printf(0, 0, id(my_font), id(my_red), "State: %s", id(my_binary_sensor).state ? "ON" : "OFF");
           it.end_clipping();
 
-After you started clipping you can manipulate the region with ``extend_clipping(left, top, right, bottom);`` 
+After you started clipping you can manipulate the region with ``extend_clipping(left, top, right, bottom);``
 and ``shrink_clipping(left, top, right, bottom);`` within previous set clipping region.
 
 With ``get_clipping();`` you get a ``Rect`` object back with the latest set clipping region.
 
-.. code-block:: cpp 
+.. code-block:: cpp
 
     class Rect {
         int16_t x;  ///< X/Left coordinate
@@ -678,6 +678,13 @@ Use this component to store graphical images on the device, you can then draw th
         id: alert
         resize: 80x80
 
+.. code-block:: yaml
+
+    image:
+      - file: https://esphome.io/_images/logo.png
+        id: esphome_logo
+        resize: 200x162
+
 Configuration variables:
 
 - **file** (**Required**, string):
@@ -685,7 +692,8 @@ Configuration variables:
   - **Local files**: The path (relative to where the .yaml file is) of the image file.
   - **Material Design Icons**: Specify the `Material Design Icon <https://pictogrammers.com/library/mdi/>`_
     id in the format ``mdi:icon-name``, and that icon will automatically be downloaded and added to the configuration.
-  
+  - **Remote files**: The URL of the image file.
+
 - **id** (**Required**, :ref:`config-id`): The ID with which you will be able to reference the image later
   in your display code.
 - **resize** (*Optional*, string): If set, this will resize the image to fit inside the given dimensions ``WIDTHxHEIGHT``
@@ -971,7 +979,7 @@ Color Test Pattern
 ******************
 
 If you're experiencing issues with your color display, the script below can help you to identify what might be wrong.
-It will show 3 color bars in **RED**, **GREEN** and **BLUE**. To help the graphics display team determine 
+It will show 3 color bars in **RED**, **GREEN** and **BLUE**. To help the graphics display team determine
 the best way to help you, **a picture of the result of this script is very helpful.**
 
 Should you `create an issue <https://github.com/esphome/issues/issues>`__ in GitHub regarding your display, please
@@ -988,15 +996,15 @@ be sure to **include a link to where you purchased it** so that we can validate
           for(auto i = 0; i<256; i++) {
             it.horizontal_line(shift_x+  0,i+shift_y,50, my_red.fade_to_white(i));
             it.horizontal_line(shift_x+ 50,i+shift_y,50, my_red.fade_to_black(i));
-    
+
             it.horizontal_line(shift_x+105,i+shift_y,50, my_green.fade_to_white(i));
             it.horizontal_line(shift_x+155,i+shift_y,50, my_green.fade_to_black(i));
-    
+
             it.horizontal_line(shift_x+210,i+shift_y,50, my_blue.fade_to_white(i));
             it.horizontal_line(shift_x+260,i+shift_y,50, my_blue.fade_to_black(i));
           }
           it.rectangle(shift_x+ 0, 0+shift_y, shift_x+ 310, 256+shift_y, my_yellow);
-    
+
     color:
       - id: my_blue
         blue: 100%
diff --git a/lint.py b/lint.py
index a4b3276a1..7240ee97e 100644
--- a/lint.py
+++ b/lint.py
@@ -395,6 +395,7 @@ def lint_directive_formatting(fname, content):
     include=["*.rst"],
     exclude=[
         "components/web_server.rst",
+        "components/display/index.rst",
     ],
 )
 def lint_esphome_io_link(fname, match):