I'm using easyadmin for my website. In order to manage a gallery of images I would like to display a thumbnail of each one of them wrapped in a link that lead to the actual show action of the entity Image
here is the definition of the gallery :
Album:
class: App\Entity\Album
list:
fields:
- titre
- images
show:
fields:
- titre
- { property: images, template: admin/field_mosaic.html.twig }
And the custom template I have created :
<div class="gallery m-2">
{% for image in item.images %}
<a href="{{ path('easy_admin_bundle') }}?entity={{ link_parameters.entity }}&action={{ link_parameters.action }}&primary_key_name={{ link_parameters.primary_key_name }}&id={{ item.id }}">
<img class="rounded m-2" src="{{ asset(vich_uploader_asset(image, "imageFile"))|imagine_filter('profile_list') }}" alt="image #{{ loop.index }}">
</a>
{% endfor %}
</div>
Unfortunately I don't know the name of the main route of the easyadminbundle. I tried {{ path('admin') }}which doesn't worked and the name in the routes\easy_admin.yaml file which doesn't work either.
Where can I found it ?
After 10 min I decided to run a simple
$php bin/console debug:router
And I found this little one:
+--------------+------------------------------------------------------------------------------------------+
| Property | Value |
+--------------+------------------------------------------------------------------------------------------+
| Route Name | easyadmin |
| Path | /admindatabase/ |
| Path Regex | #^/admindatabase/$#sD |
| Host | ANY |
| Host Regex | |
| Scheme | ANY |
| Method | ANY |
| Requirements | NO CUSTOM |
| Class | Symfony\Component\Routing\Route |
| Defaults | _controller: EasyCorp\Bundle\EasyAdminBundle\Controller\EasyAdminController::indexAction |
| Options | compiler_class: Symfony\Component\Routing\RouteCompiler |
+--------------+------------------------------------------------------------------------------------------+
Sorry for bothering....
Related
I would like to know if there is a good way to start the columns of Bulma.io at the end of its container. The usual setup is:
<div class="container">
<div class="columns">
<div class="column">
First
</div>
<div class="column">
Second
</div>
<div class="column">
Third
</div>
</div>
</div>
which spreads the columns evenly throughout the container.
-----------------------------------------------------
| | | | | |
| | | | | |
-----------------------------------------------------
I know it is possible to make them shorter and left-aligned with is-(size) classes. I would like to to the same but make the right-aligned so the following happens:
-----------------------------------------------------
| | | | | | | |
| | | | | | | |
-----------------------------------------------------
I have looked up the documentation but I couldn't find any built in way.
I'm afraid there's no built in way for .columns. For some reason .is-right class is only available for .tags, .buttons and some more. What you could do is to create and use your own utility/helper class:
.columns.is-right {
justify-content: flex-end;
}
I am new to Grav and I am trying to get the basics.
If I want the following page structure:
root
|_______ set1
| |___ page_10
| |___ page_11
| |___ page_12
|
|_______ set2
| |___ page_20
| |___ page_21
...
How can I make set1 display a regular navigation menu with links to each inner page?
Something like:
- Page 10
- Page 11
- Page 12
Where each entry is an html link to each page.
You can do that with twig with something like this:
{% for childpage in page.header.children %}
{{ childpage.title}}
{% endfor %}
This iterate through all the children of your page, and display a link and the page title.
This question already has an answer here:
Issue with push/pulling my layout
(1 answer)
Closed 6 years ago.
This is my code:
<div class="row">
<div class="col-sm-12 col-lg-3">
A
</div>
<div class="col-sm-12 col-lg-9">
B
</div>
</div>
This is my template on desktop device:
+-------+-------+-------+-------+
| | |
| A | B |
| | |
+-------+-------+-------+-------+
This is my template on mobile device:
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
But I want my template to look like this on mobile device:
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
Is there any way to achieve this without having to change my initial structure?
You can use the col push & pull class to achieve this quite easily. There is a good explanation here which should help.
To spell it out, you need to move B above A, then pull A across 9 cols for large screen (col-lg-pull-9) and push B across 3 cols for larger screens( col-lg-push-3). Therefore, the code will be:
<div class="row">
<div class="col-sm-12 col-lg-9 col-lg-push-3">
B
</div>
<div class="col-sm-12 col-lg-3 col-lg-pull-9">
A
</div>
</div>
OK, reading your comments below, you stated you can't changes the order of the divs. Can you use jQuery? If so, try this:
$(document).ready(function(){
if ($(window).width() < 768){
alert("mobile");
$("#divB").insertBefore("#divA");
}
else {
alert("not mobile");
}
});
http://jsfiddle.net/humotrj0/173/
You can change the order in the HTML (first div B), being this the order for mobile, and change the order in desktop with col-lg-push-* and col-lg-pull-*.
See http://getbootstrap.com/css/#grid-column-ordering
You need to use the col-lg-push and col-lg-pull options
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<div class="row">
<div class="col-lg-9 col-lg-push-3">
B
</div>
<div class=" col-lg-3 col-lg-pull-9">
A
</div>
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right. View it working in Bootsnipp
I am trying to show only upcoming events from a list of events. Below is how I have tried to display.
<div class="row">
{% for item in items %}
{% if item.content['#node'].field_event_type.getValue()|first.value == 'upcoming' %}
<div class="col">{{item.content}}</div>
{% endif %}
{% endfor %}
</div>
But the output rendering is, the second event is displaying after the row div like below. I don't understand how this is happening as the for loop is inside the row div
<div class="row">
<div class="col"> content </div>
</div><div class="col"> content </div>
Expected output
<div class="row">
<div class="col"> content </div>
<div class="col"> content </div>
</div>
Twig does lots of things:
loading (open your Twig content)
parsing (create a parse tree from your Twig content)
compiling (browse that tree to create a php file)
caching (store the php file somewhere to avoid recompile it next time)
executing (execute the generated php file)
When a {% for %} is detected during parsing, Twig calls the token parser recursively until it finds {% endfor %} and builds a token tree. In your case, it would look like:
root
|
--- string
|
--- for
| |
| --- if
| |
| --- string
|
--- string
Then, Twig compiler crosses over that tree recursively and generates the corresponding php code. In that way, the following Twig loop:
{% for i in 1..5 %}
Value = {{ i }}
{% endfor %}
Compiles to this in PHP:
// line 1
$context['_parent'] = $context;
$context['_seq'] = twig_ensure_traversable(range(1, 5));
foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
// line 2
echo "Value = ";
echo twig_escape_filter($this->env, $context["i"], "html", null, true);
}
$_parent = $context['_parent'];
unset($context['_seq'], $context['_iterated'], $context['_key'], $context['i'], $context['_parent'], $context['loop']);
$context = array_intersect_key($context, $_parent) + $_parent;
As you can see, a {% for %} is no more than a simple foreach and as Twig tokens are stored into a tree, it is by design not possible to display contents located below a pair of open/close tags.
The only possibility I can see is that one of the tag you're using in Twig is playing with output buffering, and one of the methods you're using in your loop breaks the ob stack (like a ob_get_clean() without any ob_start() for example, that have been open previously).
My advice is to grep your twig file name into your cache directory (eg: grep -Ri 'test.twig' cache/) in order to see that file compiled to PHP, to understand exactly what it does, and debug it.
Instead of filtering your content in twig, filter the results in your Drupal view.
In the "filter criteria" on your view, select the field_event_type field and set it "is equal to" and select/add 'upcoming' as the option.
If you filter in the view, you don't have to mess with the twig template.
I know I can use this as an asset function:
<img src="{{ asset('images/logo/logo.png') }}" alt="Logo">
But is there a way to use an asset function using another function? Like this:
<img src="{{ asset('images/logos/{{ dominantItem.generateLogos | lower | replace({' ': '-'}) }}.png') }}" alt="Logos">
Obviously the code above is not working, am I missing something?
You can't nest twig tags like that, but you can use string concatenation to achieve what you want:
<img src="{{ asset('images/logos/' ~ (dominantItem.generateLogos | lower | replace({' ': '-'})) ~ '.png') }}" alt="Logos">