I'm using the Liquid templating engine to display a summarised series of posts - at the moment I have something along these lines:
{% for page in site.posts %}
{{page.content | truncatewords: 100}}
{% endfor %}
The page content contains HTML, and using truncatewords can cause invalid HTML to be inserted in the output. I don't want to remove all of the HTML from the content (embedded videos and images should be visible), and ideally all I want is for the appropriate closing tags to be added.
I can see that merely truncating isn't going to achieve my expected outcome, so my question is: How can I truncate my HTML in order to output valid markup using Liquid?
Update
A very specific problem is that I have a code sample that's marked-up using Pigments. Now, if the truncation occurs in the middle of the code sample, it leaves several tags open, messing up the rest of the page. I'm looking for a way to truncate these posts without removing all of the code sample - just to truncate and close all open tags in the content body.
OK, so after not being able to find much in the way of doing this on the web, I cooked up my own solution utilising Nokogiri and a depth-first traversal of the parsed HTML node tree.
TruncateHTML is a simple script that allows a snippet of HTML to be truncated while preserving a valid structure.
Related
I am aware you can add and use html page custom front matter fields using the {{ page.myField }} directive but this does not work for posts (i.e. when iterating site.posts in a for loop.
My problem, what I have done ...
I created a new post in _posts with a .md extension containing new custom front matter fields (it is published and refixed correctly with date) - Seems correct
I loop all the posts using {% for post in site.posts %} - This works
When I attempt to use these using a liquid tag {{ post.myNewField }} it is not available but does show in post.content as text not a useable field.
Surely this cannot be correct. I would assume anything in the markdown in the front matter section should be accessible, as it seems to say so in the Jekyll front matter instruction
http://jekyllrb.com/docs/frontmatter/#custom-variables
Please help.
cause of my issue was UTF-8-DOM encoding when it should have just been UTF-8 encoding for .md files
I am using select2 in tagging mode to create and edit tags. There is an annoying behavior which is that there is a delay between when the page loads and when the tags appear. Since the tags can spill onto two lines, after the tags appear the whole page readjusts when the content below the tags box is pushed down.
The delay is caused by select2 converting the input HTML tag into the necessary HTML elements for each tag.
The delay could be avoided if the select2 didn't generate the HTML for the tags, but instead I generated it on the server-side and it was included in the original page load. Then the position of elements below the tags field would never change.
Is there a way to have select2 attach itself it existing - pre-rendered - HTML, rather than creating the HTML itself?
Does anyone know of a tag field components that supports this? All of the components I have seen start with an input tag and then generate the HTML dynamically using Javascript.
I could not find a satisfactory answer, so I created a JQuery plugin specifically for my use case: https://github.com/k1w1/rendered-multi-select
It has Rails helper to render the HTML for the control on the server, then the Javascript events are attached when the page loads. This results in faster and flicker free loading.
I want to achieve print functionality such that user can print out the web form and use it as paper form for the same purpose. Of course I do not need all the web page header and footer to be printed, just content of a div which take most of the page. I did play around with media print css and menage print result to look almost as original page. But the I tried to print it in another browser(Chrome) and it is all messed. (before I tried Mozilla).
For the web form I user css framework Twitter Bootstrap and I had to override its css (in print media) for almost each element individually to get some normal look in the print result.
My question is is there some way (framework/plugin) to print just what you see on the page, maybe as an image or something?
Any other suggestions are welcome.
Thanks.
If you are familiar with PHP you can try the PHP class files of TCPDF or those of FPDF.
Or there is also dompdf which renders HTML to PDF, but this will include more than just the information of one div.
And for further info here is a post on Stack where users are discussing which they think is best.
With a grails app and from a local database, I'm returning some text in a xml format.
I can return it well formed in a <textarea></textarea> tag with the correct indenting (tabulation, line return,...etc.)
I want to go a bit further. In the text I'm returning, there are some <img/> tags and I'd like to replace those tag by the real images themselves.
I searched around and found no solution as of now. I understood that you can't add an image to a textarea (other then in a background), and if I choose a div tag, I won't have the indenting anymore (and therefore, harder to read)
I was wondering if using a <g:textField/> or an other tag from the grails library will do the trick. And if so, How can I append them to a page using jquery.
For example, how to append a <g:textField/> in jquery. It doesn't interpret it and I get this error
SyntaxError: missing ) after argument list [Break On This Error]...+doc).append("<input type="text" id="FTMAP_"+nb_sec+"" ...
And in my javascript file, I have
$("#FTM_"+doc).append("<g:textField id='FTMAP_"+nb_sec+"' ... />
Any possible solutions ?
EDIT
I did forget to mention that my final intentions are to be able to modify the text (tags included) and to have a nice and neat indentation so that it is the easiest possible for the end user.
You are asking a few different questions:
1. Can I use a single HTML tag to include images inside pre-formatted text.
No. You will have to parse the text and translate it into styled text yourself.
2. Is there a tag in the grails standard tags to accomplish this for me?
No.
3. How can I add grails tags from my javascript code.
Grails tags are processed on the server-side, and javascript is processed on the client. This means you cannot directly add grails tags via javascript.
There are a couple methods that can accomplish the same result, however:
You can set a javascript variable to the rendered content of a grails tag. This solution is good for data that is known at the time of the initial request.
var tagOutput = "${g.textField(/* etc */)}";
You can make an ajax request for the content to be added. Then your server-side grails code can render the tags you need. This is better for realtime data, or data that will be updated more than once on a single rendered page.
I'm converting some existing HTML files to Slim (https://github.com/stonean/slim) and using it for the first time but I'm having problems getting lists to work in compact form (meaning all on one line rather than indented below). The docs say:
Inline tags
Sometimes you may want to be a little more compact and inline the
tags.
ul
li.first: a href="/a" A link
li: a href="/b" B link
But when I try that I get this output in the browser:
a href="/b" B
With the rendered HTML looking like this in the source:
<li:>a href="/b" B link</li:>
Any ideas why this isn't working and how to fix it?
Your syntax is correct and the output for me (slim 1.3.0) is, as expected:
<ul><li class="first">A link</li><li>B link</li></ul>
You should check your slim version and update appropriately.