I'm trying to link some pictures to my Django app from the static folder, but instead it creates a new static folder inside the templates directory.
My HTML:
{% load static %}
<!DOCTYPE html>
{% extends 'milk_app/base.html' %}
{% load staticfiles %}
{% block title_block %}
Homepage
{% endblock %}
{% block body_block %}
<!-- Home page for Hosts -->
{% if user.userprofile.account == "Host" %}
<div class="container">
<div class="row">
<div class="home_hover_pictures col-4">
<img class="img-responsive" src="{% static 'images/listing-property.jpg' %}">
<h4>Create a new listing</h4>
</div>
<div class="home_hover_pictures col-4">
<img class="img-responsive" src="{% static 'images/your-properties.jpg' %}">
<h4>Show your rented properties</h4>
</div>
<div class="home_hover_pictures col-4">
<img class="img-responsive" src="{% static 'images/scroll-others.jpg' %}">
<h4>Scroll other properties</h4>
</div>
</div>
</div>
<!-- Home page for Tenants (not the beer) -->
{% elif user.userprofile.account == 'Tenant' %}
<!-- Home page for not logged users -->
{% else %}
<br><br>
<section >
<div>
</div>
</section>
{% endif %}
{% endblock %}
My folder looks like this:
1. APP_APP
2. ACTUALAPP
3. STATIC
* images
- the actual images.jpgs
4. TEMPLATES
* creating a new **{% static 'images** folder
- creating a new image here
So my VS Code is creating a new file somewhere I don't want to create it with also creating a new .jpg file which does not make sense. Why does it to that?
As it says in the docs, you can define a list of directories (STATICFILES_DIRS) in your settings if you assets aren’t tied to a particular app
STATICFILES_DIRS = [
BASE_DIR / "static"
]
Related
I sliced and diced an existing class: product__info and created a new one: product__purchase under the same parent class product product-- as such:
<section class="page-width section-{{ section.id }}-padding">
<div class="product product--{{ section.settings.media_size }} product--{{ section.settings.gallery_layout }} grid grid--3-col {% if product.media.size > 0 %}grid--3-col-tablet{% else %}product--no-media{% endif %}">
<div class="grid__item product__media-wrapper">
</div>
<div class="product__purchase-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__purchase-wrapper--extra-padding{% endif %}">
<div id="Product-{{ section.id }}" class="product__purchase-container{% if section.settings.enable_sticky_info %} product__purchase-container--sticky{% endif %}">
</div>
</div>
<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}">
<div id="Product-{{ section.id }}" class="product__purchase-container{% if section.settings.enable_sticky_info %} product__purchase-container--sticky{% endif %}">
</div>
</div>
</div>
</section>
However, this new section: product__purchase is not appearing on my development site, only the two original classes: product__media and product__info.
What I see on my development site:
Does anyone have any idea why this is the case? Could it be that I used the same id id=Product-{{ section.id}} ... for the new div class?
As always, thanks for your time :-)
I am new to Django. I have created 2 seperate views and URLs, however, when I load my development server and click on slides to open slides_detail.html, it opens sub_detail.html, at this point I have no clue what could cause that as there are no similar names which would lead to opening completely different detail page. Both slides and subcontent sits in the same HTML document, same with URLs and views. There are no errors, to show. Thanks in advance:
URLS:
path('<int:sub_id>/', views.sub_detail, name='sub_detail'),
path('<int:slides_id>/', views.slides_detail, name='slides_detail'),
Views:
# Will show specific sub content details
def sub_detail(request, sub_id):
subcontent = get_object_or_404(SubContent, pk=sub_id)
context = {
'subcontent': subcontent,
}
return render(request, 'home/sub_detail.html', context)
# Will show specific slides content details
def slides_detail(request, slides_id):
slides = Slides.objects.get(pk=slides_id)
context = {
'slides': slides,
}
return render(request, 'home/slides_detail.html', context)
HTML for slides:
{% for slides in slides %}
<div class="swiper-slide">
<div class="card">
<a href="{% url 'slides_detail' slides.id %}">
<img src="{{ slides.image.url }}" class="card-img-top img-height" alt="..."></a>
<div class="card-body bg-dark">
<h5 class="card-title text-light font-weight-bold text-center">{{ slides.title }}</h5>
</div>
</div>
</div>
{% endfor %}
HTML for subcontent:
{% for sub in subcontent %}
{% if forloop.counter|divisibleby:2 %}
<div class="row">
{% if sub.image %}
<div class="col-md-6 section-index-img">
<img src="{{ sub.image.url }}" class="rounded img-fluid" alt=""/>
</div>
{% endif %}
<div class="col-md-6">
<a href="{% url 'sub_detail' sub.id %}">
<h4>{{ sub.title }}</h4>
</a>
<p class="text-muted">{{ sub.description | linebreaks }}</p>
</div>
</div>
{% else %}
I have created 2 seperate views and URLs, however, when I load my development server and click on slides to open slides_detail.html, it opens sub_detail.html.
You did not create two separate URLs, you created the same path. Both paths will fire on the same patterns. This thus means that if you have a {% url 'slides_detail' 42 %}, for example, it will be written as /42, but this is also a valid path for the sub_detail, so when you make a request with that path, Django will "fire" the first view that matches, in this case sub_detail.
You should make the paths non-overlapping, for example:
path('sub/<int:sub_id>/', views.sub_detail, name='sub_detail'),
path('slide/<int:slides_id>/', views.slides_detail, name='slides_detail'),
I have a working solution for a template that allows for optional sidebars. Depending on the options selected by the user; significant DOM manipulations occur.
The working solution is unnecessarily large and features some code duplication. It also doesn't extend nicely.
I'm looking for a far more generic solution. One that allows for easier extending or abstracting so as to not have to repeat myself for every page that features a sidebar.
The Working Solution
{% extends "app/base.html" %}
{% load wagtailcore_tags %}
{% block content %}
{% if self.sidebar == "left" %}
<div class="row">
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
<div class="8u 12u(mobile) important(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
</div>
{% elif self.sidebar == "right" %}
<div class="row">
<div class="8u 12u(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
</div>
{% else %}
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
{% endif %}
{% endblock %}
{% block content %} is first defined here in app/base.html:
<div id="main-wrapper">
<div class="container">
<!-- <article class="box post"> -->
{% block content %}{% endblock %}
<!-- {% include 'app/includes/prev_next.html' %} -->
<!-- </article> -->
</div>
</div>
And sidebar.html looks like this:
{% load wagtailimages_tags %}
{% for sidebar_item in sidebar_items %}
<section class="box">
{% image sidebar_item.image original as img %}
<img src="{{ img.url }}" alt="" />
<header>
<h3>{{ sidebar_item.title }}</h3>
</header>
<p>{{ sidebar_item.body }}</p>
{% if sidebar_item.button_text %}
<footer>
{{ sidebar_item.button_text }}
</footer>
{% endif %}
</section>
{% endfor %}
My initial attempt at generalising it was to try to do all of the conditionals in app/base.html but I faced issues when it came to optionally the location of {{ block content }}.
Any help greatly appreciated.
If the condition to decide type of sidebar are being decided and supplied by the views.py function serving the page, then the best approach would be to simply make different template for each different page.
This solution sounds overly simple, but if correctly modularized(in terms of all the common code being kept in a basefile and being extended as and when needed), this would be the best approach. Even though the number of other templates might increase, it will give shorter load times because of smaller HTML snippets.
In case you do not want the conditional decisions being handled by views.py , you can alternatively use AJAX, and asynchronously change the template being viewed without causing a reload.
Hope this helps!
I have a base.html which i extends to other pages also. In few pages , images are displayed but in few it does not. other than images , everything like header , section are displayed.
{% load staticfiles %}
some more --like header , section
<footer>
<div id="footer">
{% block footer %}
<img src ="../../static/blog/images/git.png">
<p>© 2016 shankar.</p>
{% endblock %}
</div>
My template file
{% extends 'blog/base.html' %}
{% block content %}
<h1>Articles for {{ year }}</h1>
{% for article in article_list %}
<h4>{{ article.headline }}</h4>
<h5>Posted by <strong>{{ article.reporter }}</strong>
on {{article.pub_date|date:"F j, Y"}}</h5><hr/>
{% endfor %}
{% endblock %}
url `
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$',views.index,name='index'),
url(r'article/(?P<year>[0-9]{4})/$', views.year_archive, name='year_archive'),
url(r'article/(?P<year>[0-9]{4})/(?P<month>[0-9]{2})/$', views.month_archive, name='month_archive'),
url(r'(?P<article_id>[0-9]+)/$',views.article_detail,name='article_detail'),
url(r'^comment/(?P<article_id>[0-9]+)/$' ,views.comment,name='comment'),
url(r'^contact',views.contact,name='contact'),
]`
views
ef year_archive(request,year):
#year=str(pub_date)[0:4]
year=year
try:
article_list = Article.objects.filter(pub_date__year=year)
except Article.DoesNotExist:
raise Http404("Article does not Exists")
context = {'year':year, 'article_list':article_list}
return render(request, 'blog/year_archive.html',context)
It's because you're not using the correct src. You should let the static function handle the static files. When the url changes ../../ will not be correct anymore, depending on the path.
You should configure the static directory in your settings.py file and then reference your image like this:
<img src ="{% static 'blog/images/git.png' %}"></a>
You're loading staticfiles but you never actually use it, you should use the static template tag
"../../static/blog/images/git.png"
should be
{% static 'blog/images/git.png' %}
You should also use the url template tag..
How I can render template without extend? i have simple renderer and i want after findout this request is ajax just render goal data
my template:
{% extends "base.html" %}
{% load i18n %}
{% block extrahead %}
{% endblock extrahead %}
{% block content %}
<div class="itemBg">
<div class="itemTop">
<div class="itemDown">
<div class="rowContainer">
<div class="show att">
{{ msg }}
</div>
</div>
</div></div></div>
{% endblock %}
only i want this in render response for ajax request.
<div class="itemBg">
<div class="itemTop">
<div class="itemDown">
<div class="rowContainer">
<div class="show att">
{{ msg }}
</div>
</div>
</div></div></div>
this is my render interface
from flask import current_app, render_template
def render(template, **context):
"""
"""
return render_template(path(template), **context)
You are looking for the null-master fallback trick. Since request is available in the Jinja2 context, if you are using a library that sets the appropriate header you can simply do this:
{% if not request.is_xhr %}{% extends "base.html" %}{% endif -%}
{% load i18n %}
{% block content %}
<div class="itemBg">
<div class="itemTop">
<div class="itemDown">
<div class="rowContainer">
<div class="show att">
{{ msg }}
</div>
</div>
</div></div></div>
{% endblock %}
Put the block you want for AJAX in a separate template.
When you get an AJAX request, just render that new template. For non-AJAX requests, include it in the one that extends base.html.