I created Flask HTML template and I need to create an icon (fa-link) with a link to an external website so if user clicks the icon it will redirect him/her to external website.
The hardcoded version looks like this:
<h3 class="border-bottom mb-2 text-left">Lorem ipsum dolor sit amet, consectetuer adipiscin<i class="fas fa-link ml-3"></i></h3>
What I want is to use Jinja2 to generate variable and pass title and link to external website in my flask template file so something like this:
<h3 class="border-bottom mb-2 text-left">{% block product_title %}{% endblock %}<i class="fas fa-link ml-3"></i></h3>
And min my rendered html file I have:
{% block title %}
Lorem ipsum dolor sit amet, consectetuer adipiscin
{% endblock %}
Could you please explain how to pass href attribute to rendered html?
you can send href link directly from flask to html file like
Python Code:
return render_template("index.html", href = "https://www.google.com", title='google')
Html Code:
{{title}}
Let me know if it didnt work, we'll figure this out.
Related
I have a set of information to be rendered on my webpage using django template tags.
{% for product in sales %}
<div>
<span>Customer:{{product.to_user}}</span><br>
<span>{{product.time}}</span><br>
<p class="message">{{product.message}}</p>
</div>
{% endfor %}
The {{product.message}} template tag contains information separated by new line('\n'). But, newlines are not rendered in HTML, the information is displayed in a single line omitting to obey '\n'.
I tried capturing the information from the <p> tag and replacing \n, with <br>, and again setting the text in the same <p> tag. But it doesn't seem to work.
This was my approach, as stated above.
$(document).ready(function(){
let renderedText = $(".message").text()
//alert(renderedText)
final_txt = renderedText.replace(/\n/g,"<br>")
$(".message").val(final_txt)
})
What changes or addition should I make, in order to get this working?
Thanks in advance.
Use the template filter linebreaksbr like so :
<p class="message">{{ product.message|linebreaksbr }}</p>
In order to have the line information you can use pre tag to keep track of empty spaces and new line.
let message = `Lorem ipsum text Lorem ipsum text Lorem ipsum text.
Lorem ipsum textLorem ipsum text
Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text`;
<div><pre>{message}</pre></div>
I’m building static HTML templates and would like to loop over a block of markup to output it multiple times. Twig has a simple method for it, but I've been unable to find the equivalent in Nunjucks.
Twig input:
{% for i in 1..2 %}
<div>Lorem ipsum</div>
{% endfor %}
HTML output:
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
Okey, this is the code i have:
[lazy_load_box effect="slidefromright" speed="550" delay="80"]
[hero_unit text="Progressive business thinking
Lorem ipsum dolor sit amet, conse ctetur" btn_text="soporte 24/7 <br> 123456" btn_link="http://localhost/wordpress/donec-porta-diam-eu-massa/aliquam-erat-volutpat/" btn_style="primary" btn_size="normal" target="_self"]
[/lazy_load_box]
This is part of a code from a wordpress template, i tried to make a jump line here:
btn_text="soporte 24/7 <br> 123456"
But it doesn´t work it just write in the page:
SOPORTE 24/7 <BR> 123456
I hope someone know about this. I'm new working with templates.
Thanks for your time.
Because this line isn't supporting html codes. You should find the html source of this line. So, you can add the br tag after find it.
I am learning polymer and web components with it and hit a point where I would like to make a custom element that can fetch all tags instead of a specific one. I was thinking if I could use a wildcard character it would work but turns out it doesn't. Is this possible?
<div class="card-header" horizontal layout>
<div id="image_section" flex two>
<content select="img"></content>
</div>
<div id="text_section" flex>
<content select="*"></content>
</div>
</div>
So then I would be able to use something like below instead of having to predict all possible tags a user could potentially use with my element.
<project-preview force_full_size>
<img width="900" height="350">
<h2> Lorem ipsum dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<some-other-custom-element>
<h2>Lorem ipsum</h2>
</some-other-custom-element>
</project-preview>
You can juste use :
<content></content>
It will insert the whole content of your element inside it (if you don't use the select attribute it will inject all children nodes that have not been already inserted in a content with select)
I am trying to style how the articles are laid out in a Category Blog and have got stuck on styling the actual content of the article.
My code for the first article on the Category Blog is as such:
<div class="items-leading">
<div class="leading-0">
<h2>
News Post 1
</h2>
<dl class="article-info">
<dt class="article-info-term">Details</dt>
<dd class="published">2nd Mar 2013</dd>
</dl>
Lorem ipsum dolor sit amet etc...
<div class="item-separator"></div>
</div>
I am trying to style the lorem ipsum example text by wrapping it in some kind of tags, either div or paragraph I don't mind, so I can give its wrapping container a div and font styling etc.
Here is a link to the site where its currently on:
http://test.studevent.co.uk/news
Any help is greatly appreciated.
You want to change default template for article item in blog?
/components/com_content/views/category/tmpl/blog_item.php - it is default template. copy it in your template (/templates/{your_template_name}/html/com_content/category/blog_item.php).
After, in your copy on line 137 you can find <?php echo $this->item->introtext; ?> - it is your text 'Lorem ipsum ...'
To do this, the file you need to edit is found here:
YOURSITEROOT/layouts/joomla/content/blog_style_default_item_title.php
In order to edit file, create a new folder (within your template) and move the file here, so it would be:
YOURSITEROOT/templates/YOURTEMPLATE/html/layouts/joomla/content/blog_style_default_item_title.php