I have a HTML file that store in different folder with django.
Below is my HTML code that I run under Python Django:
<body>
{% load staticfiles %}
{{graph|safe}}
{% for i in graph %}
<div class="box">
<iframe width="47%" height="700" src="{{i|safe}}" frameborder="1" allow="autoplay; encrypted-media" allowfullscreen align="left" ></iframe>
</div>
{% endfor %}
</body>
The output for graph is
["a.html","e.html","I.html"]
So the iframe create is 3 for this case, I able saw there is 3 box of the iframe generated but fail to see the content. Anyone can share ideas?
The problem may be that the html files you're trying to serve do not have a url. You could do either of these two options:
Option 1: Add a url for each html file in your urls.py. Something like:
urlpatterns = [
path('a.html', TemplateView.as_view(template_name="a.html")),
]
Option 2: You could serve them as static files. There is some discussion about that in this thread. This would be better suited if you don't know the names of your html files beforehand.
iframe is not supported in HTML5. U should use embed instead of iframe, but if u want to use iframe then maybe u should use a lower version of html. check this: https://www.w3schools.com/tags/tag_iframe.asp
Related
I have never asked a question here before, please bear with me. I am working on a wiki project that has a requirement to convert markdown files using markdown2.
return render(request, "encyclopedia/entry.html", {
"content": markdown2.markdown(util.get_entry(title)), "title": title
})
Above is how I pass it to the HTML page and it renders on the page with the proper HTML tags, but it doesn't seem to use them. Below is how it appears on the browser.
<pre><code> # HTML
</code></pre>
<p>HTML is a markup language that can be used to define the structure of a web page. HTML elements include</p>
<ul>
<li>headings</li>
<li>paragraphs</li>
<li>lists</li>
<li>links</li>
<li>and more!
most recent major version of HTML is HTML5.</li>
</ul>
I am passing it directly to a Django template with the safe filter included as shown below.
<textarea name="content" rows="5" cols="50" readonly>
{{ content|safe }}
</textarea><br>
Thank you ahead of time, I hope I provided enough information to make my problem clear.
it looks like your content is going inside a <textarea> form field...that's going to prevent the browser from interpreting the HTML and just show exactly what is passed over.
Change to a <div> or something and it should work.
Hi I'm new to using Wagtail and I'm working on a client website. What I aim to do is to dynamically link my wagtail pages to our sidebar, which is currently in our base.html in the main app folder's templates directory, the one with settings.py.
I was wondering if there's a way to render a call to action for the base.html here. Or if I should make a separate app instead and create a base.html there, which extends to all the other templates I'll use for the rest of the website.
Thank you!
edit:
Above is the current home page I'm working with. The sidebar right now is just hard-coded since I haven't worked on that, and I want to know what the rest of the page looks like while I work on the main content.
the sidebar above is coded as so:
<!-- in biodept/templates/base.html -->
{% wagtailuserbar %}
<div class="container main-container">
<div class="row">
<!-- Nav bar not mobile -->
<nav class="nav" id="nav-1">
<a class="nav-link nav-desktop-link nav-desktop-link-active" href="#">HOME</a>
<a class="nav-link nav-desktop-link" href="#">BIOMEDICINE</a>
<a class="nav-link nav-desktop-link" href="#">ECOLOGY & SYSTEMATICS</a>
<a class="nav-link nav-desktop-link" href="#">MOLECULAR BIO & BIOTECH</a>
<a class="nav-link nav-desktop-link" href="#">PROJECTS</a>
<button class="dropdown-btn nav-link nav-desktop-link">PROGRAMS<ion-icon style="float: right; padding-top: 0.25vw;" name="caret-down-outline"></ion-icon></button>
<div id="btn-t" class="dropdown-container">
<a class="nav-link dropdown-nav-desktop-link" href="#">UNDERGRADUATE</a>
<a class="nav-link dropdown-nav-desktop-link" href="#">GRADUATE</a>
</div>
<a class="nav-link nav-desktop-link" href="faculty.html">FACULTY PAGES</a>
<a class="nav-link nav-desktop-link" href="#">BIODIVERSITY LABORATORY</a>
</nav>
{% block content %}{% endblock %}
</div>
</div>
Again the base.html is in the same directory as where the settings.py is. BioDept is the project's name.
Note: Based on the updated question, it looks like this is unrelated to StreamField but it is a question about how to implement a menu based on the Wagtail page structure.
Wagtail does not come with a built in way to render menus, this is because it is going to be something specific to every Wagtail site and any generic solution will likely only cover a small set of cases. However, when getting started this can be a bit confusing.
Wagtail, does come with a way to indicate that a page should be shown in menus though, this is part of every Page model.
You can see this in the model's reference here
https://docs.wagtail.io/en/latest/reference/pages/model_reference.html#wagtail.core.models.Page.show_in_menus
User's can edit this value on the 'promote' tab, plus the docs above let you define what the default value should be (however, existing pages will need to be updated another way).
Implementing a Menu
Here are three ways to implement a menu and use this as a template tag or template include in your project.
View the Bakerydemo code
The bakerydemo is a nice basic reference for a Wagtail implementation, this may not explain why but might be enough for you to get started.
template tag definition - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/base/templatetags/navigation_tags.py
header include template - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/templates/includes/header.html
base.html (layout) template - https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/templates/base.html
Follow a tutorial
Googling 'Wagtail navigation' or 'Wagtail menus' can help, but this link below appears to be up to date and walks you through really nicely on how to build a basic Wagtail menu and then enhance it to using an extension (added below)
https://www.accordbox.com/blog/wagtail-tutorial-12-how-create-and-manage-menus-wagtail-application/
Install an extension package
This package appears to give a robust solution, but avoid using it if you can get what you need without adding another dependency (my opinion)
https://wagtailmenus.readthedocs.io/en/stable/overview.html
I've been stuck with the following problem for a while, and i can't seem to get it to work on this Python flask web application i've been developing:
1) my flask view -> obtains image data from a local database and passes the data via a generator to a template
My flask route/view code:
#app.route(#app.route('/viewer',methods=['GET'])
def viewer():
archive = request.args.get('filepath')
arc = rarTools()
pagetotal = arc.pageTotal(archive)
def g():
for n in range(pagetotal):
data = arc.getPageb64(archive,n+1)
print(n+1)
yield data
return Response(stream_template('viewer.html',data=g()))
2) My HTML template with JQuery Mobile UI obtains this data and simply displays all the image data on 1 page
My HTML viewer.html with JQuery mobile UI:
<body style="background-color: black">
<div data-role="page" class="page" id="mainpage" data-theme="b">
<div data-role="main" class="ui-content">
<div id="frame" align="middle" style="width: 100%">
{% for page in data %}
<img id="page_img" src="data:image/png;base64,{{ page }}" width="80px" height="auto"/>
{% endfor %}
</div>
</div>
</div>
</body>
My HTML viewer.html WITHOUT JQuery mobile UI:
<body style="background-color: black">
<div id="frame" align="middle" style="width: 100%">
{% for page in data %}
<img id="page_img" src="data:image/png;base64,{{ page }}" width="80px" height="auto"/>
{% endfor %}
</div>
</body>
My problem is how long it takes to load pages when there are many images in my database. The load time is vastly different when I use JQuery Mobile and when I don't:
Because i'm using a generator to pass the data to the template, the images are loaded dynamically with the page loading immediately and each page appearing as the image data is generated on the flask back-end when I don't use JQuery Mobile to style the page.
When I use JQuery Mobile on the other hand, the page only loads once all the image data is passed even though i'm using a generator.
How can I get my JQuery Mobile template page to refresh after every yield, so that
The page loads immediately irrespective of image count?
The pages refreshes after each new image data "yield" so the the images are loaded dynamically? - like it works when I don't use JQuery Mobile?
I am aware that it has something to do with the - either: 'pageinit' or 'pageload' events with Jquery Mobile, but for the life of me, i can't seem to get the above code to work!!
Any assistance would be much appreciated, thanks in advance!
I am using AngularJS + Flask in my application, and I want to know the best way to "produce" an url, and don't write any hard code url for this. I have this situation:
*considering that I'm using [[ ]] instead of {{ }} for AngularJS.
<dd ng-repeat="item in myList">
<span ng-click="doAction('{{ url_for('my_url', id="[[item.id]]") }}')">
[[item.name]]
</span>
</dd>
This is not going to work, because Jinja2 do the process url_for() before AngularJS, so "[[item.id]]" will not be substituted by AngularJS in time.
The problem is, I don't want to write in hard code like this:
<span ng-click="doAction('/my_url/[[item.id]]')">
[[item.name]]
</span>
I am pretty new in AngularJS, maybe all my approach is wrong, so, does anyone have any idea what is the best way to make an element be clicked, make a request with an URL based on the context of the clicked element?
I just ran across this problem. I ended up using Jinja2's {% set ... %}.
This is how I solved it, adapted for your example.
<dd ng-repeat="item in myList">
{% set url = url_for('my_url', id="[[item.id]]") %}
<span ng-click="doAction('{{ url }}')">
[[item.name]]
</span>
</dd>
In my case,
I was trying to dynamically create urls
I solved my issue as follows (Note: I've swapped out Angular's syntax to {[x]}:
<ul>
<li ng-repeat="x in projects">
{[x.title]}
{% set url = url_for('static',filename="img/") %}
<img src="{{url}}{[x.img]}">
</li>
</ul>
Does anyone have any idea how to use the tag so the table of content comes onto the 1st page and all text is coming behind. This is what i've got so far, it generates the table of content behind my text...
pdf.html
<htmL>
<body>
<div>
<pdf:toc />
</div>
<pdf:nextpage>
<br/>
<h1> test </h1>
<h2> second </h2>
some text
<h1> test_two </h1>
<h2> second </h2>
some text
</body>
</html>
I can't seem to get everything in the right position, even with the it doesn't seem to work... any help or documentation somewhere? The PISA docs are rly crappy with details actually...
Btw 1 more extra thing, is it possible to make this table of content jump to the right page? If yes how does this works?
Regards,
I found I couldn't get that pagebreak to work for me, so I used inline CSS and, specifically, the page-break property to fix it.
In your case, this should do the trick:
<div style="page-break-after:always;>
<pdf:toc />
</div>
<h1> test </h1> ...etc...
As far as the links are concerned, there may be a way to automatically generate them, but I found it easier to manually create a table of contents using links and anchors:
<h1>Table of Contents</h1>
<ul>
<li><a href="section1">The name of section 1</li>
<li><a href="section2">The name of section 2</li>
</ul>
<h2>The name of section 1</h2>
<a name="section1"></a>
<h2>The name of section 2</h2>
<a name="section2"></a>
There's obviously some duplication, but I haven't found it difficult to maintain for my documents. It depends how long or complicated you expect yours to became.
The bigger downside is that this option won't include page numbers.
Steve's comment about the page-break property is correct. I personally used a separate CSS file with
h2 {
page-break-before:always;
}
so that all of my sections would start on a new page.