Add custom images#

Follow these instructions to add custom images to your solution.

No-code customization#

Add a custom image to the project title#

This is how the project title view looks by default:

Project title without custom image

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

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:

About image

This is how it looks:

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:

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

For example, if you use the following image:

About image

This is how it looks:

Custom image in the placeholder view

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:

  1. Open the images.py file.

    src\ansys\solutions\<solution-name>\ui\utils\images.py
    
  2. Update the Images class as follows:

    images.py#
     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"
    
  3. Add the image to the following location:

    src\ansys\solutions\<solution-name>\ui\assets\images\about-results-view.png
    
  4. Open the result_files_view.py file.

    src\ansys\solutions\<solution-name>\ui\views\result_files_view.py
    
  5. 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.

    result_files_view.py#
     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,
         ]
     )
    

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:

result_files_view.py#
   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,
       ]
   )