Hello im new to wagtail . Originally , i saw that we were able to conveniently embed videos via draftail , however i was unable to give it any styling. Therefore i swapped methods and so far i have been using the following implementation to embed videos into my project.
blocks.py
class VideoBlock(blocks.StreamBlock):
'''rich text'''
title = blocks.CharBlock(required=True, help_text="Add your Title")
texts = blocks.TextBlock(required=True, help_text="Add your additional text")
embed = EmbedBlock()
class Meta:
template = "streams/video_block.html"
icon = "edit"
label = "Full Rich Text
video_block.html
{% load wagtailembeds_tags %}
{%for content in self %}
<div class="container" style="text-align: center;">
{{content}}
{% embed page.video_url %}
</div>
{%endfor%}
That being said , I still do not know how to properly resize it. I would preferably want my website to look like this : here
i found a really good link over her : here
Heres my code if anybody is interested:
video_block.html
{% load wagtailembeds_tags %}
{% load video_tag%}
<br>
{%for content in self %}
<div class="container">
{%for con in content.value%}
<h1>{{con.title}}</h1>
<p>{{con.text}}</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{{ con.video.url |embedurl}}?rel=0" allowfullscreen></iframe>
</div>
{%endfor%}
</div>
{%endfor%}
templatetags/video_tag.py
import re
from django import template
register = template.Library()
#register.filter(name="embedurl")
def get_embed_url_with_parameters(url):
print('we inside this emb')
if "youtube.com" in url or "youtu.be" in url:
regex = r"(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)" # Get video id from URL
embed_url = re.sub(
regex, r"https://www.youtube.com/embed/\1", url
) # Append video id to desired URL
print(embed_url)
embed_url_with_parameters = embed_url + "?rel=0" # Add additional parameters
return embed_url_with_parameters
else:
return None
I was looking for answer for days but I found it here:
https://docs.wagtail.org/en/stable/topics/writing_templates.html#responsive-embeds
for some reason it did not show up on google 🤔
Short of it is:
in your base settings file add this WAGTAILEMBEDS_RESPONSIVE_HTML = True
In the template file you are using the embed with add these styles:
.responsive-object {
position: relative;
}
.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and BOOM responsive embeddeds
Related
I am not able to get photologue to show the images. What am I doing wrong?
development environment
django 2.1
python 3.5
osx, virtual_env, recent pip
settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'mst/media/')
MEDIA_URL = "/media/"
urls
urlpatterns += [
...
url(r'^photologue/', include('photologue.urls', namespace='photologue')),
]
model
from photologue.models import Photo, Gallery
class PhotoExtended(models.Model):
photo = models.OneToOneField(Photo, on_delete=models.CASCADE, related_name='photo')
related_model = models.ForeignKey(MyModel, on_delete=models.CASCADE)
def __str__(self):
return self.photo.title
class GalleryExtended(models.Model):
gallery = models.OneToOneField(Gallery, on_delete=models.CASCADE, related_name='gallery')
related_model = models.ForeignKey(MyModel, on_delete=models.CASCADE)
def __str__(self):
return self.gallery.title
class based view
class MyModelList(ListView):
model = MyModel
template_name = "pictures.html"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['photos'] = PhotoExtended.objects.all()
context['galleries'] = GalleryExtended.objects.all()
return context
template (pictures.html):
{% block content %}
<ul>
{% for photoExtended in photos %}
<li>{{ photoExtended.photo.get_absolute_url }}</li>
<li>{{ photoExtended.photo.image }}</li>
<img src="/{{ photoExtended.photo.image }}" alt="{{ p.photo.title }}">
{% endfor %}
{% for gallery in galleries %}
<li></li>
{% endfor %}
shell response (per docs)
>>> from PIL import Image
>>>
notes
I migrated the database, and see the data in the database, and everything looks correct.
page renderings
photologue urls:
A single photo
the list of the photos
and the direct accessing of the image: (ra is the name in photologue, but em.jpeg is the file name)
and my view directly:
The template was wrong/outdated from an older version. Here is the correct usage in the template for an image within a list of images of type photologueExtended:
{% for photoExtended in photos %}
<!-- The link to the photologue template page with the photo and its gallery(s)-->
Link to page
<!-- The src link to the image thumbnail itself in the media url-->
<img src="{{ photoExtended.photo.get_thumbnail_url }}" />
<!-- The src link to the image itself in the media url-->
<img src="{{ photoExtended.photo.get_display_url }}" />
<!-- The photologue image's title/description/etc… -->
{{ photoExtended.photo.title }} <br>
{{ photoExtended.photo.description }} <br>
{% endfor %}
Also:
the url catchall in the main project urls.py was incorrect, and should be:
url(r'^$', indexView, name='indexView'),
So this awesome Wagtail/Django framework is nice!
I like it allot.
Still getting used to but seems straight forward,
What I do not understand tho is how can I access default page models and render them in the templates?
So Wagtail has this models that you make based on their Page class.
class SomeClass(Page):
"""
Some text
"""
intro = models.CharField(max_length=255, blank=True)
body_small = models.CharField(max_length=255, blank=True)
All good and well.
Now my page template looks like this
{% extends "base.html" %}
{% load wagtailcore_tags %}
{% block base_content %}
{{ page.intro }}
{{ page.body_small }}
{% endblock %}
Now I want to add the settings model items like Published Date.
Those are default from Wagtail, see:
What page model do I need to use?
{{ page.published_date }} //Does not work
Any suggestions?
The fields in the Settings tab are available as {{ page.go_live_at }} and {{ page.expire_at }}. However, these are only used for scheduled publishing so may not be a particularly relevant thing to output on the page - {{ page.first_published_at }} and {{ page.last_published_at }} are probably more useful. See http://docs.wagtail.io/en/stable/reference/pages/model_reference.html for more.
I am trying to loop over a nested list in my posts font matter and display an associated image (using svg) for each nested item
post front matter:
---
layout: post
title: title of this post
spec:
- name: tee
- name: mobile
---
using a for loop in my post.html file
<div>
<h4>specs</h4>
{% for item in page.spec %}
<svg class='spec-icon'><use xlink:href="#icons_{{item.name}}"/</svg>
{% endfor %}
</div>
I would like this to render like below
<div>
<h4>specs</h4>
<svg class='spec-icon'><use xlink:href="#icons_tee"/></svg>
<svg class='spec-icon'><use xlink:href="#icons_mobile"/></svg>
</div>
for every neseted name:vale pair under spec:, I would like there to be a unique svg element created with that nested value included in the #id
???
Try this:
---
layout: post
title: title of this post
spec: [tee, mobile]
---
Then:
<div>
<h4>specs</h4>
{% for item in page.spec %}
<svg class='spec-icon'><use xlink:href="#icons_{{ item }}"/</svg>
{% endfor %}
</div>
Hope to have helped! Let me know if this works, yeah?
I have an api end point which return an image in response. So, I directly bind the ng-src for an image tag with my end point that looks like this
<img data-ng-src="https://loventedtest.appspot.com/image/255fe126-bfa8-4b7b-ac14-b53751b88470" />
What I am wondering is to show upfront image until the image get load from the server or keep the upfront image if the image not found on the server. I am not sure, how can I make it possible, any suggestion please?
See this Plunkr for more details.
Maybe you can resolve your problem with css. In you html :
<img class="img-wrapped" ng-src="{{ imgSrc }}">
in your css :
.img-wrapped {
width: 200px;
height: 200px;
background-image: url(http://www.placehold.it/200x200);
}
For compatibility purposes (tested on Firefox too), you may wrap your img.
Markup :
<div class="img-wrapper">
<img ng-src="{{ imgSrc }}">
</div>
css :
.img-wrapper {
width: 200px;
height: 200px;
background-image: url(http://www.placehold.it/200x200);
}
See the updated Plunkr
ng-src allows you to use data binding. You can have a string called $scope.imageUrl in your controller, and use
img data-ng-src="{{imageUrl}}"
in your html file. You can then change that variable's value in your controller and it will change that image automatically.
I am trying to add uploading images feature.
This class saves new entity:
class NewPost(Handler):
def render_newpost(self, title='' , content='', error = ''):
self.render("newpost.html", title = title, content = content, error = error)
def get(self):
user_cookie = self.request.cookies.get('user')
if user_cookie:
user_id = user_cookie.split('|')[0]
if hash_str(user_id) == user_cookie.split('|')[1]:
user = Users.get_by_id(int(user_id))
self.render_newpost()
else:
self.redirect('/')
def post(self):
title = self.request.get("title")
content = self.request.get("content")
image = self.request.get("file")
if title and content:
p = Posts(title = title, content = content)
p.image=db.Blob(image)
p.put()
self.redirect("/")
else:
error = "Enter both title and text"
self.render_newpost(title, content, error)
Here is my front page render class:
class Main(Handler):
def get(self):
posts = db.GqlQuery("SELECT * FROM Posts Order by created DESC LIMIT 10")
user_cookie = self.request.cookies.get('user')
if user_cookie:
user_id = user_cookie.split('|')[0]
if hash_str(user_id) == user_cookie.split('|')[1]:
user = Users.get_by_id(int(user_id))
self.render("front.html", posts = posts, user=user)
else:
self.response.headers['Content-Type'] = "image/jpeg"
self.render("front.html", posts = posts)
form to enter data:
<form method="post" enctype="multipart/form-data">
<div class="newpost">
<label>Image:</label>
<input type="file" name="file"/>
<div class="label">Title:
<input type="text" name="title" value="{{title}}"/>
</div>
<hr>
<div class="label">Content:
<textarea name="content">{{content}}</textarea>
</div>
</div>
<input type="submit"/>
<div class="error">{{error}}</div>
</form>
and here is my home page template: (The problem appears here!)
{% for post in posts %}
{% if post.image %}
<li><img src="/static/images/{{post.image}}"/>
{% endif %}
<h4>{{post.title}}</h4>
<p class="zoom">{{post.content}}</p>
{% endfor %}
App successfully stores image, but when it returns to the front page trying to render image it gives this error:
File "/home/wanhrust/google_appengine/newsite/templates/front.html", line 54, in top-level template code
{{post.image}}
UnicodeDecodeError: 'ascii' codec can't decode byte 0xff in position 0: ordinal not in range(128)
I've been googling for several hours but without results. Any help?
The problem is that you are trying to embed an image in an html document which is not possible. Post.image is storing the bytes representing the image.
If you want to include the image in your html, you need to add something like this
{% if post.image_id %}
<li><img src="/image/{{post.image_id}}" />
{% endif %}
Where /image/ is a handler that returns the content of the image (setting the apprpriate content-type).
I also would recommend you to use the Blobstore API.