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

Phoca Gallery - image gallery extension
blackfox
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 15 Aug 2024, 16:23

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

Post by 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.

Tags:
User avatar
Benno
Phoca Hero
Phoca Hero
Posts: 9394
Joined: 04 Dec 2008, 11:58
Location: Germany
Contact:

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

Post by Benno »

Hi,
yes, this is possible. See images:

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

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

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

Kind regards,
Benno
blackfox
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 15 Aug 2024, 16:23

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

Post by 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.
User avatar
Benno
Phoca Hero
Phoca Hero
Posts: 9394
Joined: 04 Dec 2008, 11:58
Location: Germany
Contact:

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

Post by 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
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 15 Aug 2024, 16:23

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

Post by 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
Phoca Hero
Phoca Hero
Posts: 2801
Joined: 28 Nov 2010, 17:20

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

Post by 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
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 15 Aug 2024, 16:23

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

Post by 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
Phoca Hero
Phoca Hero
Posts: 2801
Joined: 28 Nov 2010, 17:20

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

Post by 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 :cry:
blackfox
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 15 Aug 2024, 16:23

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

Post by 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
Phoca Hero
Phoca Hero
Posts: 2801
Joined: 28 Nov 2010, 17:20

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

Post by 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
Post Reply