I have an html list element that renders blogposts as a list.
<ul class="posts">
{{ range .Data.Pages -}}
<li>
<span class="postlist_container">
{{ .Title }}
<time class="pull-right post-list" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> </span>
</li>
{{- end }}
</ul>
The blogposts are written in markdown (well Rmarkdown) and I specify a source image that should appear in the list.
---
thumbnail: "/post/source/image_tn.jpg"
---
I managed to get the image rendered alongside the title of the post with adding an tag inside the list.
<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">
This is not ideal since there is a bullet point, then title, date and image. What I would like is that the image replaces the bullet point.
I have read about using CSS for this, but the examples always use an absolute path to one image, e.g.
.posts {
list-style-image: url("source/image.jpeg");
}
Is there a way to refer to the image from the Param.thumbnail inside the markdown file?
This didn't work:
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
Any help would be greatly appreciated.
To make your CSS style sheet use the markdown, you need to include it inside the HTML templates.
insert once inside your template the rule(s) you want to update on the fly (best is to insert inside <head>, but anywhere else will work
<style>
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>
instead
<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">
Best is to read about the template tutorial from blogdown
https://bookdown.org/yihui/blogdown/templates.html#a-minimal-example
The partials/ directory is the place to put the HTML fragments to be reused by other templates via the partial function. We have four partial templates under this directory:
header.html main defines the <head> tag and the navigation menu in the <nav> tag.
if you read further, you can see that the {{ partial "head_custom.html" . }} is the file (head_custom.html) where you might insert
<style>
.posts {
list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>
Instead of using list-style-image, why don't you use one of the pseudo elements? Like so!
li{
position: relative;
padding-left: 5px;
}
li::before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}") no-repeat center center;
}
Hope this helps.
Related
Using the guidance linked to at Add template for taxonomies to Blogdown default theme I was able to add tags to show-up at the top of my posts and create a /tags page -- for my lithium themed hugo blogdown website.
How can I have the post tags show-up in the summaries of my lithium themed site (i.e. so they show-up on the home page)?
(https://www.bryanshalloway.com/ ; source code on github)
First, add the following HTML to your layouts/_default/list.html template, inside the <article> tag and after the <div class="summary">.
{{ with (.GetTerms "tags") }}
<div class="tags">
{{ range . }}
<div class="tag">
{{ .LinkTitle }}
</div>
{{ end }}
</div>
{{ end }}
Then to make it look better, you can add some CSS similar to this:
.tags {
display: flex;
flex-flow: row wrap;
gap: 8px;
}
.tags .tag {
/* override the `margin: auto;` rule which applies to all divs and iframes,
* defined in main.css */
margin: 0;
font-size: small;
}
Here is how it looks with the code I provided:
example image
This issue has caused me some headaches. For a jupyter lab workshop, we used
<details></details> to provide more information on click.
However, when the notebook was converted to HTML via nbconvert, the drop-down arrows would only show in Chrome, not Firefox.
Have a look at this (Firefox):
In Chrome:
This is caused by the following Bootstrap element ..
summary {
display: block;
}
..which is added to the HTML output.
To fix the issue, the following code must be added to the converted HTML:
<style type="text/css">
/* Fix details summary arrow
not shown in Firefox
due to bootstrap
display: block;
*/
summary {
display: list-item;
}
</style>
It is possible to create a nbconvert template that adds this automatically.
Create the a file called nbconvert.tpl with the following contents:
{% extends 'full.tpl'%}
{# this template will render cells with tags highlight,
highlight_red and hide_code differently #}
{% block header %}
{{ super() }}
<style type="text/css">
/* Fix details summary arrow
not shown in Firefox
due to bootstrap
display: block;
*/
summary {
display: list-item;
outline: none;
}
</style>
{% endblock header%}
{% block input_group %}
{{ super() }}
{% endblock input_group %}
{% block output_group %}
{{ super() }}
{% endblock output_group %}
And use it when converting jupyter notebooks to HTML files:
jupyter nbconvert --to html \
--output-dir=. ./notebook.ipynb \
--template=./nbconvert.tpl
I'm using Jekyll and Liquid for my website.
I've been completely stuck on using liquid in the CSS to compile correctly. I'm trying to use different colors for the borders of each page, and have the default set to black.
I appreciate any insight y'all may have.
#splash {width: 100%; height: 10%;}
#splash background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}
<div id= "splash"> </div>
You need to 2 rows of --- at the top of your file for it to compile correctly.
Source: https://jekyllrb.com/docs/assets/
You also need to add { around your css code for the background-color.
---
---
#splash {
width: 100%; height: 10%;
}
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
}
Alternatively you can just merge the 2 CSS statements like so:
---
---
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
height: 10%;
width: 100%;
}
Linked stylesheets are not meant to be page-specific, so this is not the right way to go. I would also NOT merge page-specific and website-specific CSS. Adding an id in the websites stylesheet for every page you create (now and in the future) seems unlogical too.
My advice is to create a layout file in the _layout directory, called page.html. Make it look like this:
<html>
<head>
<!-- website-specific CSS goes here -->
<link rel=stylesheet href="style.css" type="text/css">
<style>
/* page-specific CSS goes here */
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}black{% endif %};
}
</style>
</head>
<body>
<div id="splash"></div>
</body>
</html>
Add your website-specific/normal CSS to your stylesheet. The page-specific CSS in the head will overwrite this. Then create a index.md file like this:
---
accent: red
layout: page
---
content
Note that you do not have to set the layout in every page when you set defaults, see: front matter defaults.
My goal: to produce a basic image gallery that can be printed to PDF from the browser as a 3col x 4row grid in a 8.5" x 11" portrait layout. The image URL and a short description are fed from a django app, so I'll neither know how many images will be viewed nor the file names for them.
The code that follows is based on http://www.w3schools.com/css/css_inline-block.asp
It produces an image gallery whose result can be seen as a screenshot here:
Image Gallery Screenshot
My question: is there a way to make the boxes stay in a fixed grid? Some of the boxes are being pushed out of place, but I'm not sure why. If there's a better solution, I hope you'll point me to it.
Thanks!
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
width: 150px;
height: 180px;
margin: 1px;
border: 1px solid #73AD21;
}
.text-box {
font-size: 9px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<h3>Section 14: Attachments</h3>
{% for inspectionfeedback in inspection.inspectionfeedback_set.all %}
{% if inspectionfeedback.feedback_image.path == "" %}
{% else %}
<div class="floating-box">
<img src="{{ inspectionfeedback.feedback_image.url }}" style="width:140px;" alt=" " >
<div class="text-box">
{{ inspectionfeedback.feedback_inspection_item }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</body>
</html>
You are using inline-block, and the text is sometimes 3 lines or 2 or even four lines. The inline-block tries to level the text to "baseline" which in turn messes up your grid.
Possible solutions:
use display: block;, and float: left; etc.
use a table :(
use flex-box (if you are ok with css)
I'm having issues with a little feature on my site's products' page 'tools' bar. I want to have it float to the right of my site's breadcrumb navigation, making it inline with the breadcrumb navigation. But it's going to the next line.
Here's what it looks like:
<div id="breadcrumbsForStore">
<h5>
Home
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
{{ page.name }}
</h5>
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
</div>
And here's the CSS:
#breadcrumbsForStore{width:960px; font-family: futura; text-align:left;margin:20px 0px 25px 0;padding:0px 0 5px 0;clear:both; margin-left: auto; margin-right: auto; text-transform:uppercase;}
#breadcrumbsForStore h5{font-size:10px; font-family: futura;}
#breadcrumbsForStore h5 a{color:#525252; border-bottom:0px dotted #0d0d0d; letter-spacing:1px; padding: 10px 3px 10px 3px;}
#breadcrumbsForStore h5 a:hover{color: #0d0d0d;}
ul#shoptools{float:right; display:inline;}
ul#shoptools li{float:left; display:inline;}
Here's where the problem is (it says "SIZE GUIDE / FILTER:")
http://shopmoonfall.bigcartel.com/products
Change your html like this:
<div id="breadcrumbsForStore">
<ul id="shoptools"><li>SIZE GUIDE / Filter:</li></ul>
<h5>
Home
{% for category in product.categories limit:1 %} / {{ category | link_to }}{% endfor %} /
{{ page.name }}
</h5>
</div>
The H5 element is display:block style by default. If you add a style to make it inline, like
h5 {display: inline-block}
then floating elements will show next to it.
Fiddle here:
http://jsfiddle.net/t84yU/
(note I changed your width from 960 px to 560 px also, just to make it more readable)
I'm not 100% clear on what your trying to do but the way you nested the <h5> is kinda ugly.
If you want the <ul> on the same line as the <a> tags you should include the <ul> in the <h5> tag.
If you don't want to include the <ul> in the <h5>, make sure the <h5> is display: inline; also. All elements on the "line" must be display: inline/inline-block; for it to appear on one line. Headers are display: block; by default so the <h5> is pushing down the unordered list.