Custom Tumblr them with Handlebars - customization

Haven't been able to find out any answers to this so far but I'm trying to use handlebars within tumblr's theme system and it looks like my {{variables}} are getting overwritten from tumblr and then my content is never displayed.
For example my handlebars template has
<img src="{{bgimage}}" class="img-responsive">
But it will output as
<img src="{}" class="img-responsive">
So it looks like tumblr is just removing it. I have seen others use handlebars within a theme however I just can't figure out how they got around it. Any help would be awesome, thanks!

I think you just need to add a space to your handlebars template:
<img src="{{ bgimage }}" class="img-responsive">
Tumblr then renders it as:
<img src="{{ bgimage }}" class="img-responsive">
Handlebars.js should be free to do its thing.

Related

How to display images from other places in django template

I am fairly new in Django and developing a book recommendation system using Django and PostgreSQL. I have my dataset with some field that also keeps corresponding book images URL (not the images itself) where images reside in other places, not in my static files or database. i want to access that images online and display them in my Django template here is how I tried to do but didn't work and doesn't access the image.
<img src= {{ book.image_url.url }} style="display:block;" width="100%" height="100%" alt="">
and also tried this:
<img src="{{ book.image_url.url }}" style="display:block;" width="100%" height="100%" alt="">
where book is dictionary and images_url is simply a url string for image residing somewhere in the web.
can you help me out how to access this string of url on the web and display it on django template ?
For urls, you want to use a different template tag. Try this:
<img src="{% url book.image_url.url %}" style="display:block;" width="100%" height="100%" alt="">

How to write something with a mustache in Django

I'm trying to implement a website with AMP using Django technology, everything was okay just I want to make the change pagination without load the whole page so I need to use amp-list, the problem is when I start using it I get a problem.
I will explain a little bit about amp-list, to fetch data using amp-list we need to use some tag like the tags that exist on Django like {{#posts}} and {{slug}}, so the problem Django thinks those are variables.
a small example:
<amp-list width="auto" height="100" layout="fixed-height" src="myUrl" [src]="myUrl + pageNumber">
<template type="amp-mustache">
{{#posts}}
<div>
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>
{{/posts}}
</template>
</amp-list>
I have tried with some ways like put these in a variable and call it on the template but I get the same error. I wonder if there is a way that I can use those tags, I think there is something that let you write mustache in the Django template.
You can make use of a {% verbatim %}…{% endverbatim %} template block [Django-doc] to disable interpreting tokens such as {{ and }}.
If you thus do not want to interpret parts like {{#posts}}, {{title}}, etc. then you can surround this with a verbatim block:
{% verbatim %}
<amp-list width="auto" height="100" layout="fixed-height" src="myUrl" [src]="myUrl + pageNumber">
<template type="amp-mustache">
{{#posts}}
<div>
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>
{{/posts}}
</template>
</amp-list>
{% endverbatim %}

How can I avoid inline styling, yet take advantage of the templating language?

For each instantiation of an object in the template, I'd like to extract it's associated ImageField's url in order to show the photo. But I'm having trouble finding a way to do this without inline styling:
{% for entry in entries %}
<div class="row">
<div class="col s4">
<div class="card-panel" style="background-image: url('{{entry.image.url}}');">
<h1>{{entry.title}}</h1>
</div></div></div>
{% endfor %}
This works in bringing each individual image to the template, but I wonder if I can abstract away the css just to keep my css in a separate file.
edit: same goes for the <img> tag:
<img src="{{ entry.image.url }}">
this, in the template, would be dynamic. But I wouldn't be able to set this as a background-image
It is possible to use the Django template system to render CSS and create dynamic css files. I don't recommend doing this, but if you really want to you can set it up like normal url/view.
For example, your urls.py would have something like this
url(r'^dynamic_style/(?P<pk>\w+)$', dynamic_style, name='dynamic')
Then your view would look something like
def dynamic_style(request, pk):
entry = get_object_or_404(Entry, pk)
return render_to_response('dynamic_style.css', {
'image_url': entry.image.url
}, content_type='text/css')
Then in your template you could have
<link href="{% url 'dynamic_style' pk=entry.id %}" rel="stylesheet">
This is a clunky way to generate css. If you can use inline as suggested above, it's much better.

Doesn't show image in browser using variables inside static tag

I need to concatenate two strings inside a static tag, i checked previous question about how to concatenate strings in django template and i found this answer, but when i used that solution, the broser (Firefox) doesn't show the image.
Details:
This is my code, assume that the value of user.if is 1:
{% with "images/my_twitter_wordcloud_"|add:user.id|add:".png" as image_static %}
<center>
<img src="{% static 'image_static' %}" width="650" height="350" style="margin-left: 10%;"/>
</center>
{% endwith %}
When i ckecked the inspector in the browser, it showed the image like this:
<img src="/static/image_static" style="margin-left: 10%;" height="350" width="650">
I think that it should be:
<img src="/static/images/my_twitter_wordcloud_"|add:user.id|add:"png" style="margin-left: 10%;" height="350" width="650">
I checked the django documentation about add reference, and i tried using "" and "" after add, but It seems like django doesn't interpretate the variable, what i'm doing wrong?
Thanks for your help.
PD: i'm apologyze for my English.
Edit:
Doing what #Selcuk said, the inspector show me this:
<img src="/static/.png" style="margin-left: 10%;" height="350" width="650">
Is strange, even if i use '' instead of "", so i don't understand what is wrong, if i put this (where the value of user.id is 1):
<center><img src="{% static 'images/my_twitter_wordcloud_1.png' %}"
It show the image correctly.
Remove the quotes around image_static and use the variable name. That is, replace the following:
{% static 'image_static' %}
with this
{% static image_static %}
As a side note, you should also include a dot (.) before the image extension (png).
for future people who will come here.
avarage_rating can hold any single value from this list [0,1,2,3,4,5] including decimals.
so use a single variable as a value and the loading dynamic image is below.
{{avarage_rating | first }} == first digit and .svg is appended to it.
here s is the name of the image initial.
<code><img src="{% static 'img/s'%}{{avarage_rating | first }}.svg"><span>{{avarage_rating}}</span></code>

Django string concatenation inside template tag best practice

I'm trying to concatenate some strings to format a URL inside my template tag, but I don't find an elegant way.
So far, what I have is:
{% button "Activate" "http://" site.domain url 'registration_activate' activation_key %}
Is there any best practice to make it a bit more "readable"?
Thanks a lot
You can concatenate two strings in Django template as follows:
{{"First String "|add:"Second String"}}
Just replace the two strings with your own variable.
What I use when I want to concatenate strings in Django templates from variables (examples taken from my own code, tell me if you need something closer to your case):
<html>
<input id="myid_{{idBase}}_{{idFinal}}" type="checkbox"></input>
</html>
and inside a django tag, I use the keyword "add" associated with the keywork with
{% with 'images/'|add:file_name as image_static %}
<img src="{% static image_static %}" title = "{{ tooltip }}" alt = "{{ title }}"/>
{% endwith %}