I am working on creating a web page of image gallery using a web template, which manages images of various size in a grid and has a zoom-in feature, like this
So far I am only able to create a webpage of having images in a square card, like this
but this gets whitespace while adding a picture that is not square, like this
I am very new to CSS, please help me if you can.
Web template I have created
(I know I could have used the for loop, but the number of image is gonna be less than 6-7, so I didn’t).
Also, currently It doesn’t have the option to zoom-in the image.
{% set gallery = frappe.get_all('Gallery', fields=['*'], filters={'enabled': 1}, order_by='-(date)') %}
<h2 class="section-title">{{ title }}</h2>
{% if subtitle %}
<p class="section-description">{{ subtitle }}</p>date
{% endif %}
<div class="row mt-4">
{% for item in gallery %}
<div class="col-12">
<h3>{{ item.event_name }}</h3>
<h3>{{ item.date }}</h3>
<div class="row">
<div class="col-12 col-lg-4">
<img class="card-img-top" src="{{item.image_1 or 'https://api.adorable.io/avatars/200/'}}">
</div>
{% if item.image_2 %}
<div class="col-12 col-lg-4">
<img class="card-img-top" src="{{item.image_2 or 'https://api.adorable.io/avatars/200/'}}" style= display:block;>
</div>
{% endif %}
{% if item.image_3 %}
<div class="col-12 col-lg-4">
<img class="card-img-top" src="{{item.image_3 or 'https://api.adorable.io/avatars/200/'}}">
</div>
{% endif %}
{% if item.image_4 %}
<div class="col-12 col-lg-4">
<img class="card-img-top" src="{{item.image_4 or 'https://api.adorable.io/avatars/200/'}}">
</div>
{% endif %}
<div class="col-12 col-lg-4">
{% if item.image_5 %}
<img class="card-img-top" src="{{item.image_5 or 'https://api.adorable.io/avatars/200/'}}">
{% endif %}
</div>
{% if item.image_6 %}
<div class="col-12 col-lg-4">
<img class="card-img-top" src="{{item.image_6 or 'https://api.adorable.io/avatars/200/'}}">
</div>
{% endif %}
{% if item.image_7 %}
<div class="col-12 col-lg-4">
<img class="card-img-top" src="{{item.image_7 or 'https://api.adorable.io/avatars/200/'}}">
</div>
{% endif %}
{% if item.image_8 %}
<div class="col-12 col-lg-4">
<img card card-lg w-100 src="{{item.image_8 or 'https://api.adorable.io/avatars/200/'}}">
</div>
<br><br>
</div>
{% endfor %}
</div>