Lay Theme Forum

Hi Lay Theme people,

I am loving the template and I am getting closer to achieve what I wanted which is amazing taking into account that I am begginer in terms of coding so first of all a big applause for the work you put in this one !

My question concerns the projects page where all my projects thumbnails appear :

1 - I have pictures in different sizes, some in landscapes and some in portrait, see here. I would like to set a fixed width and size for all the images which means a crop in for the portraits one. I have found detailed here on how to crop and center images using CSS but I can't manage to make it work on my website. I get lost in the class and CSS I should use. Could you help with this ?

2- Second question, I want to have a two-levels caption like on this website and have both captions leading to my project page. How can I achieve this ? Do I only need to add text below my project thumbnails using stack and making the text clickable (hyperlink) ?

Many thanks for your help,

Have a great day

Best,

Damien

Hi Marius,

Thanks for your time and support !

1 - Thanks a lot ! It works ;)

2 - For the question regarding the thumbnail sizes, I like your idea of using custom CSS but can't manage to make it work. I added theses lines :
.col .thumb img, #search-results-region .thumb

img.resize {
height: 250px;
}

.col {
position: relative;
width: 250px;
height: auto;
overflow: hidden;
}
.thumb img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: auto;
height: 250px ;
}

My images show in the preview of "customize" but when I publish the change I made, the thumbnails disappear completely.

Any help please ?

Best,

Damien

Hi Lay theme people,

I recently switched to lay template and I really like it but I have a couple of issues with how my images show on a project page. Basically, I'd like to present my pictures like on this page (http://diversions.mcslittlestories.com/kushalgupta/) being able to show 2 to 3 images per raw and alternate between 3 and 4 with a a small row gutter of 1% or 2%. The problem is that I don't see how I can achieve this. I tried these 3 options :
1 - If I use Image tab in the gridder, I always get big row gutter where a scroll down directly leads me to the next image showing directly in full screen. (exemple : http://www.damienrayuela.com/the-nam-ou-river)
2 - If I use "stack" I can't put one image right next to another.
3 - If I use the element grid I can't alternate one row with two images, and the next row with three images. I am forced to always have the same number of images per raw.

Second question : on this page (http://www.damienrayuela.com/category/projects/) I organized my projects by type but as the project are of different nature (video, portrait, landscape), the thumbnails are all of different sizes and it looks pretty messy. Is there a way to crop in these thumbnails so that they all have the same sizes ?

Many thanks for your help,
Look forward to read you,

Best,

Damien