Titles above thumbnails

Hi Anthony,

If I understand correctly, you’ll likely want to use the dg_icon_template to customize the template as documented in the Installation tab, but can you clarify what exactly you are trying to do?

-Dan

Hi Dan,

Thank you for responding quickly, yes i would like to customize the template, by default the titles are created at the bottom and i tried to moved them at the top with the same formatting ( as i don’t use descriptions i searched to replace them ) but i’m not able to figure this out.

Do you have understood what i’m trying to do ?

– Anthony

https://imageshack.com/a/img538/7093/LrZbc1.png

Hi Anthony,

Yes, you will need to use the dg_icon_template filter documented on the Installation tab in order to get the customized appearance you are looking for.

-Dan

Hi Dan,

I would also like to display the titles above the thumbnails rather than below them and I’m not at all sure how to about about actually achieving that using dg_icon_template?

Do I need to add some filters to my functions.php file or something? Could you help me work out exactly what code to add there? (or somewhere else if that is indeed the case).

Thanks,

Josef.

PS Many thanks for your superb plugin (just rated you 5 stars – btw, I’ve looked for a plugin like this quite a few times over the years and never found yours before – I was searching for things like “document library” rather than gallery… just though perhaps you might like to do some more work on making your excellent plugin more discoverable ?? )

Hi Josef,

Firstly, thanks so much for the review! Glad to hear our work is appreciated. And you make a good point on the visibility — I don’t think the tags that identify DG have changed much since I first started it half a decade ago. I’ll look at them again soon. At minimum, I think library would be a good keyword to have.

Now, regarding your flipping of text and image, with the changes in 4.0, there are some non-code changes we can consider since we fixed some issues with the output structure that previously made styling much more challenging. I did a bit of playing with things and got this which works as long as you don’t have any titles that wrap to multiple lines. If you did, you’d have to be a bit more clever, but still should be doable I think. I’m no CSS expert, so this is what I came up with — feel free to improve upon it.

.document-icon { position: relative; padding-bottom: 1.5em }
.document-icon .title { position: absolute; top: 0 }
.document-icon img { position: relative; top: 1.5em }

-Dan

Thanks Dan,

I do have titles with multiple lines so that doesn’t quite work for me but I’ll have a play around when it isn’t 3am

BTW, I actually spotted that styling stuff must’ve changed because the custom css I previously had stopped working and I had to do it all again! Got pretty annoyed at the time (web dev stuff does that to me), but was easy enough once I realised what had happened.

Thanks for your help,

Josef.

Ah! Yes, I’m sorry about that. We knew it would be inconvenient for users, but the hope was that long term it would make for much more easy access to styling everything.

I’ll pass this thread along to the front-end expert of the team and he may have some better ideas for a good CSS solution.

-Dan

OK, thanks Dan.

What I’d really like is something like this:

Title title title title title title title title title

Icon icon Description description description description
Icon icon description description description description
Icon icon
Icon icon
Icon icon

So, the title running across the width of the whole row, and the top of the description inline with the top of the icon.

I really don’t mind whether this is achieved with CSS or code but I’m struggling to do it and so would be great if we can work out…

Thanks in advance,

Josef.