About image avatars

[ps96068]

I'm trying to use starlette-admin in my FastAPI project.
I have a model and this model has the "image_path" field of String type and in which I keep the path to the images saved in the static map of the project.
For this model, I created a ModelView in which I added the "image_path" field.
When I display the data of this model in starlette-admin, the "image_path" value appears, I would like to change it so that the avatar of the image appears.

Can someone guide me with tips on how to do it?

[jowilf]

You can create your custom ImageField and override the serialize_value method. You only need to return a dictionary with filename, content-type, and url.

@dataclass
class MyImageField(BaseImageField):
     async def serialize_value(
        self, request: Request, value: Any, action: RequestAction
    ) -> dict:
              return {"url": request.url_for...}

then using it your view

class MyModelView(ModelView):
       fields = [... , MyImageField("avatar"), ... ]
       

Example: https://github.com/jowilf/starlette-admin/blob/main/starlette_admin/contrib/sqla/fields.py#L57

[ps96068]

Thank you very much for the answer.
With the help of your reply I achieved what I wanted.
With much respect, another question appeared on the same topic:

the HTML code generated for the image avatar is as follows:

<td>
  <div class="d-flex">
     <div class="p-1">
     
       <span class="avatar avatar-sm" style="background-image: url(http://127.0.0.1:8000/static/shop/blog1/depositphotos_126693854-stock-photo-set-of-body-care-products .jpg)"></span>
     
     </div>
  </div>
</td>

where is this code generated and how can I adapt it to my requirements?

for example, I want to make the following adaptations:

1. to increase the dimensions of the avatar, now it is 2rem
2. add the possibility to open the image in modal when you click on it

[jowilf]

you're welcome.

For the listing page follow this guide to provide your custom function. The default one for images can be found here.

For the detail page follow this guide to provide your own template or override the default template for images in your template directory

[ps96068]

Thank you very much for the answer.