I have been stack on weeks trying to resolve this issue, I don't know why the AMP Story wouldn't load images that I post through the Django database, but somehow i have observed a very strange behavior of it being able to load images and videos which are not been requested from the database and also if images are been loaded from the asset directory i have to add the image format like JPG, PNG etc.. in order for it to display in the AMP Player. My major concern now is : 1.How do I request images and videos from the Django database to be able to work in the amp story player? 2.Since the player needs me to specify the file format of the image eg, JPG,PNG,JPNG etc.. How do i go about it?
Here is a sample code of what i did, This is the player!
{% extends "base.html" %}
{% block content %}
{% for a in amp %}
<amp-story standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
poster-portrait-src="assets/cover.jpg">
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img srcset="{{ a.images.url }}"
width="720" height="1280"
layout="responsive" amp-story-player-poster-img>
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>{{ a.title }}</h1>
<p>{{ a.description }} </p>
</amp-story-grid-layer>
</amp-story-page>
<!-- Page 1 (Cat): 1 layer (vertical) -->
<amp-story-page id="page1">
<amp-story-grid-layer template="vertical">
<h1>{{a.title }}</h1>
<amp-img srcset="{{ a.images.url }}"
width="720" height="1280"
layout="responsive" amp-story-player-poster-img>
</amp-img>
<q>{{ a.description }}</q>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-grid-layer template="vertical" class="center-text">
<p class="banner-text" animate-in="whoosh-in-right">{{a.description}}}</p>
</amp-story-grid-layer>
</amp-story-page>
<!-- Bookend -->
<amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>
{% endfor %}
{% endblock %}
This my base HTML for AMP Player
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Joy of Pets</title>
<link rel="canonical" href="pets.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script async custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400" rel="stylesheet">
<style amp-custom>
amp-story {
font-family: 'Oswald',sans-serif;
color: #fff;
}
amp-story-page {
background-color: #000;
}
h1 {
font-weight: bold;
font-size: 2.875em;
font-weight: normal;
line-height: 1.174;
}
p {
font-weight: normal;
font-size: 1.3em;
line-height: 1.5em;
color: #fff;
}
q {
font-weight: 300;
font-size: 1.1em;
}
amp-story-grid-layer.bottom {
align-content:end;
}
amp-story-grid-layer.noedge {
padding: 0px;
}
amp-story-grid-layer.center-text {
align-content: center;
}
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.banner-text {
text-align: center;
background-color: #000;
line-height: 2em;
}
</style>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
My Model
class AMPStory(models.Model):
title = models.CharField(max_length=300)
publisher = models.CharField(max_length=300)
logo = models.ImageField(upload_to='ampstories/')
images = models.ImageField(upload_to='ampstories/')
video = models.FileField(upload_to="stories",blank=True,null=True)
description = models.CharField(max_length=500)
Views.py, The description, title and publisher attribute all shows up in the the AMP player but it doesn't display the images or videos posted from the database.
def ampplayer(request):
amp = AMPStory.objects.all()
context = {'amp':amp}
return render(request,'ampstories/amp_player.html',context)
CodePudding user response：
First make sure in your settings.py in the bottom of you settings.py
MEDIA_URL = '/media/'
the in your main projects urls.py
from django.conf.urls import url
from django.views.static import serve
from django.conf.urls.static import static
from django.conf import settings
url(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
url(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),
]
if settings.DEBUG:
urlpatterns = static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)
urlpatterns = static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
then make sure media root and serve added in your projects urls.py and in your html file
<amp-img src="{{ a.images.url }}"
width="720" height="1280"
layout="responsive" amp-story-player-poster-img>
</amp-img>
use src in stead of src set because some browser does not support that and in your models.py
logo = models.ImageField(upload_to='ampstories/')
images = models.ImageField(upload_to='ampstories/')
don't use / after the folder unless your folder name is ampstories/ other wise django will look for folder name ampstories/ this has to solve you problem i guess