adulau/art
1
0
Fork 0
mirror of https://github.com/adulau/art.git synced 2024-11-24 19:17:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix relative paths to images when a permalink is used.

Browse source 
This commit uses the Jekyll `link` tag to correctly construct the URL to
images with otherwise relative paths. Without this logic, the images
would only load when the landing page's permalink was not altered by the
user. For example, if the permalink is changed to `get-started` in the
Jekyll Front Matter, the relative URLs would become:

    get-started/assets/images/pic08.jpg

However, since the `get-started` path doesn't really exist, this would
fail to load the image.

As of Jekyll 4.0, the `link` tag is safe to use without prepending
`site.baseurl`, so this code works in all situations.
This commit is contained in:
Meitar M 2020-01-31 12:57:18 -05:00
parent 033cfa2c44
commit b8721c353e
No known key found for this signature in database
GPG key ID: 07EFAA28AB94BC85
2 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
elements.md
View file

@ -361,26 +361,26 @@ Finally, this is a <a href="#">link</a>.</p>
<h3>Image</h3> <h3>Image</h3>
<h4>Fit</h4> <h4>Fit</h4>
<span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span> <span class="image fit"><img src="{% link assets/images/pic03.jpg %}" alt="" /></span>
<div class="box alt"> <div class="box alt">
<div class="row 50% uniform"> <div class="row 50% uniform">
<div class="4u"><span class="image fit"><img src="assets/images/pic08.jpg" alt="" /></span></div> <div class="4u"><span class="image fit"><img src="{% link assets/images/pic08.jpg %}" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="assets/images/pic09.jpg" alt="" /></span></div> <div class="4u"><span class="image fit"><img src="{% link assets/images/pic09.jpg %}" alt="" /></span></div>
<div class="4u$"><span class="image fit"><img src="assets/images/pic10.jpg" alt="" /></span></div> <div class="4u$"><span class="image fit"><img src="{% link assets/images/pic10.jpg %}" alt="" /></span></div>
<!-- Break --> <!-- Break -->
<div class="4u"><span class="image fit"><img src="assets/images/pic10.jpg" alt="" /></span></div> <div class="4u"><span class="image fit"><img src="{% link assets/images/pic10.jpg %}" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="assets/images/pic08.jpg" alt="" /></span></div> <div class="4u"><span class="image fit"><img src="{% link assets/images/pic08.jpg %}" alt="" /></span></div>
<div class="4u$"><span class="image fit"><img src="assets/images/pic09.jpg" alt="" /></span></div> <div class="4u$"><span class="image fit"><img src="{% link assets/images/pic09.jpg %}" alt="" /></span></div>
<!-- Break --> <!-- Break -->
<div class="4u"><span class="image fit"><img src="assets/images/pic09.jpg" alt="" /></span></div> <div class="4u"><span class="image fit"><img src="{% link assets/images/pic09.jpg %}" alt="" /></span></div>
<div class="4u"><span class="image fit"><img src="assets/images/pic10.jpg" alt="" /></span></div> <div class="4u"><span class="image fit"><img src="{% link assets/images/pic10.jpg %}" alt="" /></span></div>
<div class="4u$"><span class="image fit"><img src="assets/images/pic08.jpg" alt="" /></span></div> <div class="4u$"><span class="image fit"><img src="{% link assets/images/pic08.jpg %}" alt="" /></span></div>
</div> </div>
</div> </div>
<h4>Left &amp; Right</h4> <h4>Left &amp; Right</h4>
<p><span class="image left"><img src="assets/images/pic09.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget tempus vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.</p> <p><span class="image left"><img src="{% link assets/images/pic09.jpg %}" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget tempus vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.</p>
<p><span class="image right"><img src="assets/images/pic10.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget tempus vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.</p> <p><span class="image right"><img src="{% link assets/images/pic10.jpg %}" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget tempus vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.</p>
<!-- Box --> <!-- Box -->
<h3>Box</h3> <h3>Box</h3>

6
landing.md
View file

@ -23,7 +23,7 @@ nav-menu: true
<section id="two" class="spotlights"> <section id="two" class="spotlights">
<section> <section>
<a href="generic.html" class="image"> <a href="generic.html" class="image">
<img src="assets/images/pic08.jpg" alt="" data-position="center center" /> <img src="{% link assets/images/pic08.jpg %}" alt="" data-position="center center" />
</a> </a>
<div class="content"> <div class="content">
<div class="inner"> <div class="inner">
@ -39,7 +39,7 @@ nav-menu: true
</section> </section>
<section> <section>
<a href="generic.html" class="image"> <a href="generic.html" class="image">
<img src="assets/images/pic09.jpg" alt="" data-position="top center" /> <img src="{% link assets/images/pic09.jpg %}" alt="" data-position="top center" />
</a> </a>
<div class="content"> <div class="content">
<div class="inner"> <div class="inner">
@ -55,7 +55,7 @@ nav-menu: true
</section> </section>
<section> <section>
<a href="generic.html" class="image"> <a href="generic.html" class="image">
<img src="assets/images/pic10.jpg" alt="" data-position="25% 25%" /> <img src="{% link assets/images/pic10.jpg %}" alt="" data-position="25% 25%" />
</a> </a>
<div class="content"> <div class="content">
<div class="inner"> <div class="inner">