一、安装

pip install django-stdimage

安装django-stdimage库

https://github.com/codingjoe/django-stdimage

GitHub主页

二、配置demo/settings.py:

'stdimage',
# django-stdimage

其他的配置不用更改

也没有静态资源文件

三、模型product/models.py:

修改产品图片字段

from ckeditor_uploader.fields import RichTextUploadingField
from django.db import models # Create your models here.
from stdimage import StdImageField class ProductInfo(models.Model):
# 产品表 product_name = models.CharField(max_length=32, verbose_name="产品名称")
# 产品名称 product_picture = StdImageField(
upload_to='pictures/%Y%m%d',
blank=True,
null=True,
variations={
'large': (600, 400),
'thumbnail': (100, 100, True),
'medium': (300, 200),
},
delete_orphans=True,
verbose_name="产品图片"
)
# 产品图片 product_describe = models.CharField(max_length=255, verbose_name="产品描述")
# 产品描述
product_manager = models.CharField(max_length=11, verbose_name="产品经理")
# 产品经理
product_detail = RichTextUploadingField(verbose_name="产品详情", default="")
# 产品详情,带有上传图片功能的富文本编辑器
create_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
# 创建时间
update_time = models.DateTimeField(auto_now=True, blank=True, null=True, verbose_name="修改时间")
# 修改时间 class Meta:
db_table = 'product_info'
# 设置表名,默认表名是:应用名称_模型类名
# 带有应用名的表名太长了 verbose_name = '产品列表'
verbose_name_plural = "产品列表" def product_picture_preview(self):
return '<img src="%s" />' % self.product_picture.thumbnail.url product_picture_preview.short_description = "产品图片"
product_picture_preview.allow_tags = True def __str__(self):
return self.product_name

四、admin注册product/admin.py:

list_display = [
'id',
'product_name',
'product_picture_preview',
# 产品图片,不是product_picture
'product_describe',
'product_manager',
'product_detail',
'create_time',
'update_time',
]
# 要显示的字段列表

五、admin管理后台:

xadmin引入django-stdimage在列表页预览图片的更多相关文章

  1. BookBlock - 效果非常真实的书本翻页预览

    这个名为 BookBlock 的图片预览效果是一个书展示或网上书店的概念,已全屏打开3D页面导航网格的形式显示图书的详细信息.我们可以打开书预览的摘录,其中有一些细节的网格.对于图书预览,我们在使用 ...

  2. activiti自定义流程之自定义表单(三):表单列表及预览和删除

    注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...

  3. django 上传头像并预览 3选1

    注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. 【微信小程序】微信小程序wx.previewImage预览图片

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

  5. 微信小程序:点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  6. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

  7. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  8. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  9. [js/jquery]移动端手势拖动,放大,缩小预览图片

    摘要 有这样的需求需要在手机端预览图片的时候,实现图片的手势拖动,放大缩小功能.最终通过touch.js这个插件实现了效果. touch.js Touch.js是移动设备上的手势识别与事件库, 由百度 ...

随机推荐

  1. input type属性为number时,去掉右边的上下箭头

    加上样式: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; ...

  2. 关于对pei

    我现在才开始整理这个不算晚吧...... 望轻喷 学习博客 我们需要四个程序 1.暴力 2.“正解” 3.数据生成器 4.检查程序 暴力: 就是暴力 eg: #include <cstdio&g ...

  3. [LeetCode] 670. Maximum Swap 最大置换

    Given a non-negative integer, you could swap two digits at most once to get the maximum valued numbe ...

  4. oracle--介质恢复和实例恢复的基本概念

    1.概念 REDO LOG是Oracle为确保已经提交的事务不会丢失而建立的一个机制.实际上REDO LOG的存在是为两种场景准备的,一种我们称之为实例恢复(INSTANCE RECOVERY),一种 ...

  5. 安装Oracle 11g时遇到“【INS-13001】此环境不满足最低配置”的问题解决

    一.问题如下: win10一般容易出现这个问题,可能是版本兼容的关系.  二.解决方法: 在Oracle 11g解压出的文件夹下寻找cvu_prereq.xml文件: 路径:database\stag ...

  6. 大话设计模式Python实现-简单工厂模式

    简单工厂模式(Simple Factory Pattern):是通过专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类. 下面使用简单工厂模式实现一个简单的四则运算 #!/usr/ ...

  7. [完整版]Postgresql 数据库 备份以及恢复的过程

    0. 准备工作 linux机器上面 必须安装上pg数据库 然后 需要将 pg的主程序目录 放到环境变量里面去 便于执行命令. 1. 先备份 . 备份目标数据库: pg_dump -h -F c -f ...

  8. ImageView的adjustViewBounds属性

    adjustViewBounds属性的定义如下: 调整ImageView的边界,使得ImageView和图片有一样的宽高比 这个属性只有在ImageView一边如宽度或高度固定,一边为wrap_con ...

  9. 基于 HTML5 换热站可视化应用

    换热站是整个热网系统中最核心的环节,它将一侧蒸汽或高温水通过热交换器换成可以直接进入用户末端的采暖热水.换热站控制系统是集中供热监控系统的核心部分,换热站控制系统既可独立工作,也可以接受调度中心的监督 ...

  10. 在eclipse中,用maven创建一个web项目工程

    1.在eclipse中用maven创建项目,右键new>>Maven Project 2.点击next继续 3.点击next继续,选择maven-archetype-webapp, 4.点 ...