In a .md file we can use the following format to display an image:
<img src={{ “images/joo.jpg” | relative_url }} />
But in a .rb file how to display an image which is in images folder ?
In my case this image is not found. Problem of path solved with relative_url in .md file
function _addMarkerToMap(leafletItem, map){
var m = leafletItem.value;
if ('label' in m){
var result = L.marker([m.latitude,m.longitude]).bindTooltip(m.label,{permanent:true}).addTo(map).openTooltip();
} else {
var result = L.marker([m.latitude, m.longitude]).addTo(map);
}
var potentialPopup = "";
if('popupContent' in m){
potentialPopup += m.popupContent;}
if('href' in m){
potentialPopup += '<a href="' + m.href + '">' +
'<img src="' + newWindowImgSrcBase64 + '"></img></a>';
}
if ('image' in m){
potentialPopup += "<img src='" + m.img + "' />"; <<<< doesn't find the image !!!!
}
if(potentialPopup){
result.bindPopup(potentialPopup).openPopup();
}
if(!('center' in tagInputArg)){
// If the user didn't specify a center, infer from marker
map.panTo(new L.LatLng(m.latitude, m.longitude));
}
}
You asked “in a .rb file how to display an image”, but the code you show is Javascript? Assuming you meant Javascript, then you can use Liquid in a Javascript file by adding empty YAML front matter. For example (untested code):
File mycode.js:
---
---
var imagename="toy.jpg";
var imagepath = '{{ "/image" | relative_url }}/' + imagename;
console.log(imagepath);
The generate script at _site/mycode.js should output /image/toy.jpg to the console.
Agreed. This is confusing. Is it perhaps a plugin that includes JS code.
It is not clear whether that code is yours or from an external plugin.
Break the problem up into smaller pieces. The whole JS snippet is a lot to read and the only line that matter is the img tag one. So focus on getting that to work outside of that large function.
You can use the approach from the previous answer to add a liquid variable into the JS
If your problem is how to write a plugin that uses the baseurl in your ruby code, have a look at the Jekyll plugin docs on the Jekyll website. A plugin gets passed the site object so you could get fields like baseurl off of that.
require ‘securerandom’
require ‘json’
module Jekyll
class LeafletMap < Liquid::Block
def initialize(tag_name, input, tokens)
super
if input.empty?
@input = {}
else
@input = input
end
if !(input.is_a? String)
raise "leaflet-map input argument must be a String"
end
end
def render(context)
text = super
if !(text.is_a? String)
raise "leaflet-map content between the tag blocks must a String"
end
leaflet_providers_js_content = File.read(
File.expand_path("./leaflet-providers.js", File.dirname(__FILE__)))
map_js = File.read(
File.expand_path("./leaflet-map.js", File.dirname(__FILE__)))
map_html = File.read(
File.expand_path("./leaflet-map.html", File.dirname(__FILE__)))
@input = parse_liquid_output_in(@input, context)
id = SecureRandom.hex
map_js = map_js % {id: id,
leaflet_providers_js_content: leaflet_providers_js_content,
tag_input_arg_json: @input,
inside_block_leaflet_items: text}
map_html = map_html % {id: id,
leaflet_map_js_content: map_js}
map_html
end
end
---
permalink: /meyrin/
layout: splash
title: Lieux à Meyrin
classes: wide
---
<script>
const BASE_URL = '{{ site.baseurl }}';
</script>
...
Is it the answer to your question ?
That doesn't work !
