Force absolute URLs in Jekyll - jekyll

Currently I'm using
<a href="{{ "/test/link/" | absolute_url }}">
to generate an absolute url:
<a href="https://www.example.com/test/link/">
Or
<img src="{{ "/test/image.png" | absolute_url }}">
to generate
<img src="https://www.example.com/test/image.png">
Is there a way or config setting to force using absolute urls for the entire site, without having to add the absolute_url filter all the time, for each a href or img src url in each page?

Related

html download attribute not working in django

I want to download an image file from HTML inside my Django app this is my code in the template.
{% for pic in pics %}
<a href="{{ pic.image.url }}" download>
<img src="{{ pic.image.url }}">
</a>
{% endfor %}
The images are rendered and everything else is working fine. When I click on the image, it opens in fullscreen instead of downloading. I am using chrome. What am I doing Wrong?

Baseurl not applying to jekyll posts.

All pages are working correctly with baseurl except my posts.
What I'm getting
url
https://pizzapgh.github.io/general/2016/08/29/example-post-three/
What I need isntead, "/katietest" before general
https://pizzapgh.github.io/katietest/general/2016/08/29/example-post-three/
In my config I have:
baseurl: /katietest
url "http://pizzapgh.github.io"
Repo
https://github.com/pizzapgh/katietest
Suggestions? I've worked with this before and all I had to do was set the baseurl. I can't seem find out what it is that's not making my post not show.
Thanks.
In _includes/post_list.hmtl you can replace two occurrences of :
<h5><a href="{{ page.url }}"...
by
<h5><a href="{{ site.baseurl }}{{ page.url }}"...
And you can do the same in _includes/post_list.hmtl.

Set a image in Symfony2 twig

I have the image in: src/WebBundle/img/img2.jpg
Im trying this but donĀ“t works:
<img src="{{ asset('WebBundle/img/img2.jpg') }}" />
Image of routes
Thank you for the patience
Better to user assets.
{% image '#AppBundle/Resources/public/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example" />
{% endimage %}
In your case just change image url to avoid any url problem.

Clickable image map in Jekyll site

I would like to add a clickable map to my jekyll site on github.
For example, a map of the US which I click to reach an anchor tag
containing text related to the state clicked.
An example of what I hope to end up with is at:
http://wilsonmar.github.io/museums-roadtrip-usa/
There are two different approaches: HTML and CSS.
Are there examples of either for jekyll hosted on github pages?
In order to generate an html image-map with Jekyll, you can use collections.
file: _us-states/alaska.md
---
name: Alaska
abbrev: AK
coord: "52,249,42,253,..."
---
Your text here
An you generate your image-map like this :
<img src="image.png" alt="Us states" usemap="#us-states" />
<map name="us-states">
{% for s in site.collections['us-states'] %}
<area shape="poly" coords="{{ s.map.coord }}"
href="{{ site.baseurl }}{{ s.url }}"
alt="{{ s.name }}" title="{{ s.name }}" >
{% endfor %}
</map>

Handling Dynamic Image Directory in Django {% include "subtemplate.html" %}

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.