如何解决使用 django 和 bootstrap 为艺术指导问题裁剪图像
我有一个画库,里面有 400 幅画。我创建了一个轮播模型,用于显示我通过管理空间创建的特定主题的绘画组。
轮播通过“img-fluid”类显示响应式图像。
我想裁剪图像,以便它们能产生更大的影响。
我希望通过 HTML 而不是 jquery 来实现,因为这样可以更快地提供图像see Mozilla link:
<picture>
<source media="(max-width: 799px)" srcset="img_cropped.png">
<source media="(min-width: 800px)" srcset="img.png">
<img src="img.png" alt="man on a tree" />
</picture>
因此,我寻找并努力编写可以:
- 为任何以“...img.png”结尾的painting.image创建img_cropped.png文件。
和
- 在 carousel.html 中使用 for 循环提供图像
关于如何实现这一目标的任何意见和想法?
如果有帮助,下面是我的代码片段:
html
<div class="carousel slide" id="demo-carousel" data-ride="carousel">
<div class="carousel-inner" role="listBox">
{% for photo in photos %}
{% if forloop.first %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
{% if photo.image %}
<!-- <img class="img-responsive center-block" src='{{ photo.image.url }}' alt="Image">-->
<img src='{{ photo.image.url }}' class="img-fluid" alt="Responsive image">
>
{% endif %}
<div class="carousel-caption">
<h3>{{ photo.title }}</h3>
<p>{{ photo.description }}</p>
</div>
</div>
{%endfor%}
</div>
models.py:
class Photo(models.Model):
title = models.CharField(max_length=60,default='',blank=True)
description = models.TextField(max_length=200,blank=True)
width = models.IntegerField(default=0)
height = models.IntegerField(default=0)
image = models.ImageField(width_field="width",height_field="height")
timestamp = models.DateTimeField(auto_Now_add=True,auto_Now=False)
def __str__(self):
return self.title
class Meta:
ordering = ["timestamp"]
verbose_name = 'Photo'
views.py:
def photo_carousel(request):
queryset = Photo.objects.all()
context = {
"photos": queryset,}
return render(request,'bootstrap.html',context)admin.py@admin.register(Photo)
class PhotoCarouselAdmin(admin.ModelAdmin):
list_display = ('title','timestamp','width','height')
exclude = ('width','height')
list_display_links = ('title','timestamp')
class Meta:
model = Photo
admin.py:
@admin.register(Photo)
class PhotoCarouselAdmin(admin.ModelAdmin):
list_display = ('title','height')
exclude = ('width','height')
list_display_links = ('title','timestamp')
class Meta:
model = Photo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。