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" %}
Related
I'm reading a very large API, one of the fields I need, have "a" tags embedded in the item in the dictionary and when I pull it into my template and display it, it shows the "a" tags as text.
exp:
"Bitcoin uses the SHA-256 hashing... ...such as Litecoin, Peercoin, Primecoin*"
I would like to wrap this in HTML so when it displays on the page it has the actual links rather than the 'a' tags and the URL.
What I'm looking to get:
"Bitcoin uses the SHA-256 hashing... ...such as Litecoin, Peercoin, Primecoin*"
I figured it out, I used the Humanize function with the |safe tag.
Pretty simple answer.
In the settings.py add 'django.contrib.humanize' to the INSTALLED_APPS:
**INSTALLED_APPS = [
'django.contrib.humanize', ]**
In the HTML Template add
{% load humanize %}
For the data you want to format use |safe
{{ location.of.data|safe }}
This will read the text as HTML.
I'm using Jekll and kramdown to build a static side.
I am often repeating the same large paths to things in assets in image tags, like:
Can I somehow save the /assets/foo/bar/2019-03-17/more/stuff portion in a per-page variable so I can refer to it succintly in the markdown, like:
Yes, you can set it in the front matter. You can set custom variables for each page.
---
... other stuff in front matter
myPath: /assets/foo/bar/2019-03-17/more/stuff
---
<p>........ </p>
but it simply displays
.....
[Hello World]({% post_url 2015-01-19-soccer %})
.......
what am I doing wrong?
Since you used a mix of Markdown and HTML, which is causing the markdown processor to ignore anything in between the HTML blocks.
Markdown is also sometimes not processed when you have HTML right above the Markdown. (This is the case for you, since your example shows you have closed off the <p> tags)
There are a few ways around this.
Make sure there is a newline in between any HTML and Markdown, this will not show up as a <br> or a <p> in the final output, but rather ensures that the processor will convert the Markdown correctly.
So you should have something like this:
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
Notice the extra line there between the first <p></p> and the Markdown.
Use only HTML (this is as answered by user #topleft)
Use only Markdown, since <p> tags are supported.
Try the markdown=1 HTML attribute.
Markdown processors like Kramdown allow you to add an explicit tag to tell the processor to go through HTML blocks and process any Markdown there. I'm assuming you're using the default (which I believe is Redcarpet) and couldn't find the links on whether this is supported. But you can try this:
<div id="someDiv" markdown=1>
[This is a Markdown link that will be parsed](http://www.example.com)
</div>
You are using markdown language here, it won't work in html. You need to use that instead :
Hello World
site.baseurl default is empty
you can change it in _config.yml to suit your needs
for instance :
baseurl: "me/blog"
I am using Octopress and I know that in order to add an image in my post, instead of writing:
<img src="src" alt="alt" class="class" />
I can write:
{% img class src alt %}
And, instead if writing:
text
I can write:
[text](href)
But how can I write:
text
?
If this is not possible and the only solution is to write the html tag, where and how can I add ruby code translate this for example: [text](href target) to this: text?
In addition, where can I find a list of all those html octopress shortcuts?
This is actually controlled by the Markdown engine used to process the text rather than any Octopress code. Depending on the engine you are using, you can write
[text](href){: target="target" }
This is called an "inline attribute list", and is an extension to the Markdown syntax. It is supported by Maruku, as well as Kramdown.
(Note that Maruku is Jekyll's default Markdown engine, so this syntax is supported if you haven't touched this aspect of the configuration.)
Use the Markdown Syntax:
[text](#target)
For text
[text](href){: target="target" }
The {% img class src alt %} is a octopress tag, see the plugin docs for more tags.
The [text](href) follow the markdown sintax, and does not let you add classes, attributes, or ids to elements.
So to workaround the target problem use the snipet below in your custom header layout, and added the #_blank anchor at the end of the url, to open in a new window.
<script type="text/javascript">
function addBlankTargetForLinks () {
$('a[href^="http"],a[href*="#_blank"]').each(function(){
$(this).attr('target', '_blank');
});
}
$(document).bind('DOMNodeInserted', function(event) {
addBlankTargetForLinks();
});
</script>
I'm creating a "Q & A" website. On the questions page all of its answers could be seen (with pagination). I need to go straight down to answers (in the page) from other pages as well. I've tried implementing named anchors but unable to direct to page section.
Answer's get_absolute_url() returns url in the form:
www.example.com/question-id/question-slug?page=no#aID <!-- EDITED -->
An example url:
www.example.com/question-10/what-is-this?page=2#a20 <!-- EDITED -->
and in html:
{% autopaginate answers 10 %}
{% for answer in answers %}
<div>
<a name="a{{answer.id}}">Answer</a> <!-- EDITED -->
{# answer body goes here#}
</div>
{% endfor %}
{% paginate %}
It redirects to the correct page but not to the correct page section.
EDIT: Result! When clicked, After going to the page section, it bounces to the bottom of the page
A surprisingly little-known fact is that anchors can go to any element with an ID on the page; it doesn't have to be an anchor element. So you might just put the ID on your div:
<div id="a_{{answer.id}}">
<span>Answer</span>
{# answer body goes here#}
</div>
(Obviously, use whatever element makes sense around the answer header; the span above is just for illustration.)
As far as I know, there's nothing wrong with using anchors (although anchors with content tend to exhibit link-like behaviors -- rollovers and such -- if you're not careful with your CSS), but just as an option, you have this other alternative as well.
http://www.example.com/question-10/what-is-this#a_20/?page=2
<a id="a_{{answer.id}}">Answer</a>
There is no mechanism of path parts (/) or query strings (?) in a fragment identifier.
Is the pagination parameter supposed to be sent to the server-side? If so, that's an easy fix:
http://www.example.com/question-10/what-is-this?page=2#a_20
If not; if you're doing client-side pagination, which is why the query was appended as part of the fragment identifier, then you've got trouble.
You can't link to part of a document and include extra parameters for client-side-scripted pagination: you can have a fragment identifier that points to a real identified element on the page, or a fragment identifier being used as a hack to pass parameters to script, but you can't have both at once. The fragment you have specified is a single long string, and can only be matched by:
<a name="a_20/?page=2">foo</a>
(I used the old-fashioned name attribute here instead of the usually-preferred id attribute because this:
<div id="a_20/?page=2">foo</div>
is invalid. id attributes cannot include arbitrary punctuation characters; they are NAME tokens which may only be alphanumerics, _, ., - and : (though the latter is inadvisable). If you wanted to specify other types of character they would have to be encoded in some application-specific way.)
a_{{answer.is}}
may be you have a typo - iD ?
a_{{answer.id}}