How to add images to HTML files using jinja2 templating tags? I tried to add css using {% include %} tag. But images are not being fetched.
views.py:
from django.template import loader, RequestContext
from books.models import *
from django.shortcuts import render, render_to_response, get_object_or_404
from django.core.mail import send_mail
from django.core.context_processors import csrf
from books.forms import *
from django.http import HttpResponseRedirect
from django.core.exceptions import ObjectDoesNotExist
from jinja2 import Environment, FileSystemLoader, ChoiceLoader, PackageLoader, Template
env = Environment(loader=PackageLoader('mysite', 'templates',encoding='utf-8'))
def load(request):
template = env.get_template('test.html')
return HttpResponse(template.render(name='dd',current_date=datetime.datetime.now()))
def index(request):
book_list = Book.objects.order_by('publication_date')[:5]
t = env.get_template('index.html')
return HttpResponse(t.render(book_list=book_list))
My Template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Annai Book Shop</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style>
{% include "css/style.css" %}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
{% include "js/jquery.flexslider-min.js" %}
{% include "js/jquery.flexslider.js" %}
</script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
// more complex call
$('.flexslider').flexslider({
animation: "slides",
controlsContainer: ".flex-container",
start: function(slider) {
$('.total-slides').text(slider.count);
},
after: function(slider) {
$('.current-slide').text(slider.currentSlide);
}
});
});
</script>
</head>
<body>
<div class="page-out">
<div class="page-in">
<div class="page">
<div class="main">
<div class="header">
<div class="header-top">
<h1>Annai Book <span>Shop</span></h1>
</div>
<div class="header-bottom">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slide-image-1.jpg" />
</li>
<li>
<img src="images/slide-image-2.jpg" />
</li>
<li>
<img src="images/slide-image-3.jpg" />
</li>
</ul>
</div>
</div>
No image is being fetched both in css and in img tag. Image is located in the current folder where the template is present.
Related
It's probably not about static files configuration because images work and CSS other than navbar's work, navbar's CSS doesn't make any changes it's just like it's not there, even though when I tried to make a simple h1 and color it (as a test) it worked, it's just the navbar's CSS for some reason that I really can't figure out.
base.html:
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
{% block navbar %}
{% include 'parts/navbar.html' %}
{% endblock navbar %}
{% block content %}
{% endblock content %}
</body>
</html>
homepage.html:
{% extends 'base.html' %}
{% load static %}
{% block content %}
{% endblock content %}
navbar.html:
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}" />
</head>
<div class="navContainer">
<div class="navbar">
<img src="{% static 'images/navLogo.png' %}" class="logo" />
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
static configuration in settings.py:
STATIC_ROOT = path.join(BASE_DIR, 'static')
STATIC_URL = 'static/'
STATICFILES_DIRS = [
path.join(BASE_DIR, 'staticfiles')
]
app's urls.py:
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.homepage, name="homepage")
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
what I'm getting:
perhaps this directory image could help too:
Hello everyone,
I just started learing Kotlin and Ktor for Web Development. I started creating a Template and everything worked perfectly but now I want to add an image to my Templates. In the Kotlin Docs they created a static route but it doesn't work:
Template:
<#macro layout>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Document -->
<title>${pageName.name} | Test</title>
<meta name="description" content="This is the official website of. ">
<meta name="keywords" content="web, ...">
<meta name="author" content="">
<link rel="shortcut icon" href="img/favicon.ico"/>
<!-- Document -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="main-picture">
<div class="header">
<div class="img">
<img alt="Logo" width="60px" height="auto" src="image/logo.png">
</div>
<div class="toggle-button">
<span class="bar-1"></span>
<span class="bar-2"></span>
<span class="bar-3"></span>
</div>
<nav class="navbar">
<ul>
<li>Home</li> <!-- Home -->
<li>Concept</li> <!-- Concept -->
<li>Offers</li> <!-- Offers -->
<li>About Us</li> <!-- AboutUS -->
</ul>
</nav>
</div>
</div>
</header>
<main>
<#nested>
</main>
<footer>
<div class="footer-gen">
<div class="footer">
Imprint <!-- Imprint -->
Privacy Policy <!-- Privacy -->
Conditions <!-- Conditions -->
</div>
<div class="footer-name">
<p>© 2022 - vision2success</p>
</div>
</div>
</footer>
</body>
</#macro>
Routing
import io.ktor.http.*
import io.ktor.server.application.*
import io.ktor.server.freemarker.*
import io.ktor.server.response.*
import io.ktor.server.routing.*
fun Application.imgRouting() {
routing {
get("/") {
call.respondRedirect("images")
}
route("images") {
get("/favicon.ico") {
call.respond(
FreeMarkerContent(
"img/favicon.ico",
model = null,
contentType = ContentType.Image.Any
)
)
}
get("/logo.png") {
call.respond(
FreeMarkerContent(
"logo.png",
model = null,
contentType = ContentType.Image.PNG
)
)
}
}
}
}
Error:
The http://localhost:8080/images/logo.png graphic cannot be displayed because it contains errors.
NK
I'm trying to use Ktor to create a back end for a simple site. I can not find any documentation or examples on how to do anything that is not absolutely basic.
E.g. all I want to do at this stage is:
have a template evaluated by FreeMarker (or any other method) to create a Html
page that is styled using a css sheet that I have, and refer to an image that I have.
I can not get it to find/use the css or the image.
my code:
index.ftl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<header>
<div">
Hello
</div>
</header>
<body>
<div>
<h1>H1 1</h1>
<img src="/resources/imgs/Logo_cropped.jpg" alt="1">
<img src="resources/imgs/Logo_cropped.jpg" alt="2">
<img src="/imgs/Logo_cropped.jpg" alt="3">
<img src="imgs/Logo_cropped.jpg" alt="4">
<img src="/Logo_cropped.jpg" alt="5">
<img src="Logo_cropped.jpg" alt="6">
<h1>H1 2</h1>
</body>
</html>
Routing.kt
package com.example.plugins
import io.ktor.server.routing.*
import io.ktor.http.*
import io.ktor.server.application.*
import io.ktor.server.freemarker.*
import io.ktor.server.response.*
import io.ktor.server.request.*
fun Application.configureRouting() {
routing {
get("/") {
call.respondText("Hello World!")
}
get("/h") {
call.respond(FreeMarkerContent("index.ftl", mapOf("data" to stam("John", 15)), ""))
}
}
}
data class stam(val name: String, val age: Int)
I'm trying to nest html5 to react native by using webview, but it seems like I can't trigger the css and js file, my react native js code:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
export default Game = () => {
return (
<WebView
originWhitelist={['*']}
source={require('./index.html')}
style={styles.container}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 300,
paddingTop: 500,
},
});
my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15 Puzzle</title>
<link rel="stylesheet" href="./15-puzzle.css">
</head>
<body>
<div id="puzzle"></div>
<div id="controls">
<button id="solve">Solve</button>
<button id="scramble">Scramble</button>
</div>
<p>Developed by Arnis Ritia</p>
<p>View source code on GitHub</p>
<script src="./15-puzzle.js"></script>
I just can't trigger the css and js code in html, does webview support it?
This way is not working for WebView.
you must create a file or a string for html content like this:
For example create file rawHTML:
export const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15 Puzzle</title>
<link rel="stylesheet" href="./15-puzzle.css">
</head>
<body>
<div id="puzzle"></div>
<div id="controls">
<button id="solve">Solve</button>
<button id="scramble">Scramble</button>
</div>
<p>Developed by Arnis Ritia</p>
<p>View source code on GitHub</p>
<script src="./15-puzzle.js"></script>
</body>
</head>
`
and then import this in js file like this:
import {html} from './rawHTML';
and change WebView source to source={{html: html}}
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 2 years ago.
The Webpage shows up without CSS for the path's: '/articles/int:article_id/' and '/articles/int:article_id/update'.
For all other pages the CSS is loading. Thanks for your help
#app.route('/articles/<int:article_id>/')
#login_required
def article(article_id):
article = Article.query.get_or_404(article_id)
return render_template('article.html', title='Artikel', article=article)
---------------------------------------------------------------------------------------------------------
{% extends 'layout.html' %}
{% block content %}
(...)
{% endblock content %}
Layout.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet' type='text/css' />
<link href="../static/css/default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="menu">
<ul>
<li class="current_page_item">Home</li>
<li>Tracken</li>
<li>Artikel</li>
<li>Profil</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
{% block content %} {% endblock %}
I think that you need to change the link tags in the following way. For example:
<link href="{{ url_for('static', filename='css/default.css') }}" rel="stylesheet" type="text/css" media="all" />