I'm learning Twig and I would like to display number of elements in html as long as in my table I don't have 4 in length.
I want to display 4 items, replacing the missing ones with the "default" one that says comment area is empty.
Here is my current code :
{% for comment in comments %}
<div class="block_memory gray animated fadeIn delay-01s">
<i class="icon-quote"></i>
<p>
{{ comment.comment }}
</p>
<span>
<i class="icon-user"></i>
<strong>{{ comment.username }}</strong>,
<time>1 weekago</time>
</span>
</div>
{% endfor %}
{% if comments|length < 4 %}
<div class="block_memory gray animated fadeIn delay-01s">
<i class="icon-quote"></i>
<p>
This comment area is empty!
</p>
</div>
{% endif %}
I just don't think I have the logic to do what I want to do.
Related
I am writing a diploma in symfony 5 and studying symfony in parallel. I reached the implementation of the search in the table. I have a search field
<div class="search__container">
<div class="search__block">
<img class="search__glass" src="{{ asset('images/search-glass.svg')}}">
<input class="search__field" type="text">
</div>
</div>
and the actual table itself, which is output as follows
<div class="table__body">
{% block table_items %}
{% for item in items %}
<div class="body__item">
<a class="item__detail" href="item.html"></a>
<img class="item__icon" src="images/icons/{{ item.extension }}.svg">
<div class="item__title">{{ item.fileName }}</div>
<div class="item__extension">{{ item.extension }}</div>
<div class="item__updated">{{ item.uploaded }}</div>
<div class="item__size">{{ item.size }}b</div>
<div class="item__act">
<span></span>
<span></span>
<span></span>
<div class="action__popap">
<ul class="actions__list">
<li class="act__item detail">
Detail
</li>
<li class="act__item delete">
Delete
</li>
<li class="act__item download">
Download
</li>
</ul>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
</div>
I want to do a search by "item.fileName" without reloading the page. And when I started doing it, I was at a dead end, not knowing what to do. I can do this with a page reload, but as for me it is not very convenient.
So, how can i do this?
I hope you can help me or point me to the correct vector.
I have a search view which results are in a single column. I would like to move only couple of fields to the second column. is this possible?
My views-view-fields--mytestview.html.twig code is as below:
{% set index = 0 %}
<div class='row'>
<div class="panel panel-default">
<div class="panel-body">
{% for key, field in fields -%}
{% if index == 0 or index == 5 %}
<div>
{% endif %}
<span {{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</span>
<a href="#" data-toggle="tooltip" data-placement="right" title="{{ tooltips[key] }}">
<span {{ field.element_attributes }}>{{ field.content }}</span><br/>
</a>
{% if index == 4 or index + 1 == fields | length %}
</div>
{% endif %}
{% set index = index + 1 %}
{%- endfor %}
</div>
</div>
</div>
This is making all the fields appear in a single column. I would like to move the google map and the link below it to second column. Any help? Attaching my current view screenshot here....
I am having a twig template for my view on which the fields are displayed on 2 columns. Is there a way to make all the fields appear in the same column?
Twig code:
{% set index = 0 %}
<div class='row'>
<div class="panel panel-default">
<div class="panel-body">
{% for key, field in fields -%}
{% if index == 0 or index == 5 %}
<div class='col-md-6'>
{% endif %}
<span {{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</span>
<a href="#" data-toggle="tooltip" data-placement="right" title="{{ tooltips[key] }}">
<span {{ field.element_attributes }}>{{ field.content }}</span><br/>
</a>
{% if index + 1 == fields | length %}
<a href=''>Test link</a>
{% endif %}
{% if index == 4 or index + 1 == fields | length %}
</div>
{% endif %}
{% set index = index + 1 %}
{%- endfor %}
</div>
</div>
</div>
Current output:
How to make all the fields appear in one single column?
Could you not wrap the class in css using flex-direction: column.. for example:
.panel-body{
display:flex
flex-direction: column
}
Pretty simple fix. I removed the class from panel and it brought all the fields in a single column.
<div class='col-md-6'> changed to just <div> tag
I am new to OctoberCMS and I am stuck now, I am facing issue to use my custom blog posts component (which overrides Rainlab blog posts) in the same page multiple times.
Say I have created an alias of default blogPosts to postLists and I defined my custom HTML structure and it is working well, no issues.
Now what I want is to use the postLists post structure in my page for three different categories and here I am stuck because when I pass variable to component like this - { % component 'postLists' categoryFilter='news' %} it does not work for the category filter and if I select a category from drag drop component UI it becomes global categoryFilter setting for the page.
This is my requirement.
My postList component code:-
{% set posts = __SELF__.posts %}
{% for post in posts %}
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4 col-4 content_body_img">
<a href="{{ post.url }}">
{% if post.featured_images.count > 0 %}
<img class="media-object" src="{{ post.featured_images.first.getThumb(108, 108) }}" />
{% else %}
<img class="media-object" src="http://placehold.it/108x108" />
{% endif %}
</a>
</div>
<div class="col-sm-8 col-8">
<p>{{ post.title }}</p>
<!--location_date-->
<div class="location_date">
<ul>
<li><i class="fa fa-calendar"></i><span> {{ post.published_at|date('j F, Y') }}<span></li>
<li><i class="fa fa-map-marker"></i>Dubai</li>
</ul>
</div>
<!--location_date end -->
</div>
</div>
</div>
<!--content_body_img end -->
{% else %}
<div class="col-sm-6 col-6 col-lg-3">{{ noPostsMessage }}</div>
{% endfor %}
Please help me, any help will be very much appreciated.
Thanks Sanny
This is static Approach - I will post dynamic Approach as well give me some time
Best and possibly easy solution will be ( in case you just intend to show posts ) is to add 3 Post List component with Different Category filter option for each tab.
It should do your work
make sure this is optimal solution if you just need to show lists nothing else.
im frecuent user of this forum and always find answers from other users, but this time i need to ask my own question.
At this moment im editing a wp template based on twig that i bought, right now im facing a fancybox gallery which just call the first image, and i need to add the gallery rel to the other images included in the post. i already found the missing code which call the rest of images from the post ID, but i dont know how to express it by the twig structure and incorporate it to the original code of the page
this is the code which display the gallery:
{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a href="{{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" class="fancybox">
<img src=" {{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" alt="">
</a>
// the php code expressed on twig goes here //
</div>
<!-- /.preview -->
<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if loop.first %}
<li class="active" >
{% else %}
<li>
{% endif %}
<img src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>
<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#">{{ wp.__('Next', 'aviators') }}</a>
</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endif %}
This is the php code i need to implement on twig
add_filter(‘wp_get_attachment_link’,'add_gallery_id_rel’);
function add_gallery_id_rel($link){
global $post;
return str_replace(‘<a href’, ‘<a rel=”galeria’. $post->ID .’” href’, $link);
}
I really appreciate if you can help me with this (sorry about my weird english)
That code is a filter applied to the regular Wordpress functions, you are using a Twig Wrapper so that code won't work for you.
Try modifying the twig loop.
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
#... rest of the code
<a rel="galeria{{ post.ID }}" href="{{ slide.imgurl }}">
<img src="{{ slide.imgurl }}" alt="">
</a>
#... rest of the code
{% endfor %}
Skip the first slide using slice:
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE)|slice(1) %}
#... rest of the code same as above