I am trying to add a heading and a description to my galleries in the page galerie.html that are for looped but am having an issue with this, the link to the entire website: https://github.com/smarchitects/smarchitectsweb
How do I add a headline and description into the for loop?
Thank you!
I tried adding this code snippet:
<div class="col-12 center">
<h2>{{item.headline}}</h2>
<p>{{item.about}}</p>
</div>
in various places in the for loop and loop and then added this in various places in the front data:
"- headline: XXX"
"- about: YYY"
but none of the combinations worked for me...
Nice website! I cannot reproduce the issue and see any problem because your code is working for me.
Using {{ section | inspect }} shows this on the page:
{"gallery"=>[{"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/1.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_03_FINAL_.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_02B_FINAL_CORR01_.jpg", "description"=>"Karolína Harrachov"}]}
Your current code (below) seems to work fine though:
{%for section in page.galleries%}
<section class="padded">
<div class="capped-width m-l-center m-r-center" id="projekt-{{forloop.index}}">
<div class="gallery grid" id="lightgallery-{{forloop.index}}">
{% for item in section.gallery %}
<a class="{{item.column-size}} gallery-item" href="{{item.background_image}}">
<div class="bg-image lazy-div relative {{item.aspect-ratio}}" data-main="{{item.background_image}}">
<div class="galerie-overlay">
{{ item.description }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{%endfor%}
The description text is shown as expected as an overlay when hovering over an image.
I don't see any headline or about attributes.
Related
I am working on this feature where i have multiple cards with a toggle inside it.
I am getting the values for the card from the api, and using the
When i am trying to click on the toggle, the toggle on the cards opens where by i want to display the particular card toggle.
Here is the code for it:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle.collapse>
{{ value.name }}
</b-link>
<b-collapse id="collapse">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>
Please assist
The problem is with the same id attribute of the collapse. You need to change the id assignment. Try the code below:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle="`collapse-${values.id}`">
{{ value.name }}
</b-link>
<b-collapse :id="`collapse-${values.id}`">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>
I made a form with the FormBuilder of Symfony.
When I put my form in twig, the form_start(form) and form_end(form), it add a tag for each input.
I don't understand why twig adds a tag.
What is the solution to remove this tag
Thanks for your answer :)
Also, my formbuilder is like that :
->add('title', TextType::class, array(
'label'=>false,
'attr'=>array('autofocus'=>true)
))
my twig is like that :
{{ form_start(form) }}
<div class="row">
<div class="col-sm-9 p-1">
{{ form_row(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
</div>
<div class="col-sm-1 pt-2">
<button type="submit" class="btn btn-success btn-circle btn-sm">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
{{ form_end(form) }}
and the result in the html source code is :
<div class="row">
<div class="col-sm-9 p-1">
<div>
<input type="text" id="app__title" name="app_[title]" required="required" class="form-control" placeholder="Description" title="Description">
</div>
</div>
</div>
So Twig add the
<div>
that I don't want. How can I remove this autocompleted tag?
I tried the
{% do form_record.title.set rendered %}
but maybe I think that it does not work.
Edit: Okay it seems I misunderstood the issue at first.
I thought you wanted to hide a field you had in your form which can be done with
{% do form.myField.setRendered %}
Now that I understand the issue, I believe it comes from the way your field is being printed.
There are 3 main components to a form field.
Label: form_label(form.field)
Widget: form_widget(form.field)
Errors: form_errors(form.field)
There is a way to print all three components at once. The function is
form_row(form.field)
Here comes the culprit: form_row(). Because it normally prints 3 different components, it adds a div around it!
Futhermore, by looking at the form type and seing 'label' => false, I can say that the label was printing at first using form_row.
To avoid having to define 'label'=>false everytime, you can simply print your form field in this manner:
{{ form_widget(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
You can simply omit {{form_label(form_record.title)}} and it won't print.
On the other hand, I also noticed something that might be okay but seem wrong with the given example.
In the twig you shared, the form starts with {{ form_start(form) }} but then the field is {{ form_row(form_record.title)}}.
From where I come from form_record is undefined here. I would use {{ form_row(form.title)}}
Anyways, the explanation for the difference between form_row and form_widget can be found here: Symfony form differences between row and widget
Enjoy!
this is content of _config.yml file that include two predefined variables
name: amarjit singh
description: Mobile CEP blog
index.html file uses
---
layout: default
---
whereas default layout includes below-mentioned div
<div class="intro-header">
<div class="wrapper-masthead">
<div class="container">
<header class="masthead clearfix">
<div class="site-info">
<h1 class="site-name">{{ site.title }}</h1>
<p class="site-description">{{ site.description }}</p>
</div>
<nav>
Blog
About me
Projects
</nav>
</header>
</div>
</div>
So, my problem is that title and description are not shown, where as Blog , About me and Projects are shown. Output on localhost is shown as below
In your _config.yml change name: amarjit singh to title: amarjit singh.
So this is kinda difficult to explain so I have a sort video of the issue with annotations
It seems like static text is not rendering (see the H3 tag). The dynamic stuff like {{ foo.bar }} and things in loops seem to work fine. It is happening to all pages as far as I can tell.
I used the AngularClass repo as a starting point.
When the page is loaded directly or refreshed (F5 etc)
When its accessed via a link from another page
template file
<h3>GPS raw data</h3>
<div class="row" *ngIf="gps && gps.location">
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
There is no errors in the console.
edit
Another image to possibly clear up what the actual problem is. Note the HTML has content in the title, its hard coded. But its not displayed.
1) 1st solution, it should be *ngIf and not ng-if
<div class="row" *ngIf="gps && gps.location"> //<<<===here
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
2) 2nd solution, don't use *ngIf and use ?. operator as shown below,
<div class="row" >
<div class="col-md-4" >
<strong>Time:</strong> {{ gps?.location.timestamp }} //<<<==here
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps?.location.latitude }} //<<<==here
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps?.location.longitude }} //<<<==here
</div>
</div>
I encountered the same issue on Chrome and fixed it by removing the font-size style applied on that element. Not sure why, might be a bug of Chrome.
I've been trying to do the following in my .hbs file:
<div class="nav-avatar" style="background-image: url('\{{ url }}avatar/\{{ user.pic }}');"></div>
However the CSS when looking through the website looks as so:
<div class="nav-avatar" style="background-image: url('avatar/');"></div>
Both {{ url }} and {{ user.pic }} display as they should otherwise.
I over complicated the problem. Didn't need to escape it.
<div class="nav-avatar" style="background-image: url('{{ url }}avatar/{{ user.pic }}');"></div>