I'm working in Django 1.8, OSX, and Chrome. Some ionicons I've included in a rendered template are not showing up in Heroku (staging environment). I'm fairly certain that I have linked/included the icons properly in the css and font files (30464569), because they show up just fine on the localhost, on cPanel, and when published on the person's own website. Additionally, they even show up on Heroku if I use Safari! What is happening here?
I've read a bunch of SO posts about this, but most people are referencing other font packages (29687388) or (14366158), other frameworks (25982037) or (21472458), or completely missing icons (27766015).
EDITED TO INCLUDE HTML (from Django template)
<head>
<meta charset="UTF-8">
<title>{{ student.preferred_name }} {{ student.last_name }}</title>
<!--<meta name="description" content="[Insert your description here]">-->
<!--<meta name="google-site-verification" content="">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/normalize.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/grid.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/owl.carousel.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/owl.theme.default.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'vendors/css/ionicons.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'resources/css/queries.css' %}">
<link rel="stylesheet" type="text/css" href="{% asset 'resources/css/style.css' %}">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic">
</head>
I'm hesitant to post code because it's not a public project, but here are are two images showing the issue:
Icons on LocalHost
Icons on Heroku
Any ideas on how I can fix this? I need my users to see an accurate preview before they publish their site and this icon issue has been a major headache for over a week.
Thanks!
Sarah
Be sure that run command $python manage.py collectstatic before pushing to heroku.
I had this same problem
confirm that the static assets are correctly spelled
Note that it might not be case sensitive on windows but Linus is case sensitive and Heroku runs on Linus
so ensure that your lower and upper cases are in place
Related
I have my stylesheets linked in my header as
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/meanmenu.min.css">
I'm using the MEAN stack in AWS Cloud9 Development Environment, and when I preview my application, everything is styled exactly how I plan using these stylesheets as they're in my public directory, but when I add any backslash into the end of my URL path in preview the stylesheets are not linking. For example, stylesheets are clearly linked on mysite.com/test, but mysite.com/test/ or mysite.com/test/example seems to unlink and everything is in standard raw HTML format. If I link the CDN they work, but I need to link custom stylesheets as well.
I have
app.use(express.static(__dirname + "/public"));
to tell the browser where to search.
Thanks
If you go to the next level after test (eg: mysite.com/test/example), you need to go up a level, since paths are relative.
Try:
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/meanmenu.min.css">
Now, hardcoding your paths might get annoying after a while; you might want to provide these paths as part of your locals.
I am using a bootstrap index file in the header.html in a django project. Can anyone point out a fix or the easiest method to link the bootstrap file to the static folder. In what places does it need to be done, and how?
Also, for use of bootstrap, could I just use the index file rather than header?
I can see the error (below) but do not know the syntax to fix it. The route i've tried is using Jinja logic and it is on that line that the first error arises. (line 14)
Current error:
Error during template rendering
In template C:\Users\User\Desktop\pythonsite\mysite\aboutme\templates\aboutme\header.html, error at line 14
Invalid block tag on line 14: 'static'. Did you forget to register or load this tag?
4 <head>
5
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 <meta name="description" content="">
9 <meta name="author" content="">
10
11 <title>Freelancer - Start Bootstrap Theme</title>
12
13 <!-- Bootstrap core CSS -->
14 <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
15
16 <!-- Custom fonts for this template -->
17 <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
18 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
19 <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
20
21 <!-- Plugin CSS -->
22 <link href="{% static 'vendor/magnific-popup/magnific-popup.css' &}" rel="stylesheet" type="text/css">
23
24 <!-- Custom styles for this template -->
Update:
I changed the static and use of jinja to simply what it was originally in the bootstrap index file: e.g.
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
and this worked in that it ran the webpage, but without CSS>
I still cannot figure out how to link the css from this index page to the templates folder and how/where what syntax.
Current site structure:
The name of the folder is "aboutme" (name of main app)
Inside it is the static folder.
Inside the static folder, I have dropped the entire contents of the bootstrap download (e.g. the fonts, css and js folders)
I have the templates folder in which I have the aboutme folder and in that is are the header.html and home.html. The header.html is the file that I am using (below), trying to reference the css/js etc so the site looks and displays correctly.
Do I simply use:
<link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
instead of
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
and do I do this in each case? Or should I be using jinja logic?
Somewhere (anywhere) before that, put in
{% load static %}
The first thing is to load the static, for that we use the following:
{% load static %}
To call any static file, it would be like this:
<link href="{% static 'FILE PATH' %}" rel="stylesheet">
<script src="{% static 'FILE PATH' %}"></script>
Example:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anything</title>
<!-- Bootstrap CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Font Awesome -->
<link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Bootstrap JS -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
If you have a base template and you want to extend the other templates, you should use the following:
{% extends 'BASE FILE PATH' %}
I have a large php application that I am converting to ember.js. In my php application I used to have separate css and js files which was loaded when the specific routes get called. what the best way to accomplish this in ember.js or is there any other best practice for that. Right now I am loading all the js and css files in my index.html file.
<link type="text/css" rel="stylesheet" href="assets/css/gumby.css" media="all" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global.css" media="all" />
<link type="text/css" rel="stylesheet" href=assets/css/tooltipster.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/about.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/admin.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global_print.css" media="print" />
js files:
<script src="assets/js/libs/jquery-1.9.0.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/account.js"></script>
<script src="js/message.js"></script>
<script src="js/user.js"></script>
<script src="js/inquiry.js"></script>
I saw this tutorial http://madhatted.com/2013/6/29/lazy-loading-with-ember and also looked ember-cli. It will be really helpful for me if people share what they are doing for their application. Thanks in advance.
Typically you can take two paths to preprocess your assets: minify, compress, uglify, etc.
You can do it with the back-end you are using. As examples here, you have Rails using sprockets for its asset pipeline, or PHP's Assetic.
If you don't want to rely on your back-end for this task, you can opt to do it using any front-end build tool. There are a few here, the most popular option for ember-cli these days seems to be broccoli, which comes set up by default. Other choices could be gulp or grunt. All these options involve using your terminal to build your application, using a configuration file as a central point (Brocfile.js, Gruntfile.js, etc.)
It's mostly a matter of personal preference. As an example, I'd probably go with Rails asset pipeline for small projects, while I'd use ember-cli and broccoli if I'd be working on something bigger.
What will be the best stage in Django to append file timestamp to all urls which start with /static/?
Example URLs:
http://mydomain.com/static/css/...
http://mydomain.com/static/img/...
http://mydomain.com/static/js/...
Is there an app which does that and that will work with Mercurial VCS?
You can try django-compressor
This app combines several CSS/JS files to the one file. And generates unique name for that file. For example:
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/static/css/one.css" type="text/css" charset="utf-8">
<style type="text/css">p { border:5px solid green;}</style>
<link rel="stylesheet" href="/static/css/two.css" type="text/css" charset="utf-8">
{% endcompress %}
Result will be something like:
<link rel="stylesheet" href="/static/CACHE/css/f7c661b7a124.css" type="text/css" charset="utf-8">
i an doing exactly the same Django admin datepicker calendar and clock img
and i am suffering with the same problem but it was working perfectly fine with django 1.4 but when i updated it to django 1.5 it is giving me this error
'adminmedia' is not a valid tag library: Template library adminmedia not found, tried django.templatetags.adminmedia,django.contrib.staticfiles.templatetags.adminmedia,django.contrib.admin.templatetags.adminmedia,django.contrib.humanize.templatetags.adminmedia,jobpost.templatetags.adminmedia,crispy_forms.templatetags.adminmedia,tinymce.templatetags.adminmedia,haystack.templatetags.adminmedia
here is my code:
{% load adminmedia %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"> </script>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"> </script>
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>
<script type = “text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script>
by doing this i am showing image of calender widget from /static/admin/img/icon_calender.jpg.
but admin media option is deprecated in django version 1.5 or later so then i replace this with static media option and here is the new code:
{% load staticfiles %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<link href="{% static 'admin/css/login.css' %}" rel="stylesheet">
and it look like this:
my calender icon is gone. can anyone tell me whats the alternative of this problem in version 1.5
help will be appreciated
The response is right here, in the 1.5 release notes: https://docs.djangoproject.com/en/dev/releases/1.5-beta-1/#miscellaneous
The {% admin_media_prefix %} became deprecated, you must remove it from your templates. (Included every {% load adminmedia %}, which causes the exception). There must be a setting which replace this tag I guess.
so django 1.5 was giving me nightmare so i resolved my problem by using direct jquery datpicker here is the jquery datepicker
all i had to do is change the id which is a little bit tricky in django .for example if your date field name is start_date then id will be formtools_start_date . and for this kind of datepicker you don't even need any icon to show.. this helped me i hope this will help those also whoever upgraded their django version.
I just had this problem today - not being able to load admin base.css. I upgraded Django for my site from v1.2 to v1.5 and encountered the issue. I found that the href is /static/admin/css/base.css and could not find out how to change it. So I did these:
Copied site-packages/django/contrib/admin/static/admin/* to my Django project's static directory so it would be like
top/
static/
admin/
css/
js
images
Editted urls.py, added the following line in the urlpatterns = patterns('',...
(r'^static/(?P.*)$','django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes':True}),
That's it. It worked.