I'm very new to HTML and web development so forgive me is this is an easy fix. QuickChart.io provides an image after calling the API. I've created a Django application that creates a custom URL to call QuickChart in my view file but struggling to have it appear when loading the page.
My HTML is the following:
{% block content %}
<img src=quickchart_url>
<p>{{ quickchart_url }}</p>
{% endblock %}
My view is the following:
from django.shortcuts import render
from quickchart import QuickChart
def about(request):
return render(request, 'stormglass_web_client/about.html', {'quickchart_url': qc_url})
qc = QuickChart()
qc.width = 500
qc.height = 300
qc.device_pixel_ratio = 2.0
qc.config = {
"type": "bar",
"data": {
"labels": ["Yes", "No"],
"datasets": [{
"label": "Yes or No",
"data": [1, 2]
}]
}
}
qc_url = (qc.get_url)
The site loads as follows:
I can copy and paste the URL in a browser and it displays as intended. Just trying to figure out how I can have this appear from HTML as an embedded image.
Silly mistake on my part. HTML should be:
{% block content %}
<img src= {{ quickchart_url }}>
<p>{{ quickchart_url }}</p>
{% endblock %}
Related
I am trying to get data from a JSON, which was fetched from an API I created to display on my Django Template.
The API is just a simple API which store a post hit counts and its id, the json is formatted as below:
[
{
"object_pk": 3,
"hits": 15
},
{
"object_pk": 1,
"hits": 21
}
]
Here is my views.py file:
class BlogListView(ListView):
model = Post
template_name = "home.html"
class BlogDetailView(HitCountDetailView, DetailView):
model = Post
template_name = "post_detail.html"
count_hit = True
data = {
"hits": get_cloudapi_data(),
}
class ResumePageView(TemplateView):
template_name = "resume.html"
And my service.py file, which have the get_cloudapi_data() function:
def get_cloudapi_data():
url = "my-api-address"
r = requests.get(url)
hitcount = r.json()
return hitcount
Below is my HTML template, post_detail.html used for displaying this data:
{% extends "base.html" %}
{% load hitcount_tags %}
{% block content %}
<div class="post-entry">
<h2>{{ post.title }}</h2>
<p> {% get_hit_count for post %} views</p>
<p> {{ post.body }}</p>
{% for hit in hits %}
<p>{{ hit.object_pk }}</p>
<p>{{ hit.hits }}</p>
{% endfor %}
</div>
{% endblock content %}
It only shows the title, body and the hit count retrieve with the hitcount app not my API data
I have printed out the hitcount and the data if it would help
hitcount
[{'object_pk': 3, 'hits': 15}, {'object_pk': 1, 'hits': 21}]
data
{'hits': [{'object_pk': 3, 'hits': 15}, {'object_pk': 1, 'hits': 21}]}
I am new to working with an API with Django, so I am unsure where I went wrong.
I'm struggling with json in twig. I want to include a static json file to my twig file and pass it to a twig include inside that.
I have my index twig file where I have my STATIC json file include and twig include:
{% set json %}
{% include "content.json" %}
{% endset %}
{% include '#partials/blocks/site-header.twig' with {json:json} %}
In My siteheader.twig I would like to render my navigation something like:
{% for headerNav in json %}
<a class="button button--nav" href="#">
{{headerNav.text}}
</a>
{% endfor %}
My content.json looks like this:
{
"headerNav":[
{
"text": "Link 1"
},
{
"text": "Link 2"
}
]
}
The whole point is that the siteheader should be able to render different links dependant on which json file i pass into it.
I'm new with django and i'm trying to update fields in my view without redirecting, i'm trying to return a JSON file when a view function is called, but i can't seem to find how to do so withouth redirecting to some url.
I think it may have something to do with my urls.py: ... path('#', views.myFunction, name='myFunctionName').
I'm messing arround with the django tutorial that appears in djangoproject.com
<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li
{% endfor %}
</ul>
Vote again?
doFunction
my view function goes like this:
def myfunction(request):
return JsonResponse({'ayy':'lmao'})
and the urls.py:
from django.urls import path
from . import views
app_name = 'polls'
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
path('<int:pk>/', views.DetailView.as_view(), name='detail'),
path('<int:pk>/results/', views.ResultsView.as_view(), name='results'),
path('<int:question_id>/vote/', views.vote, name='vote'),
path(r'#', views.myfunction, name='myfunction'),
path('form', views.FormView.as_view(), name='form'),
So what is most likely happening here is the Django URLS is finding the index page and redirecting to that view. The # pound or number symbol usually indicates a redirect in page.
First, there's no AJAX in your code. doFunction will redirect to an entire new page.
Second, your path to myfunction in urls.py is not correct.
Here's an example of what you can do. I also suggest you to read this. I use JQuery but feel free to adapt with what you prefer.
urls.py:
#...
path('ajax/domyfunction/', views.myfunction, name='myfunction')
]
html template:
<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
<li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize}}</li
{% endfor %}
</ul>
Vote again?
<button id="b_function">doFunction</button>
<script>
$("#b_function").click(function () {
$.ajax({
url: '{% url "polls:myfunction" %}',
dataType: 'json',
success: function (data) {
alert(data.ayy);
}
});
});
</script>
I would like to use gulp and Nunjucks to generate multiple template files at once with varying content. These templates will all have the exact same layout, but pass in different variables for text/images.
I am able to successfully generate a single index.html file, but am unsure how to set this up for multiple files to be created at once. Here is a simplified version of what I have:
gulpfile.js
var nunjucks = require('gulp-nunjucks-render');
var data = require('gulp-data');
gulp.task('nunjucks', function () {
return gulp
.src('./src/layouts/**/*.+(html|nunjucks)')
.pipe(data(function () { return require('./src/data.json'); }))
.pipe(nunjucks({ path: ['./src/templates'] }))
.pipe(gulp.dest('./dist'));
});
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ title }}</title>
{% endblock %}
data.json
{
"title": "DEFAULT"
}
What is the best way to alter this workflow to generate multiple files where each has a different title?
I've found that I can create multiple index.nunjucks files, but it looks like they all use the same data.json file. I also wouldn't want to make a separate JSON file for each.
Could I add an array to my data.json file to have Nunjucks loop through and create a separate file for each object found? Such as the following:
data.json
{
"files": [{
"title": "DEFAULT",
}, {
"title": "DEFAULT #2"
}]
}
Or is there a way to set variables within the index.nunjucks file without relying on storing them in JSON?
Found the way to do this: in each Nunjucks index file, I set a variable named email to the filename and updated my data.json file with a new object matching the filename with its own content.
default.nunjucks
{% set email = default %}
{% include "index.nunjucks" %}
test.nunjucks
{% set email = test %}
{% include "index.nunjucks" %}
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ email.title }}</title>
{% endblock %}
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
data.json
{
"default":
{
"title": "TITLE"
},
"test":
{
"title": "TEST TITLE"
}
}
When compiled through gulp, two separate emails are created with their own title using the same template.
I'm using Twig PatternLab.
I got a small issue with JSON and a Twig for loop.
Atom 00-h3-black.twig:
<h3 class="A-ChevronBlack">{{ text.chevron }}</h3>
Molecule 00-mastertile.twig:
<div class="M-DMasterTile">
<div class="image"></div>
<div class="content">
{% include "atoms-h3-black" %}
</div>
</div>
Organisms 00-default2.twig:
{% for post in default2 %}
{% include "molecules-mastertile" %}
{% endfor %}
And JSON inside Organism folder 00-default2.json
{
"default2" : [
{
"text" : {
"chevron" : "How to build a campfire",
"body" : "This is the body copy"
}
},
{
"text" : {
"chevron":"Lorem Ipsum",
"body" : "This is the body copy"
}
}
]
}
My expectation is for the "default2" to loop twice because I've got an array with 2 items in the JSON and push the JSON content. If I take the variables out of the JSON array it shows the changes(but obviously duplicated).
What am I doing wrong here?
I appreciate your help
include uses global scope and there is no variable text in it. Use include with syntax to pass variable into inner scope.
Your Organisms 00-default2.twig should look like this:
{% for post in default2 %}
{% include "molecules-mastertile" with {'text': post.text} %}
{% endfor %}