.. _custom_images:

Add custom images
#################

Follow these instructions to add custom images to your solution.


.. _custom_images_no_code:

No-code customization
======================

Add a custom image to the project title
----------------------------------------

This is how the project title view looks by default:

.. image:: ../img/title-without-image.png
   :align: center
   :alt: Project title without custom image

To add an image next to the title, place an image file named ``about.png`` in the following location:

.. code-block:: xml

   src\ansys\solutions\<solution-name>\ui\assets\images\about.png

The image is scaled to fit the project title. For example, if you use the following image:

.. image:: ../img/about_example2.png
   :height: 300
   :alt: About image
   :align: center

This is how it looks:

.. image:: ../img/title-with-image.png
   :align: center
   :alt: Custom image in the project title

Add images to the placeholder view
-----------------------------------

To add an image to the placeholder view, add a file named ``about-placeholders.png`` in the following location:

.. code-block:: xml

   src\ansys\solutions\<solution-name>\ui\assets\images\about-placeholders.png

For example, if you use the following image:

.. image:: ../img/about-placeholders-example2.png
   :height: 300
   :alt: About image
   :align: center

This is how it looks:

.. image:: ../img/placeholder-view-with-image.png
   :align: center
   :alt: Custom image in the placeholder view


.. _custom_images_low_code:

Low-code customization
======================

Add custom images in other locations
------------------------------------

To add custom images to other locations in the solution, you can use approach similar to the one used the preceding section, with some additional code modifications. For example, to add a custom image to the results view:

#. Open the ``images.py`` file.

   .. code-block:: xml

      src\ansys\solutions\<solution-name>\ui\utils\images.py

#. Update the ``Images`` class as follows:

   .. code-block:: python3
      :caption: images.py
      :emphasize-lines: 8

       class Image(Enum):
           """Enumeration of logos used in the solution.
           If you for example need to change the name of the project title logo, you can change it here.
           """

           ABOUT = "about.png"
           ABOUT_PLACEHOLDERS = "about-placeholders.png"
           ABOUT_RESULTS_VIEW = "about-results-view.png"

#. Add the image to the following location:

   .. code-block:: xml

      src\ansys\solutions\<solution-name>\ui\assets\images\about-results-view.png

#. Open the ``result_files_view.py`` file.

   .. code-block:: xml

      src\ansys\solutions\<solution-name>\ui\views\result_files_view.py

#. Update the result view as follows:

   * Edit the ``import`` statement to reflect the actual solution name.
   * Provide a style dictionary as an argument to the ``get_div`` method to ensure the image is displayed correctly.

   .. vale off

   .. code-block:: python3
      :caption: result_files_view.py
      :emphasize-lines: 1, 3, 7

       from ansys.solutions.<solution-name>.ui.utils.images import Image

       about_results_image = Image.ABOUT_RESULTS_VIEW.get_div({"max-width": "100%", "height": "auto"})

       layout = html.Div(
           [
               about_results_image,
               extra_message_selected_file,
               buttons,
               result_files_table,
               table_loading_message,
               spinner,
               hidden_divs,
               checkbox_states,
           ]
       )
   .. vale on


Full-code customization
========================

If you are familiar with Dash, HTML, and CSS, you can also add custom images directly to the source code. For example, you can add an image to the result view by editing the file ``result_files_view.py`` as follows:

.. vale off
.. code-block:: python3
   :caption: result_files_view.py
   :emphasize-lines: 1, 4

      about_results_image = html.Img(src = "/assets/images/about-results-view.png", style = {"max-width": "100%", "height": "auto"})
      layout = html.Div(
          [
              about_results_image,
              extra_message_selected_file,
              buttons,
              result_files_table,
              table_loading_message,
              spinner,
              hidden_divs,
              checkbox_states,
          ]
      )
.. vale on