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>
Related
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?
Am creating my first Jekyll (using version 4.0.0) powered site. Problem is the variables in Front Matter are not recognized.
HTML in _includes (writing-post-featured-image.html)
<figure>
<img class="feat-img" src="{{ site.baseurl }}/assets/images/{{ include.images }}" alt="{{ include.alt | default: 'lorem ipsum' }}" />
<figcaption>{{ include.caption }}</figcaption>
</figure>
In _layout having layout for text based post pages (writings-post.html)
{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
Last, in .md file (under _posts) the following Front Matter
layout: writings-post
title: my title
permalink: /writings/:title
featured-image: photo.jpg
featured-image-alt: about photo
caption: photo caption
Output is empty
<figure>
<img class="feat-img" src="" alt="lorem ipsum" />
<figcaption></figcaption>
</figure>
Please help understanding why so. Thanks in advance.
Your syntax is incorrect.
1.) As your passing variables from your page, your include tag should look like this :
{% include writing-post-featured-image.html
image=page.featured-image
alt=page.featured-image-alt
caption=page.caption %}
2.) In your include you have a syntax problem with include.images that should be include.image.
Note : as you're passing existing variables (not computed ones), you can skip passing them to your include, because from within an include you can see page's variables.
{% include writing-post-featured-image.html %}
And your include :
<figure>
<img class="feat-img"
src="{{ site.baseurl }}/assets/images/{{ page.featured-image }}"
alt="{{ page.featured-image | default: 'lorem ipsum' }}" />
<figcaption>{{ page.caption }}</figcaption>
</figure>
The correct syntax on the page of the post is:
{% include writing-post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}
Note the page. syntax, instead of the post. syntax. However, when you have a loop in your layout, you can use this:
{% for post in site.posts %}
{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
{% endfor %}
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.
I have started a small website with a few pages and a couple of blog posts. It is hosted on my organization's server and I ftp'ed all contents of _site/ directory into a subdirectory of the website. Hence the Jekyll site is at http:// myusername.foobar.foo/thiswebsite/ .
In my _config.yml
baseurl: "/thiswebsite"
url: "http:// myusername.foobar.foo"
Now all pages show up correctly. But blog posts don't.
In YAML front matter of each blog post:
permalink: /:title.html
Then I ended up generating links on index.html page to blog posts at http:// myusername.foobar.bar/blog-title.html but the actual blog posts are found at http:// myusername.foobar.bar/thiswebsite/blog-title.html. So if people click on the links found on index.html they will see 404.
On index.html I have:
{% for post in site.posts %}
<h2>{{ post.title }}</h2>
<blockquote>
{{ post.excerpt }}
</blockquote>
{% endfor %}
I would have thought {{ post.url }} would automatically insert correct URL for the posts, but apparently that's not happening. :(
Where did I screw up?
(Jekyll version 3.1.2)
Note: blank space after http:// is intentional as StackExchange thinks I'm posting links and that's apparently not allowed. In my actual markdown and html they are proper URLs.
Link to a collection item (post are collections items) or pages :
eg : {{ post.title }}
or {{ post.title }}
And it's the same for resources links (image, script, css, ...).
eg : <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
or <script src="{{ site.baseurl }}/js/script.js"></script>
I wrote my posts and added <!-- more --> to where I want to stop the content from showing. After this, octopress shows a "read on" link, I want this not to show. I think this snippet (inside _includes/article.html file) is the key:
{% if excerpted == 'true' %}
<footer>
<a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
</footer>
{% endif %}
I tried to delete this snippet and the link still shows. Tried to delete excerpt_link from `_config.ylm' and the html is still generated for the link.
This is the way to do it. Be sure to do it in sources/_includes/article.html and not within .themes/themeName.