I'm using HTML snippets such as
<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px" border="0" />
to insert scaled and offset images into blog posts in Hugo. Unfortunately I'm finding with the latest version of Hugo that images inserted this way are not rendering. If I do an image insert via Markdown, the images are inserted fine, but it appears impossible apply a style tag?
Any suggestions on how I can diagnose the issue here? I'm currently at a loss.
I would prefer to keep the HTML out of the MD as much as possible; setting anything to "unsafe" always makes me a little nervous, and I presume that was the intention when the the parameter was named "unsafe"!
I think my first port of call would be to use the figure shortcode, that supports a class name, as well as nice-to-haves like captions and titles (which may have accessiblity and SEO benefits).
{{< figure src="site.jpg" title="Cool Image" class="pull-left" >}}
If that doesn't suit, the options would be a custom shortcode, or target through pure css, you could use nth-child to alternate images to the left and right if desired.
Edit - Additional info
Create a CSS file and link it in the head, for example I have <project-root>static/styles/main.css and this in the head of my layout
<link href="/styles/main.css" rel="stylesheet" type="text/css">
Very important to note that static is not part of the url/href.
Above I assigned the figure the class of pull-left so in main.css your style would look like
.pull-left{
width:100px;
float:left;
margin: 0px 5px 5px 0px;
}
Added details from Link in Comments
Best to make a copy of theme files rather than overwriting so create
layouts -> partials -> head.html
normally copied from
themes -> actual-theme -> layouts -> partials -> head.html
and add in the normal HTML link tag. (Fun bonus fact, themes are optional if you want to create from scratch)
You can also specify files in the config file
custom_css = ["css/custom.css"]
custom_js = ["js/custom.js"]
And use this code to add to the head.html
// css
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
// javascript
{{ range .Site.Params.custom_js -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
It turns out that inline HTML was getting filtered out by Hugo. The following needed to be added to config.toml to allow the HTML to be inserted into the resulting pages.
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
This came to pass in Hugo 0.60.0 with CommonMark compliance.
Not sure if this helps, but I cleaned up your syntax a little.
<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px; border:0px;" />
Related
I am learning Django. I am customizing the Django Admin page. I have created a base_site.html file in my templates to overwrite the default admin html. Additionally, I have created a stylesheet that I've tied to it.
Here's my problem: By default, there is a div on the right side of the content with an h2 header that states "Recent Actions." I want to change this texts color, but my CSS won't seem to work on these words...
<div id="content-related">
<div class="module" id="recent-actions-module">
<h2>Recent actions</h2>
<h3>My actions</h3>
<p>None available</p>
</div>
</div>
I have tried each of the following CSS:
#content-related{
color: blue;
}
.module h2{
color: blue;
}
#recent-actions-module h2{
color: blue;
}
#content related h2{
color: blue;
}
Nothing works... Am I missing something?
If there is a CSS that's loaded later than the snippets you posted here, that can easily make the issue to appear (later CSS takes precedence). I recommend to open the browser developer console, and inspect the headline - it should show you which CSS style is being used.
If you need some more help, we'd need your base_site.html.
the following code should suffice for the CSS:
h2{color: blue;}
this applies to all future h2 tags on templates that are linked to your CSS file.
Otherwise, if you want it only for Recent Actions use this:
<div class="module></div?
And in CSS:
.module{color: blue;}
You are probably forgetting to link your CSS page. Use this:
<link rel="stylesheet" href="{% static 'CSS/base.css' %}">
Don't forget to add {% load static %} at the top of your html template.
I don't know why you would want to change your Admin page, because virtually noone except you would ever access it. If you are trying to create a portal for users to login view this documentation: https://docs.djangoproject.com/en/3.1/topics/auth/default/
If you 3 is not the case, you should open up your browser's inspect element and view the webpage. Also to save yourself a buttload of time in creating the new look for your admin checkout the Django admin templates on Github.
Here are all the admin html templates to make your life easier.
If the answer to my question seems obvious, please excuse me—I tried to do it myself, I searched around for a solution… and, unfortunately, I'm still stuck. :(
I am looking to set different widths for images and texts, so my blog can display large pictures while keeping a pleasant line length.
It would be easy to achieve, only if Jekyll didn't wrap all <img> in <p> tags. No matter how I change my CSS, it never does the trick.
Some time ago, I found someone's post on Stack Overflow stating that the solution is to specify a class directly in Markdown files. Like this:
[image-1]: {{ site.baseurl }}/images/lostcrow.jpg "A beautifully lost crow"
{: .classy }
It didn't work, not for me at least—the class being applied to the <img> tag, not to the <p>tag:
<p><img class="classy" src="/images/lostcrow.jpg" alt="A beautifully lost crow" title="Lost Crow" /></p>
So the image's width is still dependent on the text's width…
Please, is there a way to set different widths for images and texts with Jekyll? I would really appreciate your guidance.
Thanks for your time. :)
Negative margin on the image should work:
.classy {margin: 0 -100px; width: calc(100% + 200px);}
... or just like this:
p img {margin: 0 -100px; width: calc(100% + 200px);}
... or check this post: Making Jekyll img's wider than the text?
I don't know much about how Jekyll processes Markdown + HTML, but switching from Markdown to HTML just for images is a possible solution.
The Jekyll Docs have a nice example of passing parameters to the include tag in Jekyll. The example in the docs is similar to what I'm suggesting. You would have an image.html file in the /_includes/ folder that contains the <img> tag, classes, and anything else you need for images. You would pass the image url or file location as a parameter to the include so that it would load the image with all your HTML instead of Jekyll processing it and adding it's own HTML. Something like the following would work:
# /_includes/image.html
<img src="{{ include.src }}" alt="{{ include.alt }}" title="{{ include.title }}" />
# in some other file where you want to add an image
{% include image.html src="..." alt="..." title="..." %}
If you're not nesting the include tag under any Markdown like ## header or - list, Jekyll should hopefully just take the image.html and directly put it into the output without surrounding it with anything.
You could also add other parameters like height={{ include.height }} width ={{ include.width }} to manually set the height/width.
Worst-case scenario is switching completely from Markdown to HTML. It gives you full control of the output since Jekyll won't insert it's own wrapping tags. Switching would definitely be a hassle, but speaking from experience I definitely learned a lot writing my own blog in HTML. It definitely helped me understand how websites work and become a better web developer.
Good luck!
I'm using Simplemde ( markdown editor ) as an embdedded textarea for writing articles in my website. I've recently encountered a problem :
While writing, if I insert an image , it stretches to 100%, taking over the entire page, like this :
I tried inserting inline css (style tags) in the textarea, but that didn't work.
However in the preview option, I used inline css (set height and width at 400px ) and it worked :
How can I set the image size as per my preference in this markdown editor ?
UPDATE : I already tried embedding HTML in Markdown ,like :
<img style="width:400px;" src="abc.jpg">
But this doesn't seem to work, and my the image doesn't even appear in the article this way. The entire img tag gets shrinked to <img> in my textarea!
Embedding CSS in Markdown is easy. It may depend on the markdown parser but usually one can include any valid HTML and CSS in markdown files.
<style type="text/css" rel="stylesheet">
* { color: red; }
</style>
This is a markdown file. Save this snipped under `test.md` and convert into html5
with `pandoc` or any other markdown parser.
A very powerful markdown parser is pandoc!
pandoc --from=markdown --to=html5 --output=test.html test.md
This might be able to answer your question, it looks like you can embed HTML in markdown and you can add styles that way. Markdown and image alignment
You said you tried inline, did you try just HTML?
<img src="https://i.imgur.com/sZlktY7.png" width="50">
I'm sort of updating my Octopress website, and decided to start from a clean install and add my customizations. I'm noticing a buggy behavior that was not there before in how Octopress parses html tags in particular situations.
An example. In the head section, I have the following commented out line:
<!--<link href="{{ root_url }}/favicon.png" rel="icon"> -->
This should be a perfectly valid commented out line, and works perfectly except when there's another html tag within the comment (i.e. <link ...>). In the above case, Octopress replaces the -- at the end of the comment with –, the HTML code for en-dash, with the result that the comment never actually ends when it should.
I found a workaround for this case by using <--> for closing the comment tag.
This is also happening in another instance, and I need help with this one. A few of my blog titles have an <em> in them, so that when Octopress creates an html for it, the result should be, for example:
My Title With <em>Emphasized</em> Text
However, once again, since there's a nested tag here, the actual result is the following:
<a href="/blog/link/to/post" title="My Title With <em>Emphasized</em> Text”>My Title With <em>Emphasized</em> Text</a>
i.e., the closing " at the end of the title is replaced with ”, the HTML code for ", with disastrous results.
I can't find a solution or a workaround for this... help!
I found a bug report here, but there doesn't seem to be any activity about this.
https://github.com/imathis/octopress/issues/1662
Once again, I should emphasize that this is a bug in a more recent build of Octopress (or its dependencies), and was not present in an earlier version that I have been using.
Help! :)
OK, found a solution!
Find the html layout file for your post type, usually here: /source/_layouts/post.html, and find this section:
<p class="meta">
{% if page.previous.url %}
<a class="basic-alignment left" href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">« {{page.previous.title}}</a>
{% endif %}
{% if page.next.url %}
<a class="basic-alignment right" href="{{page.next.url}}" title="Next Post: {{page.next.title}}">{{page.next.title}} »</a>
{% endif %}
</p>
Add | strip_html after the two instances of title, as follows:
title="Previous Post: {{page.previous.title | strip_html}}
and
title="Next Post: {{page.next.title | strip_html}}"
And that's it! Now there's no html inside the title quote, and no issues!
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.