如何以 django 形式设置图像样式？

Question

我有一个用户模型，用户可以在另一个模型中上传多张照片。因此，当 updatging/creating 用户时，我也使用内嵌表单来 add/update 照片。默认的django图片上传字段渲染不是很好。它显示详细信息，如当前图像 url、删除复选框、文件上传字段和其他消息（当前、更改等）。这一点都不吸引人。我的意思是对于管理界面，没问题；但是当谈到最终用户界面时，我不得不说它还不够好。我找到了从数据库中显示缩略图而不是 image_url 的方法。但我仍然需要它变得更好。无论如何我可以渲染它如下？

对于我想在带有更改选项的编辑表单中显示小部件和图像本身作为小部件背景的每个图像，不需要拖放功能。有什么办法吗？

Answer 1

检查评论中的 link 使用该插件非常简单。您可以选择使用 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>

如何以 django 形式设置图像样式？

How to style the imagefied in django forms?

python

django

image

image-uploading