How to display images in a loop in HTML - html

In a loop I iterate over several URLs stored in movie.poster. If I only print movie.poster it returns the URL.
<ul>
{% for movie in all_movies %}
<li> {{ <img src="movie.poster" alt="Cheetah!" /> }} </li>
<!--<input type = "submit" value = "delete"/>-->
<!-- <img src="movie.poster" alt="Cheetah!" />-->
{% endfor %}
</ul>
When I run the code below I get the following error message "Could not parse the remainder: […]" How could I fix this?

use {{ }} for variables not for a line, and .url to call an image
so:
<li><img src="{{movie.poster.url}}" alt="Cheetah!"></li>
will call the image

Related

<ol> tag doesn't increment from 1 and stays at 1 while using in a 'for' loop in HTML

Firstly, I don't know anything about HTML. I am trying to build a website using Jekyll and found a template for the website, to which I am making modifications.
I have the following code:
{% for publi in site.data.publist %}
{% assign even_odd = number_printed | modulo: 2 %}
{% if even_odd == 0 %}
<div class="row">
{% endif %}
<div>
<ol>
<li>{{ publi.title }}</li>
<!-- <img src="{{ site.url }}{{ site.baseurl }}/images/pubpic/{{ publi.image }}" class="img-responsive" width="33%" style="float: left" />
--> <p>{{ publi.description }}</p>
<p><em>{{ publi.authors }}</em></p>
<p><strong>{{ publi.link.display }}</strong></p>
<!-- <p class="text-danger"><strong> {{ publi.news1 }}</strong></p>
<p> {{ publi.news2 }}</p> -->
</ol>
</div>
{% assign number_printed = number_printed | plus: 1 %}
{% if even_odd == 1 %}
</div>
{% endif %}
{% endfor %}
There is a YAML file in the site.data.publist which has a number of members, each with different fields. The for loop helps to go through all the members of the YAML file.
As you can see in the code, I am using the <ol> tag in the for loop and I have used the <li> tag for the publi.title (a field in the members of the YAML file). But all I get is one repeating for all the members in the YAML file. I have attached the output I get.
As sirko mentioned in his comment, you are generating invalid HTML.
First of all, the <ol> may only contain li as direct children. So make sure to put everything else also within the li tag.
But your real problem is that you generate the ol tags within your loop. As mentioned in the comment, your output the contains multiple lists with one element each, not one list with n elements.
In order to change that, you have to move the ol outside of the for loop. (And then make sure you still generate valid HTML => see point 1.)

HubSpot macro not outputting markup

I have a my_macro.html defined which currently looks like this:
<!--
templateType: "none"
isAvailableForNewContent: false
-->
{% macro video_card(background_image, video_link) %}
<div class="videoCard" style="background-image: url({{ background_image }});">
<a class="button--play" id="play-video"></a>
<h1>test</h1>
</div>
{% endmacro %}
In HubSpot, within my custom module, I'm trying to use this macro. I have the following:
{% import '/website/assets/hubl/my_macros.html' as macros %}
<div class="hero">
<div class="hero__video">
{{ macros.video_card }} <!-- this is where I'm trying to print markup -->
</div>
</div>
However, on the output, where I should expect the markup, I see the following message:
com.hubspot.jinjava.lib.fn.MacroFunction#9d25d51
Unsure why? I've followed the documented import and my_macro.html file name structure defined here.
your macro has 2 parameters video_card(background_image, video_link), but in your template
{{ macros.video_card }} <!-- this is where I'm trying to print markup -->
you forgot to pass any parameters ?
it sould be like:
{{ macros.video_card('bg-image.png', 'video.mp4') }}
For anyone wondering, the correct way to use macros in a custom module would be:
{% from '/website/assets/hubl/my_macros.html' import videoCard %}
And its usage would be:
{{ video_card('image.jpg') }}

How to access field names of javascript object in HTML passed in from backend?

Example:
var obj={name:bob,
}
I want to access not the value of name i.e. bob instead an array containing keys of obj like [name].
<h1>{{ pagename|title }}</h1>
<ul>
{% for author in collections %}
<li >
{{ author.uno }}
{{ author.subject }}
<script>
var array = Object.keys(author).map((key) => key) ;
document.write('<p>' + array + '</p>');
</script>
{% for element in author %}
<li >
{{element }}
</li>
{% endfor %}
</li>
{% endfor %}
</ul>
Here collections is an array of objects passed in from backend i.e. nodejs.
Author is a javascript object.
I have tried getting desired result using logic inside script tag.
But it is not printing anything on webpage.
I have also tried placing {{}} at different positions without getting fruitful results.
update: I forgot you're using swig-template. Here is my suggestion:
//backend :
const author = { /* author object */ };
author.keys = Object.keys(author).join(', ');
swig.renderFile('/path/to/template.html',{ author });
and then, put it in template.htm;
{{ author.subject }}
{{ author.keys }}
{% for element in author %}
<li >
{{element }}
</li>
{% endfor %}

Jekyill - Pass variable as parameter

It's been all the morning having this situation and I'm going crazy with it.
I have 2 files, a.html and b.html, I created a Jekyll tag with the name render_menu_options, the parent_name parameter returns name of a subdirectory of the actual menu, the parent_name value is passed in the route_filter parameter of the include function, but in the render_menu_options the actual value is always the name of the parameter, in this case include.route_filter
a.html
{% render_menu_options level:2 iterator:item sort:menu_order level_name:parent_name %}
<div class="menu-header">
{{ item.text }}
</div>
<ul class="menu-container">
<li>
{% assign abc = parent_name %}
parent_name: {{ abc }}
</li>
{% include s.html route_filter=parent_name %}
</ul>
{% endrender_menu_options %}
b.html
<ul class="menu-container">
{% render_menu_options level:3 iterator:subitem part_name:include.route_filter part_number:1 sort:menu_order %}
<li>
<a href="{{ subitem.url }}">
{{ subitem.text }}
</a>
</li>
{% endrender_menu_options %}
</ul>
It is possible to pass the value of the parameter to the tag?
Difficult to spot where is the real problem without your plugin's code.
You can always try to put curly braces around your variable name.
{% render_menu_options level:3 iterator:subitem
part_name:{{ include.route_filter }} part_number:1 sort:menu_order %}

django integrate htmls into templates

i have a django 'templating' question
if i have in views.py:
def cv(request):
if request.user.is_authenticated():
cv = OpenCv.objects.filter(created_by=request.user)
return render_to_response('cv/cv.html', {
'object_list': cv,
},
context_instance=RequestContext(request))
and in cv.html something like:
{% for object in object_list %}
<li>
First Name {{ object.first_name }} <br />
Last Name {{ object.last_name }} <br />
Url {{object.url}} <br />
Picture {{object.picture}} <br />
Bio {{object.bio}} <br />
Date of birth {{object.date_birth}} <br />
{% endfor %}
but i want this content to appear on the profile.html page too, how can i do it?
a smple {% include "cv/cv.html" %} in the profile.html doesn't work.
Also, is there another way to 'parse the object list' than explicitly write all the objects, like above?
thanks in advance!
You need to pass object_list to profile.html as well.
It's not very clear what you're asking, but I suspect a custom template tag might be what you're after.