How to display categories as thumbnails with small folder icon and description below?

[blackfox]

Hi, I would like to show the categories als thumbnails with a small folder icon and the name of the category as a link below the thumbnail, as can be seen here: https://www.reisefotografien.eu/reisefotografien. Is it possible to achieve this with Phoca Gallery for Joomla 5? I don't seem to find the right options for this and would be very grateful for directions. Thanks in advance.

[Benno]

Hi,
yes, this is possible. See images:

Backend --> Components --> Phoca Gallery --> Themes:


Backend --> Components --> Phoca Gallery --> Styles:


Phoca Gallery Theme Standard you will find here: https://www.phoca.cz/download/66-phoca- ... ery-themes

Kind regards,
Benno

[blackfox]

Thank you, Benno!
I installed the theme Standard and unpublished the Simple theme. Now everything works well, except some minor issues I would like to resolve:
1. If a longer category description is wrapped, the folder icons are displayed in different sizes for every category (see screenshot). Is there a way to make the icons the same size for all categories?
https://i.imgur.com/cU7fPCX.png

2. How can I disable the number of images in a category to be displayed?

2. In the category view, an image icon is shown before the title of the image. How can I disable this?
https://i.imgur.com/iB8K1By.png

Can these settings perhaps be controlled by changing the CSS file of the theme?

Thank you very much in advance.

[Benno]

Hi,

Can these settings perhaps be controlled by changing the CSS file of the theme?

Yes, but I wouldn't change it there because it's not update-safe. If there is an update for the Phoca Gallery Standard Theme, your customizations would be overwritten. That's why it belongs in the custom.css or user.css of your template because these files usually have to be created first, so they cannot be overwritten during the template update.

To 1. I'm sure you can, but I have no idea how. In any case, it is also css.
@Christine und Jan, habt Ihr da eine Idee?

To 2. Paste this code into your custom.css or user.css

Code: Select all

/* Hides the number of images contained in a category in categories view */
.pg-category-box-count {
display: none;
}

Code: Select all

/* Hides the icon below Phoca Gallery images in category view */
.ph-si-image {
 display: none;
}

Kind regards,
Benno

[blackfox]

Thanks a lot, Benno!
I added the codes to the custom.css of my template, and now everything works like a charm.

Concerning the folder icons, I will try to find out with the Firefox Inspector and post the result if I'm successful.

Thanks again!
Great forum!

[christine]

Hi,

To 1)
You could try with:

Code: Select all

.ph-si.ph-si-category {
width: 1em;
height: 1em;
}

Code: Select all

svg.ph-si.ph-si-category {
width: 1em;
height: 1em;
}

Kind regards
Christine

[blackfox]

Hi Christine,
thanks for your reply.
Unfortunately, the code does not work with my template. If I add it to my custom.css, all the icons become smaller, but not the same size. The same, when I try with 2em, percentage or pixel values: all the icons become larger or smaller, but still not the same size.

Could this have something to do with my template? I made it with Template Creator, it's simple and not sophisticated.

[christine]

Hi,

Yes, unfortunately. I'm sorry. Because it is connected to the (longer) title. Until I find something else, you would have to change the font size of the title. .pg-item-box-title {.....}

Kind regards
Christine
Hi Benno

[blackfox]

Thank you, Christine.
I just agreed with the owner of the website to choose shorter titles for the categories. This would also look clearer and neater on the webpage. She already likes the page much more with the Standard theme, so thank you all!

Maybe the support for longer titles and the options to show or hide the number of images or the image icon could be considered as features for a future version of Phoca Gallery. Many thanks to @Jan for this great piece of software!

[christine]

Hi blackfox,

Thank you for your feedback!

A long time ago there were many styling etc. options.
We then agreed that the many different styling requests made things confusing for the user. In addition, nowadays you can do a lot with CSS. This is also due to the different templates etc. And/or template overrides.

https://www.phoca.cz/documentation/86-j ... g-user-css

Kind regards
Jan, Benno, Christine