search

devlom / grav-theme-hola

Hola is a modern and stylish vCard website template. Designed to be a resume, vCard, portfolio template, it’s the perfect template for creative designers, developers, freelancers, photographer or any creative profession. It is fully responsive and retina/hi-dpi ready. It will look great on any devices from desktop to mobile phones. It has blog page templates, working contact form, stylish portfolio section and other features you will only find on premium templates. Built with clean and organized code, this template is also very easy to customize.
MIT License
23 stars 7 forks source link

Portfolio image gallery only properly works with images in landscape format #2

Open qumuq-til opened 5 years ago

qumuq-til commented 5 years ago

Portfolio preview gallery only correctly displays images presented in landscape orientation. Often there's a need to display a vertically oriented image for a particular image/project.

The module shouldn't require users to provide all images in landscape format or even try to reformat them, instead just display them respecting their original ratio and orientation.

Dzi0nek commented 5 years ago

Hello the theme was originally made by Styleshout [https://www.styleshout.com/free-templates/hola/] so the portfolio image's being verically oriented is a must for now. We may come up with a feature for horizontally oriented images in the future.

qumuq-til commented 5 years ago

You mean horizontally oriented, i.e. landscape, are a must, right?

That's sadly a major issue for us. We're in the process of transferring a website dedicated to Interior Design from Wordpress/Kalium to Grav/Hola and we envisioned a page with some text followed by several images of a specific completed work and naturally those images have to come in both vertical and horizontal orientation.

We may try to work around that but wouldn't want to track all the custom changes to the theme that need to be re-instated after every update.

guismoale commented 5 years ago

First, thanks a lot for this great template! I have the same issue (I think). I know almost nothing of web development but looking around I found that changing the data-size on line 23 of grav-theme-hola/templates/modular/works.html.twig to something square and much larger and creating the images with black frames for different proportions "solves" the problem without any functionality issue. I'm not sure why only that part and tittle are hard coded to (I assume) the original image of "The Beetle Car".

Can someone point me on how to make it dynamic like the page.media[item.image].url is? Or maybe some way to get the sizes from that... Then I could replace the dimensions and it should work.

If not, my solution is kind of terrible, but it kind of works and allows me to show the image better.

Anyway, thanks, it has been very useful. I just need to solve that and figure out how to make a gallery of videos and it's perfect!

thdaraujo commented 5 years ago

@guismoale maybe this will help:

<a href="{{ page.media[item.image].url() }}" class="thumb-link" title="The Beetle Car" data-size="{{ page.media[item.image].width ~ "x" ~ page.media[item.image].height }}">

ref: is-there-a-simple-way-to-get-image-width-height-in-twig

guismoale commented 5 years ago

Yay! It works! Thanks!