[Feature request] project descriptions left or right of thumbnail in element grid

[thomasmaier]

Right now you can only position descriptions above, below or on thumbnail images. The possibility to have the descriptions be places left (or right) of the thumbnail would be nice. Possible?

Also the possibility to add usual styling to the descriptions text like in normal text fields would be nice (rather than just plain raw text).

[arminunruh]

@thomasmaier said in [Feature request] project descriptions left or right of thumbnail in element grid:

Also the possibility to add usual styling to the descriptions text like in normal text fields would be nice (rather than just plain raw text).

what do u mean exactly?

the project description text editor has styling buttons

Right now you can only position descriptions above, below or on thumbnail images. The possibility to have the descriptions be places left (or right) of the thumbnail would be nice. Possible?

ok i wrote it down

[thomasmaier]

@arminunruh Cool!

I meant "full" text field capabilities such as adding laytheme buttons)

[arminunruh]

ah i see! ok writing it down!

[piotr]

Hi there, thank you for the thread. I am struggling to find where to turn on the captions for the "Project Thumbnail Grid". Could you please direct me to the right place, thanks!

And is it still not possible to have captions for the "Project Thumbnail Grid" let's say bottom/top on the left/right?

Thanks for the help!

[arminunruh]

Hey, captions? Do you mean project titles?
A project thumbnail grid is showing project thumbnails. Those can have project titles or project descriptions, which are texts that are on the thumbnail or below the thumbnail.

In Customize → Project Thumbnail → Project Title

You can show or hide project titles for project thumbnails.

[arminunruh]

If you want to have texts to the right or to the left of a project thumbnail, I'm not sure if the project thumbnail grid is the right element to use.

Because in a project thumbnail grid, all the project thumbnails are really close to each other.

Here's a different thing you can do:

.captionright .caption{
    transform: translate(calc(100% + 20px), -100%);
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
}
.captionright:hover .caption{
    opacity: 1;
}
.captionleft .caption{
    transform: translate(calc(-100% - 20px), -100%);
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.captionleft:hover .caption{
    opacity: 1;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

Now in any page in the gridder insert an image somewhere to the right of a row like here:

Then click on the image once and click on 'Edit caption' above in this bar. And now enter your caption.
Then right-click on the image and click Set HTML class and ID.

As HTML class, enter:
captionleft

Now you can also right-click on that image and click Set link. This way you can link a project to this image. So this image will work kind of similarly to a project thumbnail.

Doing that, your text will appear to the left of this image.

And if you put an image on the left side in the grid like here.

Then you can just enter the class 'captionright' instead of 'captionleft'.

The CSS is currently written in a way where this text just appears when you hover over the image, but you can remove all the opacity-related CSS to have this text always displayed.

Or you could just simply insert a text element that's next to an image.

[arminunruh]

But maybe your question is how to turn on the project descriptions?
Cause maybe I was going into a wrong direction here with my answer above.

Project descriptions, you can read everything about here:
https://laytheme.com/documentation/project-description.html

[piotr]

hey @arminunruh

thanks a lot for your reply. I thought there is a possibility to add project titles only for a specific "Project Thumbnail Grid", within this window and not all the of them at the same time:

You are right that putting the text to the left or right of the "Thumbnail Grid" might be tricky as they are close to each other. That's why I wanted to target only one "Thumbnail Grid" which has only 1 column.

For now I could definitely use the option you described. But it would be helpful in future to turn project titles separately for different "Project Thumbnail Grids". At least for me, I am trying to layout all my work through it, as then I can add a new project - assign the right category and it's up online without a need to add the project to the page.

Thanks a lot!