I need to put an image and text side-by-side in a rst document where I also use Jinja2 for text replacement. I tried to solution given HERE (see also incorrect(?) documentation HERE) but this does not seem to work.
Here is what I have in the rst file:
|myimage| {{ name }}
{{ "-" * name|length }}
...
.. |myimage| image:: /_images/myimage.png
:width: 40%
but after rendering it looks like this:
without showing the image, but literally the text "|myimage|". What is the problem here?
Related
Well, I'm trying to figure out how could I display highlighted syntax.
But actually I have two main issues. The principal one is that if I show the post.content using the template pipes:
For example: {{ post.content | markdownify }}
The following content is shown:
As you can see, the blocks of the main page is shown with a white background. While the posts are shown with dark background. I'm comparing the two templates to see if I'm missing something, but I don't see the thing I'm missing (I think is a CSS (missing include) problem).
Note: I already tried to include js.html from the theme. But I doesn't do so much.
Also, the other problem is that if I use more pipes to cut the content (because I don't want to see all the content), using: strip_html | truncatewords: site.post-preview-words in the {{ post.content | markdownify }} pipe. The following occurs:
Using only truncatewords the main page styles are broken.
Using also strip_html the contents are shown as plain content.
I know why this is happening. Is there any gem/plugin to truncate the content taking care of unclosed html tags? Is there any approach using the default pipes of Jekyll?
This is the theme I'm actually using: https://github.com/le4ker/personal-jekyll-theme
This is my main Github.io page: https://z3nth10n.github.io
I'm working with jelkyll and I want to highlight the heading with a predefined liquid variable in the front matter of the specific post.
So in my post.md file I have this:
---
title: hello
color: aaa
---
Next I have a post.html file with the following code:
<h1 class="page-title">{{page.title}}</h1>
Highlighting it a standard yellow does work:
<h1 class="page-title" style="background-color:yellow">{{page.title}}</h1>
But when i change yellow with #{{post.color}} it doesn't work. I also can't seem to move the color around. I want to achieve something like here is done with the word "rams".
You can reach your color with {{ page.color }}.
The following Asciidoc code creates an image (with suitable styling etc) such that if you click on it, you open the image:
image:./myimage.jpg[my alt text, role="my css styling", link="./myimage.jpg"]
Note the path to the jpg file ./myimage.jpg is duplicated. This is inelegant, invites typos, and if the path is long it can become quite inconvenient to maintain.
My question is this:
is there a neat way to achieve this effect that does not require duplicating the path to the image, so that the path to the image is included precisely once in the code?
Thank you.
This is possible by defining an attribute:
:myimage: ./myimage.png
image::{myimage}[my alt text, role="my css styling", link="{myimage}"]
(also note: :: instead of a single :).
This becomes something like the following when run through AsciiDoctor:
<div class="content">
<a class="image" href="./myimage.png"><img src="./myimage.png" alt="my alt text"></a>
</div>
This is obviously more text, but as you mentioned, maintenance (certainly for long file names or URLs to external images) becomes easier.
Be aware that the space between :myimage: and ./myimage.png is required.
Also, if you redefine the attribute later in the document, it will only impact the next uses of the attribute. Thus,
:myimage: ./myimage.png
image::{myimage}[my alt text, role="my css styling", link="{myimage}"]
:myimage: ./myimage2.png
image::{myimage}[my second alt text, role="my css styling", link="{myimage}"]
will render two different images: the second attribute definition doesn't override the first one.
Though one may prefer different attribute names in such cases.
I couldn't see how to do this in pure Asciidoc and would still welcome input on the matter. In the meantime, I worked around the problem.
I'm in Jekyll so I used a Liquid template. I placed a file myimage in the _includes directory
image:{{ include.p }}[{{ include.t }}, link="{{ include.p }}"]
and invoked it with
{% include myimage p="image-name.jpg" t="alt text" %}
This is actually a slight simplification. In full, myimage is
[.cssstyling]#image:{{ include.p }}[{{ include.t }}, link="{{ include.p }}"]{% if include.c != null %}_{{include.c}}_{% endif %}#
and the invocation is one of the following:
{% include myimage p="image-name.jpg" t="alt text" %}
{% include myimage p="image-name.jpg" t="alt text" c="optional caption" %}
I have a Django template which looks like this:
<div class = 'description' contenteditable = 'true' placeholder='{{my_placeholder}}'>
</div>
The problem is that Django inserts blank spaces in div so that the code below yields
A
B
instead of AB:
alert('A' + $('.new').find('.description').html() + 'B');
If I rewrite the HTML code as follows (by bring </div> on the same line):
div class = 'description' contenteditable = 'true' placeholder='{{my_placeholder}}'></div>
...the issue goes away. However, I do like the HTML structure where the closing is on a new line. How can I keep this structure so that the element is really blank and I can see the placeholder value ?
You can use {% spaceless %} to remove whitespace between HTML tags:
{% spaceless %}
<div class = 'description' contenteditable = 'true' placeholder='{{my_placeholder}}'>
</div>
{% endspaceless %}
More about {% spaceless %} here.
Solution with spaceless template tag is fine if you've got only few spots with urgent need to eliminate whitespaces, but you should not have too much of them or wrap entire content in spaceless.
My point is that it's JavaScript work to be aware that content might contain whitespaces, so just use something like trim() function for inner HTML:
alert('A' + $('.new').find('.description').html().trim() + 'B');
Other than that, indented code with newlines like you've got is perfectly fine for readability purposes, however, I suggest minifying it on production with tools like django-htmlmin that will squash your templates when it reaches the user.
Ok, so let's say I use listdir to make an object of pictures, their names, sizes and their file names. The object is parsed so that each file name is item.values()[0]['item']. I am trying to do:
{% for item in banners %}
<h3>{{item.keys()[0]}} size {{item.values()[0]['size']}}:</h3>
<div>
<img src="{{url_for( 'static', filename= 'banners/{{item.values()[0]["item"]}}' )}}" />
</div>
{% endfor %}
But it is not working, replacing {{item.values()[0]["item"]}} with a specific file name is working and I can see that the file names are in the object, yet it will not generate the image, instead it says it failed to load the given url and the urls are weird, for example one shows up like:
<img src="/static/banners/%7B%7Bitem.values%28%29%5B0%5D%5B%22item%22%5D%7D%7D%7Csafe">
Something to do with it interpreting the characters as is instead of what they are to represent, but I cannot figure out the syntax. Thanks.
You are already in a {{ }} block, so nesting more of those is incorrect. I think it should be something in the lines of :
filename = 'banners/' + item.values()[0]["item"]