Hello Everyone,
I’m trying to rebuild our website using the page builder but need to add small amouts of HTML to the document, is this possible using the page builder?
Also,
I do want to add things like latest blog posts and products onto the page, how do I do this using the page builder?
Thanks Everyone!
Hi there,
Yes, that’s exactly what the Page Builder is designed to do. In each template, you can add whatever HTML you want. The templates use Jinja, which means you can assemble the content programmatically however you want.
Thanks @peterg
I’m brand new when it comes to Jinja so fogive me if im doing this wrong but whenever I add HTML to any of the templates the page just shows the HTML text.
Do you know what the format would be to add latest blogs to a part of the page?
OK, Ive figured out the I need to make a new template and add the content to that instead of using the current templates.
I’ve copied the below code from the standard homepage and tried to add it to the new web template but its not working, does anyone know what I’m doing wrong?
{% if blogs %}
<section class="container my-5">
<h3>{{ _('Publications') }}</h3>
<div class="row">
{% for blog in blogs %}
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">{{ blog.title }}</h5>
<p class="card-subtitle mb-2 text-muted">{{ _('By {0}').format(blog.blogger) }}</p>
<p class="card-text">{{ blog.blog_intro }}</p>
</div>
<div class="card-body flex-grow-0">
<a href="{{ blog.route }}" class="card-link">{{ _('Read blog') }}</a>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
{% endif %}
Here’s a very minimal example to show what it should look like:
{% for post in frappe.get_all("Blog Post", fields=["title", "blogger"], order_by="published_on asc") %}
<div>{{ post.title }}, by {{ post.blogger }}</div>
{% endfor %}
We’re posting past each other 
In the example you posted, have you defined the variable blogs anywhere? In the fragment here, it is undefined (and thus the {% if blogs %} part never gets run), but it’s possible you’re doing it somewhere else.
Yea sorry about that, I got excited
I havent defined it myself, I thought it would pull it from wherever the original homepage pulled it from if i’m honest, I’ve a lot to learn about this lol
It might have been in the original page, but it doesn’t look like it’s in yours. You can set variables in jinja like `{% set my_variable = “hello” %}, or you can just define them implicitly like I’ve done in my example.
Thanks for your help @peterg but I cant figure this out.
From the link you sent earlier I found
It works when i add it to a web template but if I change it to another known template it doesnt work, this is what I tried, should that work or am I way off?
Are there any step by step guides anywhere?
Is there anyway to create a template that I can just add HTML to? I think that would make it easier for me at the moment untill I learn more about Jinja
Something’s not adding up. You don’t need render_template. The Web Template components of a Web Page document (content type: web builder) will render html and jinja automatically.
Can you post screenshots of your Web Page and Web Template documents (along with the web page view you’re getting as a result)?
Ok, I’m getting somewhere (I think)
If I use the markdown web template I can add html to that and it seems to work.
I’m at a loss with adding links to other pages though, Im basically trying to recreate the homepage but using the Page Builder, so I want to be able to add ‘Featured Products’ and ‘Latest Blog Posts’ but in card format so it looks similar to the original page.
I created a web template with this as the content and it works by showing the footer wherever I put the template.
{{ frappe.render_template(‘templates/includes/footer/footer.html’, {}) }}
If using the same template but change it to show either of the below, the page is blank
{{ frappe.render_template(‘templates/includes/blog/hero.html’, {}) }}
{{ frappe.render_template(‘templates/includes/blog/blogger.html’, {}) }}
I know I must be doing something stupid, I just cant figure out what lol
Please post screenshots of what you’re doing.
render_template is not the right way forward here.
If you don’t want my help, that’s fine of course. If you do, please follow the steps I’ve outlined. Use the sample code I’ve posted as your template, and post the three different images I’ve requested.
Hi @peterg I’m sorry for the delay, I do want your help and really appreaciate you helping me!
I didnt post the 3 screenshots because the before and after pages and just blank (plain white page)
I tried to use your sample code and it does display but only as a list, not in the cards like it does on the standard ERPNext homepage, but editing the code you sent is beyond me if i’m honest, i dont even know where to start with Jinja templating.
as I said I really do appreciate all the time and help you are giving me but I really dont understand Jinja yet so to be honest its not making sense to me.
I really wanted to use the page builder as I thought usingit would make it much simpler but its boggling my mind lol
Wait, so it’s working? You started this thread asking how to display custom HTML on the page, and you said that the page builder wasn’t rendering properly for you. At some point, apparently, you fixed that problem and moved on to another, but that wasn’t apparent to me.
Building a custom template requires some knowledge of jinja and html. There’s really no way of getting around that. The sample I posted has pretty much all the jinja you need, so all you need to do is adjust the html. We’re usually happy to help here, but please be very explicit about what’s working and what isn’t (especially with pictures!)
@peterg You’re a legend!! Thanks for all your help and patience!
You’re right, I needed to learn a lot more about Jinja templating, and I’ve still got loads to learn but with your help, I finished this bit.
This is the the code I used (based on what you sent me)
Works perfectly for what I needed it for
Thanks Again!
I’m new to Jinja templating. Your answer was really very usefull in understanding how things are fechted and displayed.
How can I show Blog Posts of a specific category. Couldn’t find a way to filter after fetching all posts.
