I had such a problem - on the desktop version, the image is displayed correctly. Exactly the same on android devices. But when you visit the site from an ios device, the image is very close and is not displayed as it should be. click to see this
base_page.html
<html lang="ru">
<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, maximum-scale=1.0, user-scalable=no">
<title>{% block title %}Shop{% endblock title %}</title>
<link rel="shortcut icon" type="image/png" href="{% static 'img/favicon.png' %}"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,400;0,500;1,100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/all.min.css' %}" />
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'css/meanmenu.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/main.css' %}" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" />
</head>
<body>
{% block container %}
{% endblock container %}
<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.countdown.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.meanmenu.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
page.html
{% extends 'base_page.html' %}
{% load static %}
{% block title %}
Shop
{% endblock title %}
{% block container %}
<div class="hero-area hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-9 offset-lg-2 text-center">
<div class="hero-text">
<div class="hero-text-tablecell">
<p class="subtitle">Новое поступление</p>
<h1>Предзаказ на клавиатуры Varmilo!</h1>
<div class="hero-btns">
Каталог
Контакты
</div>
</div>
</div>
</div>
</div>
</div>
</div>
main.css
.hero-bg {
background-image: url(../img/hero-bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.hero-area {
height: 100%;
position: relative;
z-index: 1;
}
Related
There were problems connecting the css file to the project. If you specify styles inside the html file, through - everything works well. But if you refer to a project style file, many styles simply refuse to work.
css file:
.imgsize{
width: 350px;
height:350px;
}
html file:
{% load staticfiles %}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/tren.css' %}">
<link rel="shortcut icon" href="{% static 'image/h.png' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<title>Hello</title>
</head>
<body>
<div class="der">
<div class="container">
<div class="border border-success rounded bg-light text-dark">
<div class="ml-1">
<img class="imgsize" src="{% static 'image/1.jpg' %}" alt="Картинка"> //This does not work
</div>
</div>
</div>
</div>
</body>
</html>
https://i.stack.imgur.com/alEe3.png
I am working on a one page website, and try to disect each section to different html file, and now the base.html that contain css, js file don't want to load. Instead, it returns "Invalid block tag on line 21: 'static', expected 'endblock'. Did you forget to register or load this tag?" comment on some of the {% include "page.html" %}.
I've tried add {% load static %} {% load staticfiles %} on each {% include "page.html" %}, still don't help with the css, js from the base.html.
Any thoughts to solve this issue? Thank you in advance
Here are my codes:
Here is my base.html
<!DOCTYPE html>
{% load staticfiles %}
{% load fontawesome %}
{% load static %}
<html lang="en">
<head>
{% fontawesome_stylesheet %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Website</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'https://fonts.googleapis.com/css?family=Montserrat:400,700' %}" rel="stylesheet"
type="text/css">
<link href='{% static "https://fonts.googleapis.com/css?family=Kaushan+Script" %}' rel='stylesheet' type='text/css'>
<link href='{% static "https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" %}'
rel='stylesheet' type='text/css'>
<link href='{% static "https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" %}' rel='stylesheet'
type='text/css'>
<!-- Custom styles for this template -->
<link href="{% static 'css/agency.min.css' %}" rel="stylesheet">
</head>
<body>
{% block content %}
{% endblock %}
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Plugin JavaScript -->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Contact form JavaScript -->
<script src="{% static 'js/jqBootstrapValidation.js'%}"></script>
<script src="{% static 'js/contact_me.js' %}"></script>
<!-- Custom scripts for this template -->
<script src="{% static 'js/agency.min.js' %}"></script>
</body>
</html>
and here is one of the page I am going to use for djago view.
{% extends '00_base.html' %}
{% block content %}
{% include "001_navigation.html" %}
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome Text!</div>
<div class="intro-heading text-uppercase">Sub Welcome Text</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</div>
</header>
{% include "02_services.html" %}
{% include "03_portfolio.html" %}
{% include "04_about.html" %}
{% include "05_team.html" %}
{% include "06_clients.html" %}
{% include "07_contact.html" %}
{% include "08_footer.html" %}
{% include "09_modals.html" %}
{% endblock %}
Here is one of the "include page.html". It returns "Invalid block tag on {% static 'img/portfolio/01-thumbnail.jpg' %}: 'static', expected 'endblock'. Did you forget to register or load this tag?"
{% extends '00_base.html' %}
{% block content %}
<!-- Portfolio Grid -->
<section class="bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolio1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="{% static 'img/portfolio/01-thumbnail.jpg' %}" alt="">
</a>
<div class="portfolio-caption">
<h4>Item</h4>
<p class="text-muted">Item text</p>
</div>
</div>
{%endblock%}
Templates in settings:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['web/web2/templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'templates', 'web2', 'static', 'public'),'/www/static/'
)
STATIC_ROOT = os.path.join(BASE_DIR, 'public', 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'public', 'media')
in last html file you forgot to add {% endblock %}.
{% block content %}
.
. Html contents
.
{% endblock %}
I have a layout.html where I am setting the general layout for my project and then for each page I want to render different HTML based on the layout.html
For my home page I want to render a slider that provides a welcome message to the page, nice pictures etc, I only want this displayed on the home page.
The issue I am having is that when I I have {% include "slider.html" %} on my layout.html, the slider renders fine, but when I move it to my home.html which extends layout.html the slider is not rendered.
How can I do this so teh slider is only rendered when the user goes to home?
home.html
{% extends "layout.html" %}
{% include "slider.html" %}
{% block content %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/swiper.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dark.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/font-icons.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style-rtl-vars.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'app/content/responsive.css' %}" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Super blog</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
{% include "header.html" %}
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
{% block content %}
{% endblock %}
</div>
</div>
</section>
{% include "footer.html" %}
</div>
<script type="text/javascript" src="{% static 'scripts/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/plugins.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/functions.js' %}"></script>
</body>
slider.html
<section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix">
<div class="slider-parallax-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark" style="background-image: url('/static/images/typing-on-mac.jpg');">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">super blog</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">some text</p>
</div>
</div>
</div>
</div>
</div>
<i class="icon-angle-down infinite animated fadeInDown"></i>
</div>
</section>
You need to include it in a {% block %}, since otherwise, it is of course not included in the final content.
If you extend a template, then you can only override the blocks. All content not in the blocks, will be interpreted, but will not be put into the final response.
So you can for example include the content of the {% include %} part in:
{% extends "layout.html" %}
{% block content %}
{% include "slider.html" %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
before extending i have checked all connections and file paths but after extending my child codes vanises
base.html
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
</div>
</body>
</html>
skills.html
{% extends 'app/base.html' %}
{% block content %}
<p>skills</p>
<p>skills</p>
<p>skills</p>
{% endblock %}
Your base.html file should still include a block section
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
{% block content %}
{% endblock %}
</div>
</body>
</html>
I have an <audio> element that's seems to work fine. However, whenever I try to use the seeker, it just takes the audio back to the beginning. This is the HTML:
<audio id="audio-player" src="/music/You-Too-Much.mp3" type="audio/mp3" controls="controls"></audio>
I've searched online, but I can't seem to find a cause or solution for this. I need this fixed. Thanks.
Full HTML code:
{% extends 'base.html.twig' %}
{% block title %}
Welcome
{% endblock %}
{% block nav_head %} Havilah Radio {% endblock %}
{% block content %}
<div class="music-player">
<div class="row">
<div class="col-md-3">
<img class="cover" src="/img/album-art/HANILAH.jpg" alt="">
<div class="footer-song-info">
<h4>
You Too Much
</h4>
<h6>Unknown Artist</h6>
</div>
</div>
<div class="col-md-6">
<audio id="audio-player" src="/music/untitled05.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</div>
</div>
{% endblock %}
The main code extends this base.html.twig:
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#9e1935">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} | Havilah Radio</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans' />
<!-- Bootstrap CSS -->
<link href="{{ asset('lib/bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Font Icons -->
<link href="{{ asset('lib/iconsmind/iconsmind.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Extra CSS -->
{% block css %}{% endblock %}
<!-- Custom CSS -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all"/>
</head>
<body style="background: {% block body_background %}#fff {% endblock %}">
<div class="body">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-nav">
<i class="icon-Align-Right icon"></i>
</button>
<a class="navbar-brand" href="/"><img src={{ asset('img/havilahradio-logo.png') }} />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-nav">
</div>
</div>
</nav>
{% block content %}{% endblock %}
</div>
</body>
<!-- JQuery -->
<script src="{{ asset('lib/jquery/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('lib/jquery/jquery.easing.1.3.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ asset('lib/bootstrap/js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('lib/bootstrap/js/bootstrap_select.min.js') }}" ></script>
<!-- Extra JS -->
{% block js %}{% endblock %}
<!-- Custom JS -->
<script src="{{ asset('js/app.js') }}"></script>
</html>