*************** Add a Home Page *************** **Last Updated:** January 2023 In this tutorial you will create a home page for the Google Earth Engine app that you created in :ref:`google_earth_engine_part_1`. This page will contain introductory information about that app. This will involve moving the current "home page", which contains the map viewer, to a new endpoint. Then you will set up a new controller and template for the new home page. The following topics will be reviewed in this tutorial: * Adding a new view to your app * Responsive web design using Bootstrap * Bootstrap Grid System * Bootstrap Fluid Containers * Custom styling with CSS * Linking to other pages and navigation * Placeholder content for development: lorem ipsum and images .. figure:: ./resources/home_page_solution.png :width: 800px :align: center 0. Start From Previous Solution (Recommended) ============================================= We recommend you use the previous solution as a starting point for Part 2: .. parsed-literal:: git clone https://github.com/tethysplatform/tethysapp-earth_engine.git cd tethysapp-earth_engine git checkout -b plot-data-solution plot-data-solution-|version| 1. Move Map View to Viewer Endpoint =================================== Currently, the map viewer page is the "home" page of the app as evidenced by it being rendered by a controller called ``home`` and a template called :file:`home.html`. In this step you will rename these to "viewer" to make way for the new home page. You will also change it's endpoint from the root endpoint to a new endpoint to allow the new home page to use the root endpoint. 1. Rename :file:`templates/earth_engine/home.html` to :file:`templates/earth_engine/viewer.html`. 2. Rename ``home`` controller to ``viewer`` in :file:`controllers.py`: .. code-block:: python @controller def viewer(request): """ Controller for the app viewer page. """ 3. Change the ``render`` call at the end of the ``viewer`` controller to use the new :file:`templates/earth_engine/viewer.html` in :file:`controllers.py`: .. code-block:: python return render(request, 'earth_engine/viewer.html', context) 4. Set custom URLs for the ``get_image_collection`` and ``get_time_series_plot`` controllers in :file:`controllers.py`: so that their URLs are relative to the ``viewer`` url: .. code-block:: python @controller(url='viewer/get-image-collection') def get_image_collection(request): ... .. code-block:: python @controller(url='viewer/get-time-series-plot') def get_time_series_plot(request): ... 2. Create New Home Endpoint =========================== In this step you will create a new ``home`` controller and :file:`home.html` template for the new home page. 1. Create a new :file:`templates/earth_engine/home.html` with the following contents: .. code-block:: html+django {% extends "earth_engine/base.html" %} {% load tethys_gizmos static %} {% block app_content %}
`` elements: .. code-block:: html+django :emphasize-lines: 2-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet. Morbi tincidunt augue interdum velit euismod in pellentesque.
Ac felis donec et odio pellentesque. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sed euismod nisi porta lorem mollis. Nisi scelerisque eu ultrices vitae. Sit amet consectetur adipiscing elit duis. At in tellus integer feugiat scelerisque varius morbi enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet. Morbi tincidunt augue interdum velit euismod in pellentesque.
Ac felis donec et odio pellentesque. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sed euismod nisi porta lorem mollis. Nisi scelerisque eu ultrices vitae. Sit amet consectetur adipiscing elit duis. At in tellus integer feugiat scelerisque varius morbi enim.