I have a part of my html that I use in more than 5 pages of my site. I have extracted it out subtemplate.html and I now {% include "subtemplate.html" %} in all those templates. Plus I use sorl-thumbnail for my images.
The problem is these pages have different urls and that determine my image directory.
myApp/
images/
mysite/
manage.py
requirements.text
Now these are there urls with their image directory
http://127.0.0.1:8000/mysite/ <img src=".{{ im.url }}" />
http://127.0.0.1:8000/mysite/more/10 <img src="../..{{ im.url }}" />
http://127.0.0.1:8000/mysite/new/more/10 <img src="../../..{{ im.url }}" />
This is working if I am not using include but if forces me to use same code in all the pages and that is costly for me. The "subtemplate.html" has it image directory set to <img src=".{{ im.url }}" /> and so the images get displayed in my app's home page but not on other pages.
But now that it is obvious that I have to use include, what is the best way to for me to change image directory dynamically base on the page including it?
You can just use
<img src="/mysite{{ im.url }}" />
The slash / will force the path to always start from the root directory.
Related
Basically i'm building a jekyll site with a footer containing some SVGs for social icons but the problem is that the first svg(they are saved inside the icons/<socialNames>.html files) will replace all the other SVGs when rendered in the browser. So instead of having a twitter icon, snapchat icon, facebook.icon, etc, four twitter icons are being rendered. The problem is that the first svg is replacing the others, but why? is there an alternative way to import SVG files?
I've tried using firefox, chrome and safari all with the same result. Tried making a seperate svg file and using {% include icons/<fileName>.svg %} but didn't fix it.
Here is my footer.html file:
<nav>
{% include icons/twitterIcon.html %}
{% include icons/snapchatIcon.html %}
{% include icons/facebookIcon.html %}
{% include icons/instagramIcon.html %}
</nav>
imgur link to how chrome displays the footer: https://i.imgur.com/VBYNHqd.png
I expected four different svgs instead the first svg is being rendered four times. Why is this happening? is there a workaround?
First of all, I think you need to try a different approach.
Create a folder in the root of your project called "_data" and create a new file in there called content.yml or whatever you want to call it.
Add the following in the content.yml file: - Note, this can also be .json or .csv.
social:
- name: "Twitter"
link: "http://twitter.com"
icon: "/link/to/image.svg"
- name: "SnapChat"
link: "http://snapchat.com"
icon: "/link/to/image.svg"
- name: "Facebook"
link: "http://facebook.com"
icon: "/link/to/image.svg"
Add the following syntax where you want your Social links to be appear.
<nav>
{% for social in site.data.content.social %}
{{ social.icon }}
{% endfor %}
</nav>
In your _includes/icons folder, save the SVG files as actual SVGs and not as an .HTML file and place it in your images or assets folder.
This way your HTML markup is much cleaner.
Hope this helps.
I have a template home.html which is the view of an app in Django. Now, I've added some templating in the html file to allow dynamic generation of HTML. For example I use {% load static %} and then href="{% static "path/to/resources" %}". So, when I open the app, after running the server, the path is dynamically created.
Now, the problem is that the static files, that are dynamically loaded, also need to load other static files (and extend a template as well). I thought that DjangoTemplating might be working recursively, and will work on the called file too, but sadly that is not true.
So, what should I do to make sure that all my templating logic is taken into consideration by Django, and is allowed to run?
home.html snippet:
{% load static %}
<area alt="andhra" title="Andhra Pradesh" name="andhra" href="{% static "personal/pages/andhra.html" %}" shape="poly" ... />
andhra.html looks something like:
{% extends "personal/post.html" %}
{% blockcontent %}
<style>
#slider
{
width: 80%;
....
<div class="carousel-inner">
<div class="carousel-item active">
{% load static %}
<img class="d-block w-100" src="{% static "personal/images/andhraImages/1911-1915.jpg" %}" alt="First slide">
</div>
...
{% endblock %}
Which wants to extend the template:post.html which has {% blockcontent %}and {% endblock %} in it's body.
The andhra.html is not being template-processed. That is, when I open the app home.html is loaded correctly, but when I go to andhra.html from home.html, it isn't processed by DjangoTemplating at all.
So, as Daniel Roseman said in the comments, loading the files as a static file won't work. We want django to render them. So, I created a function state in my views.py as :
def state(request,state):
return render(request,'personal/pages/'+state+'.html')
That means it tries to render a file at templates/personal/pages/<state>.html. Now my urls.py looks like:
urlpatterns = [
path('',views.index,name='index'),
path('<state>',views.state,name="state")
]
Note that this belongs to the app polls. Now, since the urls.py of mysite has polls/, thus now the link to these views will be accessible by localhost:8000/polls/<state>.
Now at every place I wanted a static link, I made a dynamic one by:
href="{% url 'state' 'uttarakhand' %}"
where 'state' is the name of the urlpattern and 'uttarakhand' is the input value.
I'm trying to serve an image on my Django web app, but it seems to be giving me a broken image link. I put the picture I want to serve in the static folder but the hello.html is in templates folder , hoping that would work although it didnt. Here is the hello.html
{% load static %}
<html>
<body>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<input type="submit" value="Upload">
<p>Hello</p>
{% load static %}
<img src="{% static "filecomparison/Example.jpg" %}" alt="My image"/>
</form>
</body>
</html>
This is what I see on the website
I'm new to django and I've been reading guides and watch youtube videos but they dont seem to help me to do what i actually i want, any help is appreciated
When you're using django you have to put images, CSS, JS, etc. in a static files directory. Read up on this: https://docs.djangoproject.com/en/2.0/howto/static-files/
Make sure you load static files in your HTML with the line {% load static %} at the top!
How can I add multiple images on a page?
I want to have pages with 3-4 paragraphs and under the paragraphs I want to have multiple images like a small photo gallery, I found a extension for the images in bolt lib but it is more photographic oriented and I wander if it is possible to do it simpler then using the plugin... the curiosity is if boltcms can do this with default build.
In your contenttypes.yml setup file, add an imagelist to your fields, something like this:
gallery:
type: imagelist
label: "Gallery Images"
Then in your frontend template you print them out in the style that your gallery plugin needs, here's one that uses magnific as an example:
{% for image in record.gallery %}
<a href="{{ thumbnail(image, 1000, 1000) }}">
<i class="fi-arrows-expand hide"></i>
<img src="{{thumbnail(image,150,100)}}">
</a>
{% endfor %}
If you want to use the lightbox plugin that is included in the default Bolt theme, #Ross' for loop can be a little simpler:
{% for img in record.gallery %}
{{ popup(img, 150, 100) }}
{% endfor %}
Following the Jekyll Collections documentation, I wrote the following code in _config.yml
_config.yml
collections:
- popular_posts
So when I print {{ site.collections }}, the output is "popular_posts".
I also made a folder called "_popular_posts" at the same level as "_posts".
_popular_posts contains two .md files with some YAML front matter, same as a post.
However, if I print {{ site.popular_posts }} or {{ site.collections.popular_posts }}, there is no output.
How do I have Jekyll recognize the .md files in that directory so that the following code will work?
{% for popular_post in site.popular_posts %}
<a href="{{ popular_post.link }}">
<h1>{{ popular_post.title }}</h1>
<img class="pop-img" src="{{ popular_post.image_url }}">
</a>
<span id="pop-order"><span class="pop-current-popular_post-number">{{ popular_post.number }}</span>/5</span>
{% endfor %}
It's quite easy! You're on the right track. In your _config.yml:
collections:
- popular_posts
This will tell Jekyll to read in all the files in _popular_posts.
If you want each of those two files to have a corresponding output file (like how _posts works now), you'll want to change your _config.yml to:
collections:
popular_posts:
output: true
This will produce files at /popular_posts/filename1.html and /popular_posts/filename2.html, one page for each post.
Collections are only recently up on GitHub Pages so if you were trying this there, it would have failed.
Check out jekyll-help for more help if you need it!