I have an _includes directory in my Jekyll project and one of the .html files in that directory needs to reference images from a icons directory outside of _includes, e.g.,
{% include img/icons/facebook.svg %}
Jekyll fails to compile, indicating it can't find the directory. I could add the images to the _includes directory, but I'd rather not if possible. Does anyone know if this can be done?
Thanks!
To include images inside an include, we can refer to them directly with HTML, there is no need to make use of the include tag, so in the include code you just use:
<img src="/img/icons/facebook.svg">
or if you want a full path:
<img src={{"/img/icons/facebook.svg"|absolute_url}}>
update
Problem here is in the include tag usage, it is meant to:
include the content from another file
not to include files.
I actually put my SVG files to the _include/svg folder to achieve exactly what you want. In this case you would save a couple of HTTP-requests which speeds your site up significantly (at least my page speed values were awesome).
That sad, with newer Jekyll versions you are not longer required to put includes into the include folder.
You can use the include_relative tag:
{% include_relative svgs/facebook.svg %}
The docs say:
...the inclusion is specifically relative to the file where the tag is
being used. For example, if _posts/2014-09-03-my-file.markdown uses
the include_relative tag, the included file must be within the _posts
directory or one of its subdirectories.
Unfortunately you cannot use the .. operator to i.e. move out of _posts. For me this a serious drawback. But if you use it in your layouts it might work well for you.
Here are the docs.
Related
I have several projects which I document with Sphinx. The contents of index.rst are identical in each of them (I use some substitutions for project name and include another rst file with the list of modules). So I thought I could remove this file from most projects and only keep it in one shared project to which the others can find an absolute path during build.
However, the master_doc config does not let me enter an absolute path, and it even rejects relative paths that go "out of scope of the single project". I even tried adding the shared folder in sys.path, but it still did not help.
I've seen many questions asking the opposite, i.e. using multiple index.rst files in a single project. But that's not my case.
Do you have any ideas on how to get this working?
The structure of the family directories, as outlined in the docs requires every image to be placed inside the images directory. However, the OptaPlanner documentation contains both images and asciidoc files in the same directory per chapter. Please see the directory structure below:
https://github.com/kiegroup/optaplanner/tree/main/optaplanner-docs/src/main/asciidoc
Changing the current structure is undesired due to existing references from external repositories (breaking backward compatibility).
Is there a way of configuring Antora to pick up images from the pages directory and its subdirectories?
No.
The best-practices answer: Antora requires a specific directory structure and you have to adopt it.
You can adjust the Asciidoc markup to achieve this goal:
image::./relative/path/to/image.jpg[]
However, doing so could break your compatibility.
Antora 3 (currently in alpha) will provide symlink support, so you could create symlinks in the images folder that point to the images within the pages folder. Once that is in place, you can refer to those images like any other image in the images folder.
With Antora 3, you also could write an extension that locates images within the pages folder and add them to the contentCatalog as if they had been in the images folder. That would be notably more effort.
I see different people naming HTML files index.html or index.tmpl. Both seem to work the same, what's the difference? I see no official documentation about it. Can extension names just be chosen arbitrarily?
The file parsing function and method expect full file names. The template package does not impose any restrictions or make any assumptions about the extensions used in the file names.
I'm using Laravel locally with XAMPP, with some code written by someone else. After installing everything I get the following directory tree:
xampp
...
htdocs
myproj
.git
app
assets
classes
commands
config
controllers
database
lang
models
start
storage
tests
views
bootstrap
provider
public
sphinx
vendor
wpplugin
...
...
I know the code uses Zurb Foundation (among other tools), with SCSS files.
In XAMPP Control Panel, in the Apache httpd.conf, I define DocumentRoot as C:/xampp/htdocs/myproj/public and this works fine.
The files xxxxxx.blade.php under views/layouts contain blade lines that look like:
{{ stylesheet_link_tag('yyyyyy') }}
Googling this, I think (not sure) it's using something called CodeSleeve to resolve yyyyyy, which, as I understand, look for yyyyyy.css files under app/assets/stylesheets. In this directory I can see both yyyyyy.css files and _yyyyyy.scss files, and I can see the former is presumably calling the latter with a require command in an alleged comment.
As long as I update controllers and/or views, I can see the changes reflected immediately under localhost in the browser. However, any attempt to modify a _yyyyyy.scss (even as much as adding a space) - results in an error in browsing, losing all the styling etc.
My question is: What is the mechanism that presumably converts the SCSS files into CSS in real-time, and how can I do testing locally with modifying the SCSS files?
It's Notepad adding the UTF-8 BOM in the beginning of the file!!
When editing with Notepad++ and saving the new file with no BOM, styling comes back again.
(Thanks to Andy who helped solving this)
Got a trouble when including some external javascript code (example can be jquery.treeview plugin with css and images included) - in vendor/assets (where this should go) it seems it doesnt work with images. Any experience or example of doing this?
I suspect it's because you need to correct /images/foo.jpg to the new scheme of /assets/foo.jpg
If not, please include logs and examples.
Along the lines of what Zach said, the solution I've used is to modify the js/css files to be erb templates, and used asset_path('treeview/foo.jpg') to replace '/treeview/foo.jpg', and move all plugin images to the app/assets/images/treeview folder.
This will make everything work swimmingly, but it is less than ideal in requiring hacking up plugins before they work with the new system.
Of course, you can also keep your CSS and JS files in /public/javascripts and just javascript_include_tag them as usual, but you'll lose the precompile/bundle/compress functionality the asset pipeline provides.