Topic Closed

Hi there,

I am a newbie on web development, and currently I am trying gpeasy cms.

I am looking for help to modify the gallery page, for the thumbnail I don't wanna have the caption, just wanna the sqaure around pic nicely which I can put more pic on the same line. How can I change from the coding site?

Waiting for some expert to help. Thanks a lot!


10 years ago#461

anybody can help pls?

10 years ago#477

Charles S
448 Posts
2 Themes
8 Plugins

Looked into it but couldn't figure it out either. Hopefully Josh or someone more knowledgeable will get a chance to answer your Q. I think they are currently rather busy as things have been a bit quiet here. I would just give it some time.

You might want to add it as a feature request--the ability to show/hide captions in galleries. I'm sure that would be a feature many would enjoy especially if it's per page/gallery an not all or nothing. 

Sorry I couldn't help.

10 years ago#478

85 Posts
1 Plugins

Make a look at line 337 / 341 in /include/tools/editing_gallery.php ;).

10 years ago#482

42 Posts
6 Themes

Hi Liang,

Like strodtbeck said, it might be a good feature request for upcoming releases. With the current release you don't have control over the gallery thumbnail display through your admin panel, so, the only way i have figured out is to hardcode the additional.css located in your include/css/ folder, this is not a good way to deal with it because then you will have to replace this file with the hacked one every time you upgrade gpEasy!!

Anyway if you would like to try it out, download this file, backup your original include/css/additional.css and replace it with this one.

The default thumbnail size generated by gpEasy is 100x100px, so if you haven't changed that, this css file should work for you!

(changing default generated size can be done in the file cybermax mentioned)

It does however still show caption text if you include it when creating your gallery page in the admin panel, but since i dont add text to the thumbs it worked great for me.

Take a look at lines 50 to 71 of the downloaded file, if you understand css you can always change the looks of the square behind the image and it's size (note: default generated thumbnail size has to be accounted for before messing with the css).

This is not a real solution, but a rather a 'patch', at least until it becomes a feature in the admin panel.

Hope it helps.


Edited: 10 years ago#483

Charles S
448 Posts
2 Themes
8 Plugins

That's great. I found the code in the php but wasn't very clear on how to edit it myself for the css. Thanks. I tested it out and it looks great. 

10 years ago#485

Dear Jimmy,

Thank you very much, I tried out and it looks great! I will keep trying this. Thanks again for help!


10 years ago#495

Charles S
448 Posts
2 Themes
8 Plugins


I found another type of image gallery you might be interested in. It's all css and rather easy do to. Its called Hoverbox and you can find it here.

It's rather easy to work with. If you want to display a thumbnail and the full size image you simple use the thumbnail as the first image and the full as the second which has a class="preview" and remove all the css for img width and height. That way it will display the thumb and full image.

Here's what I changed it to:


.hoverbox {cursor:default; list-style:none;}
.hoverbox a {cursor:default;}
.hoverbox a .preview { display:none;}
.hoverbox a:hover .preview {display:block; position:absolute; top:21px; left:-45px; z-index:1;}
.hoverbox img { background:#fff; border-color: #aaa #ccc #ddd #bbb; border-style:solid; border-width:1px; color:inherit; padding:2px;vertical-align:top;}
.hoverbox li { background:#eee; border-color:#ddd #bbb #aaa #ccc; border-style:solid; border-width:1px; color:inherit; display:inline;float:left; margin:3px; padding:5px; position:relative;}
.hoverbox .preview {border-color:#000; }
then the HTML would be something like this for gpeasy uploaded images:
<ul class="hoverbox"><li>
<a href=""><a href=""><img alt="" src=".././/data/_uploaded/image/thumbnails/image/your-image.jpg.jpg" /><img alt="" class="preview" src=".././/data/_uploaded/image/your-image.jpg" /></a></li></ul>
It gives an easy option for another gallery type. Doesn't require javascript, no captions, and easy to put together.
10 years ago#511

Charles S
448 Posts
2 Themes
8 Plugins

An easier way to do all of this. . . somewhat anyways ;)

Just use syndicatefx'c css and copy out the gallery part:

.gp_gallery li { width:120px; background-color:#f6f6f6; border:1px solid #eee; list-style:none; display:inline-block; float:left; margin:0 5px 5px 0; color:#333; position:relative; }
.gp_gallery div { margin-top:125px; }
.gp_gallery div p { margin-top:-2px; font-size:10px; }
.gp_gallery img { left:10px; top:10px; position:absolute; }
add it to your theme's css and delete all the .gp_gallery items  from the ../include/css/additional.css file.
This will allow you to modify it along with your theme. And when you upgrade gpEasy just delete the .gp_gallery items form the additional.css file.
An alternative to adding it to your theme is to make a separate css. You can call css files either by adding them into the template before </head> or within gpEasy in any html editable area--the header, side menu, footer, etc. 
It would be nice to be able to add the css call to the gallery page itself within gpEasy; however, there is no code view, thus you would have to do that directly in the page.php file for that particular gallery.
By separating out the css you can call a different css for each gallery.
Edited: 10 years ago#555

Topic Closed



elFinder 2.1.50 in Upcoming Release

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In