如何在django表单中设置图像样式？(How to style the imagefied in django forms?)

我有一个用户模型，用户可以在另一个模型中上传多张照片。 因此，在更新/创建用户时，我还使用内联表单来添加/更新照片。 默认的django图像上传字段渲染效果不是很好。 它显示详细信息，如当前图像URL，删除复选框，文件上载字段和其他消息（当前，更改等）。 这根本不具吸引力。 我的意思是管理界面，没关系; 但是当谈到最终用户界面时，我不得不说它不够好。 我找到了从数据库中显示缩略图而不是image_url的方法。 但我仍然需要它变得更好。 无论如何，我可以将它呈现如下吗？

对于每个想要显示窗口小部件的图像以及图像本身作为具有更改选项的编辑表单中的窗口小部件的背景，不需要拖放功能。 有没有办法做到这一点？

I have a user model and user can upload multiple photos in another model. So, when updatging/creating the user, I have used inline forms to add/update photos also. The default django image upload field rendering is not very good. It displays details like the current image url, remove checkbox, file upload field and other messages(Currently,Change etc). This is not attractive at all. I mean for an admin interface, it is ok; but when it comes to end user interface, I have to say its not good enough. I have found ways to display thumbnail instead of image_url from database. But I still need it to be better. Is there anyway I can render it as below?

The drag drop function is not required as for each image i want to display the widget and the image itself as background of widget in edit forms with change option. Is there any way to do this?

最满意答案

使用该插件检查注释中的链接非常简单。 可选你可以使用Widget Tweaks并使用一个便宜的技巧，如：

    .dropzone{
     margin-top: 5px;
     width: 360px;
     background-color: rgba(225,225,225,0.5) !important;
     border-radius: 5px;
     height:140px;
     border: 3px dashed green;
     padding-top: 150px;
    }
    .textForDropzone{
      pointer-events:none;
      padding: 10px; 
      margin-left: 130px; 
 
      color:black;
      margin-top: -110px; 
      z-index:10000;
     } 
  
 <form method="POST"...>
  
     <form id="uploadFiles" class="dropzone" >
      <span class="mainop">2. Upload Image: </span>
      <input type="text" class="dropzone">
      <h3 class="textForDropzone"> Drop Image here or click to upload </h3>
     
  
 
 
 您展开输入字段，使其看起来像一个文本内部等的放置区.... 
 
 如果您使用小部件调整，代码将如下所示 
 
<form method="POST"...>
{% load widget_tweaks %}
{% csrf_token %}
<form id="uploadFiles" class="dropzone" >
  <span class="mainop">2. Upload a Image: </span>{{ formUP.image|add_class:"dropzone" }} 

  <h3 class="textForDropzone"> Drop Image here or click to upload </h3>
Check the link in the Comment with that Plugin its quite easy. Optional you could use Widget Tweaks and use a cheap trick like: 
 
 
 
  
  
    .dropzone{
     margin-top: 5px;
     width: 360px;
     background-color: rgba(225,225,225,0.5) !important;
     border-radius: 5px;
     height:140px;
     border: 3px dashed green;
     padding-top: 150px;
    }
    .textForDropzone{
      pointer-events:none;
      padding: 10px; 
      margin-left: 130px; 
 
      color:black;
      margin-top: -110px; 
      z-index:10000;
     } 
  
 <form method="POST"...>
  
     <form id="uploadFiles" class="dropzone" >
      <span class="mainop">2. Upload Image: </span>
      <input type="text" class="dropzone">
      <h3 class="textForDropzone"> Drop Image here or click to upload </h3>
     
  
 
 
You expand the input field and make it look like a drop zone with text inside etc....
 
code would look like this if you use widget tweaks
 
<form method="POST"...>
{% load widget_tweaks %}
{% csrf_token %}
<form id="uploadFiles" class="dropzone" >
  <span class="mainop">2. Upload a Image: </span>{{ formUP.image|add_class:"dropzone" }} 

  <h3 class="textForDropzone"> Drop Image here or click to upload </h3>