In an html file for my first (very basic) blog site, I am able to successfully show the blog title, blog poster's name, the date it was published and also a short summary of the actual blog text with the following HTML:
<h2><a class="card-title" href=" {{ url_for('blog_posts.blog_post', blog_post_id=post.blog_id) }}">{{ post.title }}</a></h2>
Written By: {{ post.author.username }}
<p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
<p class="card-text">{{ post.text[:150] }}...</p>
Read Blog Post
However, I'd like to display a picture of the author's (users) profile picture next after the author's username, which is shown above on the second line.
What I've attempted to do is add this snippet of code:
<p> {{post.author.profile_image}} </p>
as this is the actual profile image from the posting author as I've already defined. Though I realize this is a paragraph and not actually an image. How do I convert the line of code above into something that actually renders their profile image? Many thanks!
I think this will work
instead of
<p> {{post.author.profile_image}} </p>
use
<img src={{post.author.profile_image}} />
Related
I pass into twig template variable that contains html code. When I print it I get something like that:
<div class="links"> <span class="logo"></span> homepage page 1 page 2 page 3 </div>
How do i make the code look more readable? Like this:
<div class="links">
<span class="logo"></span>
homepage
page 1
page 2
page 3
</div>
If you want to display the htmlas is for a code snippet I'd suggest you just wrap <pre> around it.
<pre>{{ html }}</pre>
demo
If you just want to preserve newlines and tabbing you could wrap the var with div and set the white-space to pre
<style>
div.pre {
white-space: pre;
}
</style>
<div class="pre">{{ html }}</div>
The source HTML is displayed exactly as you pass it in. One way I can think of to fix this specific issue is by using a solution like https://stackoverflow.com/a/34556900/4646470 to format the HTML and create a Twig filter/function 1 to handle it in Twig templates.
I am giving the sample example solution to your questions. I hope it helps you.
{{ title }} {{ entity_print_css }} {{ content }}
Sample node--article--pdf.html.twig
{{ content.field_name }} {{ content.body }} {{ label }} {{ content.field_name.0.value }}
I need to know exactly where to place the HTML code. I am putting (Credit Card logos) into the overall theme of my website with "Big Cartel." I need to put the code below my Copyright. I also have provided the Credit Card logo HTML code. could someone show me exactly where to type it in to make it work.
I know that the HTML code goes at the bottom below my Copyright, I typed that in after support showed me where to place it. But the new (Credit Card Logos)HTML code I need someone to show me.
The following HTML code is my websites code, where I need to place the (Credit Card Logos) I was told to place the (Credit Card Logos) below my Copyright. I just need to know exactly where to type it in and what that would look like. Also note below the website code is the new!(Credit Card Logos)HTML code. Could someone combine the two showing me where the new code goes.
Back to site
{% endif %}
<div id="badge"> <font size="2"> © {{ 'Today' | date: '%Y' }} Bellaiam. All Rights Reserved.</div>
<!--<div class="badge">{{ bigcartel_credit }}</div>-->
</nav>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="{{ 'api' | theme_js_url }}"></script>
<script src="{{ theme | theme_js_url }}"></script>
they will not allow me to post a picture. So the HTML for the (Credit Card Logos)are at. https://developer.paypal.com/docs/classic/api/logos-marks/
at the bottom on the left hand side. PayPal, MasterCard, Visa, Discover, Amex.
Expected result is that some kind person with way more know how will combine the (Credit Card Logo) HTML code with my website HTML code to show me how and where I need to type the complete code in, and under my Copyright.
Considering each of the credit cards are all combined into a single image, you simply need to include this image directly below your copyright <div> in your above code:
<div id="badge"> <font size="2"> © {{ 'Today' | date: '%Y' }} Bellaiam. All Rights Reserved.</div>
<img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/cc-badges-ppmcvdam.png" alt="Credit Card Badges">
Note that this will insert the images into your page directly below your footer, though you may need to position them -- this would be achieved with CSS. For example, if you want to center them, you would apply display: block and margin: 0 auto.
Also note that the <font> tag is obsolete, and you should be using CSS for text styling instead. You can control the size of the font with the CSS property font-size.
I'm making a jekyll blog, and this is the link.
https://jinmc.github.io/programmingTips/
You can also look at the code from here : https://github.com/jinmc/programmingTips
Right now I just finished making the sidebars,
and I know how it works, and implemented on just one keyword csharp.
Rest of it doesn't work.
I implemented this by making a csharp.html file and implementing this code on it.
---
layout: default
sidebar: sidebar_nav
---
<h1>C Sharp</h1>
<ul>
{% for posts in site.categories.csharp %}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ posts.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ posts.url | relative_url }}">{{posts.title}}</a>
</h3>
<p>{{posts.meta}}</p>
</li>
{% endfor %}
</ul>
something like this.
I can make every html regarding the sidebar navigations but I'm starting to wonder
if this is good practice as the content inside it would be almost similar. Plus, I'll have to make every other html files every time I make a new category. But still, can't think of anything that could automate this.
Thanks in advance!
I would recommend writing a JavaScript method that listens for clicks on the navbar elements and selectively hiding or showing the relevant post links.
Modify _layouts/home.html so that it renders a ul containing all post links and a ul for each category that contains all the post links for that category. Add ids to these ul element that identify the category or 'all'. Use jQuery to hide all the category specific ul elements on page load. Use another script in the _layouts/default.html defining a global var initialized to 'all', a click listener that listens for which the different category clicks in the navbar and hides the previously shown ul and shows the desired ul by applying css styles. You can also change text on the page to show what the current category is.
I know how to use to define the end of the excerpt, but I'd like to omit the first paragraph of the post as well.
How can this be done?
Thanks in advance all!
Just got into the same issue. I have a separate place for excerpt and below I want post without excerpt (because it was already displayed). What worked for me was:
<header>
{{ page.excerpt }}
</header>
<article>
{{ content | remove_first:page.excerpt }}
</article>
It has to be defined in the same layout you use for posts and posts only.
If I understand right you just want the first paragraph.
post.excerpt gets the first paragraph of your post. An alternative would be to create a variable in your markdown files and call it whenever you want.
e.g.
---
layout: post
title: Your title
post_description: A plugin to extend Swiper for easier JW Player integration.
---
and call {{ post.post_description }} in your lists.
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!