I would like to displays images s in the image bellow
I do know that I can use laravel chunk() helper function to achieve this which is what I have done but as bellow
#foreach ($images->chunk(4) as $key=>$image)
<div class="row">
#foreach ($image as $item)
#if ($key===0)
<div class="col-md-3">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#else
<div class="col-md-4">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#endif
#endforeach
</div>
#endforeach
this gives me the following result
From what you can see the rows not stopping at two and staking the remaining images as in the expected image. What could I be doing wrong or how could I do. The images could be as many as 200 and here I am just working with 12
Related
So I'm struggling to format an accordian in bootstrap 4 which I'm using alongside django
The basic issue with my formatting is illustrated in the picture below. The headline in the text is spilling over to outside the column of the accordian. I feel like this should be a simple fix but I can't figure it out. Code pasted below
<div class='col-xs-12 col-md-4'>
<h3> ATP tennis </h3>
<hr/>
<div id="accordion">
{% for obj in tennis %}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="first1 btn btn-link collapsed newwrap" data-toggle="collapse"
data-artid="{{obj.id}}" data-target="#tnis_{{ obj.id }}" aria-expanded="false"
aria-controls="tnis_{{ obj.id }}">
{{obj.headline}}
</button>
</h5>
</div>
<div id="tnis_{{ obj.id }}" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body body_pad"><a href='{{obj.url}}' target="_blank" class='body_col'>
{{obj.summary}} </a><br>
<div class="rght3">
<i id="{{obj.id}}" class="likes fa fa-thumbs-up" data-artid="{{obj.id}}" style="font-size:25px;color:#6666ff;"></i>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I feel like this should in theory be a pretty simple fix. Any help would be much appreciated. The {{obj.headline}} is the culprit that is spilling over (which sits within a button tag)
When I click outside the menu the drop-down menu is not closing. I have tried with functions but I was not able to solve it.
<div onclick="document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden')"; class="custom-menubutton">
<i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
</div>
</div>
<div class="custom-menu-cont hidden">
<div class="custom-menu">
<div class="arrow-up"></div>
<div>
<div class="custom-menu-item">
<a href="http://blog.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
<p class="custom-title">Blogs</p></a>
</div>
<hr style="margin-bottom: 10px; margin-top: 10px;">
<div class="custom-menu-item">
<a href="https://susper.com/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
<p class="custom-title">Susper</p></a>
</div>
<div class="custom-menu-item">
<a href="https://chat.susi.ai/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
<p class="custom-title">Susi</p></a>
</div>
<div class="custom-menu-item">
<a href="https://loklak.org/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
<p class="custom-title">loklak</p></a>
</div>
<div class="custom-menu-item">
<a href="https://phimp.me/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
<p class="custom-title">Phimp.me</p></a>
</div>
<div class="custom-menu-item">
<a href="https://pslab.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
<p class="custom-title">PS Lab</p></a>
</div>
<hr style="margin: 10px">
<div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
More on labs.fossasia.org
</div>
</div>
</div>
</div>
What changes I have to do to close the menu?
help me to close the dropdown menu.
Thanks in advance
You can use javascript to achieve that.
function hideDiv(){
document.getElementsByClassName('custom-menu-cont')[0].classList.remove('hidden');
}
document.addEventListener("click", hideDiv, false);
You can also remove onclick from <div class="custom-menubutton"> and write in javascript as it is a better convention.
function hideDivStopPropagation(e) {
document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden');
e.stopPropagation();
}
document.getElementsByClassName('custom-menubutton')[0].addEventListener("click", hideDivStopPropagation, false);
The easier way is to use JQuery.
$(document).on('click', function() {
$('.custom-menu-cont').toggleClass('hidden');
});
$('.custom-menubutton').on('click', function(e) {
e.stopPropagation();
$('.custom-menu-cont').toggleClass('hidden');
});
Note: I used e.stopPropagation() because, when you click on the div.custom-menubutton, It means I clicked on document too. So it runs hideDiv function and hides the menu always(Even if you click div to open dropdown). So e.stopPropagation() prevents your click propagating all the way to the document.
I've been trying to show items on the same line in bootstrap here is my code, it's was working before , but i think i messed it up , i'm kinda new to bootstrap, any help would be much appreciated.
<div class="row">
{% for album in all_albums %}
<div class="col-sm-4 col-lg-2">
<div class="thumbnail">
<a href="{% url 'music:detail' album.id %}">
<img src="{{ album.album_logo.url }}" class="img-responsive">
</a>
<div class="caption">
<h2>{{ album.album_title}}</h2>
<h4>{{ album.artist}}</h4>
<!-- Details -->
Details
<!-- Delete -->
<form action="{% url 'music:album-delete' album.id %}" method="post" style="display: inline;">
{% csrf_token %}
<input type="hidden" name="album_id" value="{{ album.id}} "/>
<button type="submit" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
</form>
<!--Favorite-->
<a href="#" class="btn btn-default btn-sm btn-favorite">
<span class="glyphicon glyphicon-star">{% if album.is_favorite%}active{% endif %}</span>
</a>
</div>
</div>
</div>
</div>
</div>
I'm trying to handle non existing variables in my controller which if the database is empty will return a view without any variables:
if(!$votes->findOneById(1) || !$images->findOneById(1)){
return $this->render('admin/stats_and_images.html.twig');
}
return $this->render('admin/stats_and_images.html.twig', [
'images' => $images->countVotesForAllImages(),
'image_podium' => $images->getTopNImages(3),
'form' => $form->createView(),
'votesToday' => $votes->votesToday(),
'votesMonth' => $votes->votesMonth(),
'votesTotal' => $votes->votesTotal()
]);
And in my view I'm trying to handle the lack of variables like so:
{% if (votesTotal[0][1] is defined) and (votesToday[0][1] is defined) and (votesMonth[0][1] is defined) %}
<div class="col-md-6">
<h4 class="sub-section--header">Liczba Oddanych Głosów:</h4>
<hr>
<p>
<div class="col-sm-6">
Dzisiaj:
<span class="text-info large-num">{{ votesToday[0][1] }}</span>
</div>
<div class="col-sm-6">
Ten miesiąc:
<span class="text-info large-num">{{ votesMonth[0][1] }}</span>
</div>
</p>
<p>
<strong>Głosów ogółem: </strong><span class="text-info large-num">{{ votesTotal[0][1] }}</span>
</p>
</div>
<div class="col-md-6">
<h4 class="sub-section--header">Wygrywające zdjęcia:</h4>
<p class="text-muted">Ten miesiąc</p>
<hr>
<div class="row text-center">
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[0][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[0][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[0][0].title}}"
class="site-thumbnail"
title="{{image_podium[0][0].title}} - {{image_podium[0][0].author}}">
</a>
<p><strong>Głosów: {{image_podium[0]['votes']}}</strong></p>
</div>
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[1][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[1][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[1][0].title}}"
class="site-thumbnail"
title="{{image_podium[1][0].title}} - {{image_podium[1][0].author}}">
</a>
<p>Głosów: {{image_podium[1]['votes']}}</p>
</div>
<div class="col-md-4">
<a
href="{{ asset("uploads/"~image_podium[2][0].fileName) }}"
target="blank">
<img
src="{{ asset("uploads/"~image_podium[2][0].fileName) | imagine_filter('my_thumb') }}" alt="{{image_podium[2][0].title}}"
class="site-thumbnail"
title="{{image_podium[2][0].title}} - {{image_podium[2][0].author}}">
</a>
<p>Głosów: {{image_podium[2]['votes']}}</p>
</div>
</div>
</div>
{% else %}
<h2 class="text-danger text-center">
No votes at the moment :)
</h2>
{% endif %}
But still despite the strict requirement of all three fields to be defined I'm getting this:
Variable "votesToday" does not exist.
And pointing to the <span class="text-info large-num">{{ votesToday[0][1] }}</span> portion of the view.
Why would this be happening? How can it be avoided?
send $votes to twig and check it with {{ dump(votes) }}
If it is a doctrine entity, check your getter. Perhaps is $votes->getVotesToday()
I'm trying to create a view where I show the bootstrap thumbnails on the same line, I've tried different methods and I'm showing thumbnails type list.
Here is my method in the controller:
public function show($id)
{
$properties = Property::find($id);
$files = File::where('property_id', $properties->id)->get();
return view('properties.show', compact('properties', 'files'));
}
This is my method in the view:
#foreach($properties->files as $index=>$file)
<div class="row">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
</div>
#endforeach
This way they are showing the images as thumbnails:
This should be the right way:
Can someone guide me to correct this small inconvenience?
You should loop inside your .row. The foreach method just repeats every code inside of it. So it was repeating <div class="row">...</div> every single time.
<div class="row">
#foreach($property->files as $index => $file)
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<img src="{{ URL::asset('uploads/products/' . $file->name) }}" alt="{{ $file->property_id }}" width="300" height="200">
<div class="caption">
<div class="caption" align="center">
<button onclick="return confirm('Está seguro eliminar esta imagen?')" class="button btn btn-danger btn-xs" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="material-icons delete-white">delete</i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>