For the given below webpage,
<!DOCTYPE html>
<html lang="en">
<head>
<title>xyz</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>My blog</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face"> is loaded using Django templating.
Above page uses bootstrap css framework, for responsive design
Image size/resolution impacts utilisation of network bandwidth.
Appropriate image size helps in creating responsive UI design.
In real time, we get images from client(customer) based on the size/resolution that we request to client(customer). Images can be IP property of client, until the website goes in production.
Question:
Amidst development process, for requesting to client(customer), How to decide the final size/resolution of an image to embed in web page, for any given layout of web page?
One way to do this is to put images of a different size in the template and then make sure that browser renders the appropriate image. You can use picture html tag for this:
<picture class="responsive-img" style='max-height:100px;' alt="face">
<!-- low-res, default -->
<source src="{% static 'personal/img/profile.jpg' %}">
<!-- med-res -->
<source src="{% static 'personal/img/profile.medium.jpg' %}"
media="(min-width: 400px)">
<!-- high-res -->
<source src="{% static 'personal/img/profile.large.jpg' %}"
media="(min-width: 800px)">
<!-- Fallback content -->
<img src="{% static 'personal/img/profile.jpg' %}" alt="face">
</picture>
Related
I would like to use Handlebars with Parcel, but without importing handlerbars partials, but having them in a script tag in html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocomplete!</title>
<link rel="stylesheet" href="./public/stylesheets/whitespace-reset.css">
<link rel="stylesheet" href="./public/stylesheets/gallery.css">
<script type="module" src="./public/typescript/gallery.ts"></script>
</head>
<body>
<main>
<h1>Amanda Rose's Photos</h1>
<div id="slideshow">
<div id="slides">
<figure data-id="1">
<img src="https://via.placeholder.com/1280x1024" />
<figcaption>
Some text.
</figcaption>
</figure>
<figure data-id="2">
<img src="https://via.placeholder.com/1280x1024/ffffff/0066cc" />
<figcaption>
Some text.
</figcaption>
</figure>
<figure data-id="3">
<img src="https://via.placeholder.com/1280x1024/0066cc/ffffff" />
<figcaption>
Some text.
</figcaption>
</figure>
</div>
<ul>
<li><a class="prev" href="#">Prev</a></li>
<li><a class="next" href="#">Next</a></li>
</ul>
</div>
<section>
<header>
<h2>City Lights</h2>
<p><time>Taken on 3/31/15</time></p>
<div class="actions">
<a href="/api/photos/like" data-id="1" data-property="likes" class="button like">
♡ 5 Likes
</a>
<a href="/api/photos/favorite" data-id="1" data-property="favorites" class="button favorite">
☆ 2 Favorites
</a>
</div>
</header>
<!-- code omitted -->
</section>
</main>
<script id="photos" type="text/x-handlebars">
{{#each photos}}
<figure data-id="{{id}}">
<img src="{{src}}" />
<figcaption>{{caption}}</figcaption>
</figure>
{{/each}}
</script>
<!-- code omitted -->
</body>
</html>
The issue that I have is that Parcel is saying that I am missing transformers for handlebars. Since these partials are not in a separate file adding
"transformers": {
"*.hbs": [
"parcel-transformer-handlebars"
]
}
to my .parcelrc file won't do a thing even when I install parcel-plugin-handlebars.
Does anyone have an idea how to change this? I have tried changing transformers to plugin-transformers-handlebars for html files but this messes up everything else.
Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!DOCTYPE html>
<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">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
I wanted to take a free template to start my RolePlay forum with a "good looking" homepage; and I found this one: Template preview
The template himself is working fine, if I'm openning the given downloaded index.html there no problem.
Then I "translated" that page to work with my Symfony.
Here is what I got:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
{% block title %}Way Of Shogun {% endblock %}
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
<link rel="stylesheet" href="{{ asset('css/style.css') }}"/>
{% endblock %}
</head>
<body>
<div id="container">
<div id="header">
<div id="nav">
<ul>
<li>
Home
</li>
<li>
Game Guide
</li>
<li>
Interactive
</li>
</ul>
<ul>
<li>
Account
</li>
<li>
Support
</li>
<li>
Media
</li>
</ul>
</div>
</div>
<div id="content1">
<div id="text1">
<img src="{{ asset('images/cap-night-elf.gif') }}" alt="Caption" />
<div class="heading">BEST RELEASE OF THIS MONTH</div>
<br />
<p>Don't forgot to check free website templates every day, because we add at least one free website template daily.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us. Don't want your boss to know you used a free website template ;).</p>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.</p>
<p>
<div class="heading">MORE GAMES</div>
</p>
<p>
<span class="flt-lft"><img src="{{ asset('images/image-1.gif') }}" alt="More Games" /></span>
<span class="flt-lft"><img src="{{ asset('images/image-2.gif') }}" alt="More Games" /></span> <strong>Gnome mage by Someone</strong><br />
<br />
Etiam ullamcorper mi eu libero bibendum consequat. Cras volutpat .<br />
<span class="flt-rgt">...more</span>
</p>
</div>
</div>
<div id="pagebottom">
<div id="left">
<div id="text2"> <img src="{{ asset('images/cap-community-news.gif') }}" alt="Community News" />
<p>
<div class="heading2">THUNDGOT, AEUS, & VANERUS, 19/10/2006</div>
</p>
<p>Don't forgot to check free website templates every day, because we add at least one free website template daily.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us. Don't want your boss to know you used a free website template ;).</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the forum.</p>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.</p>
<p>To find great hosting providers visit Web Hosting Zoom</p>
</div>
</div>
</div>
</div>
{% block body %}{% endblock %}
<div id="right">
<div class="heading2">QUICK LINKS</div>
<div id="quicklinks">
<ul>
<li>Home</li>
<li>Realms Status</li>
<li>Account Creation</li>
<li>Account Management</li>
<li>Cetrieve Passward</li>
</ul>
</div>
<div class="heading2">SCREENSHOT OF THE DAY</div>
<img src="{{ asset('images/screenshot.jpg') }}" alt="Screenshot" /> <br />
Cross Realm Battlegrounds<br />
World PvP <br />
Rogue Talents revamped
</div>
<div id="footer">
Home | Game Guide | Interactive | Community | Account | Support | Media
<p>
Legal Documents |
Game Policies
<br/>©2006
WorldofWarcraft.com. All rights reserved. | designed by
free website templates
</p>
</div>
</div>
<div align=center>This template downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div>
</body>
</html>
Sorry, for the bad indentation, it's crazy to clean a code like that :(
Anyway, as I said, I've just translated to replace the images by the asset link.
But as a results, the frontend isn't the same and I can't see what's wrong.
Hope you can help me on this ;) Thanks.
Here is a screen of what I'm getting.
To be more specific, I checked the networks calls and all the images and css and well found
How it is suppose to be:
Thanks again
The question title describes my problem. I'm currently trying to make it work with static files, but I also tried using Bootstrap's CDN and tried using hard coded path to the Bootstrap CSS. Additional infos:
settings.py:
STATIC_PATH = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
base.html:
<!DOCTYPE html>
<html lang="en" ng-app="IA">
<head>
{% load staticfiles %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionic.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}"/>
</head>
<body ng-controller="LFSTD">
<div class="container">
<div class="jumbotron">
<div class="bar bar-header">
<button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></button>
<div class="h1 title">
<b>
{% block header_title_block %}{% endblock %}
</b>
</div>
</div>
<div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="LFSTD">
<ion-content class="has-header">
<div>
{% block body_block %}{% endblock %}
</div>
</ion-content>
</ion-side-menu-content>
<!--Left menu -->
<ion-side-menu side="left">
<ion-content class="has-header">
<div class="list">
<a class="item item-icon-left" href="{% url 'profile' %}">
<i class="icon ion-person"></i>
Profile
</a>
<a class="item item-icon-left" href="{% url 'lfstd' %}">
<i class="icon ion-person-stalker"></i>
LFSTD
<span class="badge badge-assertive">10</span>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/ionic.bundle.min.js' %}"></script>
<script src="{% static 'js/ia.js' %}"></script>
</body>
</html>
Anyone has an idea of why Bootstrap ain't loading? The container and the jumbotron divs simply don't modify the look of the page.
The network monitor gives me 304 on both the bootstrap CSS and JS files:
Edit:
Here is my BASEDIR:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Working hardcoded URL:
/static/css/bootstrap.min.css
How I call it with static files:
{% static 'css/bootstrap.min.css' %}
URL from view source:
href="/static/css/bootstrap.min.css"
Edit #2, lead to solution:
After playing around with the static files and the templates, I realized that it is AngularJS messing up my CSS. When I remove
ng-app="IA"
From my < html > tag, all formatting (except from angularJS of course) works.
I have this site and my links to css and javascript is working but the problem is that the css are not applied on the site. also when i visit the link for my css the browser downloads the css and javascript file. I have tried Googles PageSpeed Insights and it said that
Eliminate external render-blocking Javascript and CSS in
above-the-fold content
My stylesheet is not working because of this.
Resource interpreted as Stylesheet but transferred with MIME type application/x-httpd-php
this is the file structure of my site. I use Smarty Templating and Bootstrap on my site.
My templates are inside the view folder
Sample Code
index.php
<?php
require_once('includes/initialize.php');
$smarty = new Smarty_skyerp();
//$smarty->testInstall();
$smarty->assign('title','Skyerp | Home');
$smarty->assign('year',date("Y", time()));
$smarty->display('index.tpl.html');
?>
index.tpl.html
{extends file='layout.tpl.html'}
{block name='nav'}
<ul class="nav">
<li class="active">Home</li>
<li>SkyERP</li>
<li>SkyPayroll</li>
<li>Manuals</li>
<li>Support</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
{/block}
{block name='content'}
<div class="row-fluid"></div>
{/block}
layout.tpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$title}</title>
<link href="assets/css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet">
<link href="assets/css/docs.css" type="text/css" rel="stylesheet">
<style type="text/css">
body {
<!--background-image: url('assets/img/skyerp_blue.jpg');-->
background-size: 80%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom;
}
</style>
<link href="assets/css/stickyfooter.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jquery.js"></script>
{block name="head"}{/block}
</head>
<body data-spy="scroll" data-target=".module-sidebar">
<div id="wrap" style="height: 100%;">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.php" style="padding: 6px 10px 1px 0;"><img src="assets/img/headerfull.png"/></a>
<div class="nav-collapse collapse" style="margin-top: 14px;">
{block name='nav'}{/block}
<!--<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn btn-primary">Sign in</button>
</form>-->
</div>
</div>
</div>
</div>
<div class="container">
{block name='banner'}{/block}
{block name='content'}{/block}
</div>
<div id="push"></div>
</div>
<footer id="footer" class="footer">
<div class="container">
<p>SkyErp © {$year}. All Rights Reserved.</p>
<p></p>
<p></p>
<ul class="footer-links">
<li>Blog</li>
<li class="muted">·</li>
<li>Issues</li>
<li class="muted">·</li>
<li>Changelog</li>
</ul>
</div>
</footer>
<script src="assets/js/bootstrap.min.js"></script>
{block name='script'}{/block}
</body>
`
What is the cause of the problem?
Is the problem on the server side or how i process my files?
What should i do to fix this?
I found a fix for this. I think the problem was on the server side. . My website runs on Windows Server. Under IIS Setting on custom MIME types , i added .css set mime type to text/css and .js set mime type to text/javascript. Haven't tried on Apache.