ProfileGallery styling | force squared thumbs

8 years 1 month ago - 8 years 1 month ago #160114 by pepperstreet
Hi,
I tried to style and investigate the output of the gallery tab and their items. As far as I can see, there is no easy way to force a clean visual appearance. What I want: Force equal width and height for the thumbs. The thumbs itself might be cropped with the surrounding smaller DIV... and the property overflow "hidden".
but that would hide the maintenance actions (icons). How to pull this icons into the users view? mmmh...

Maybe those icons should be smaller and not so dominant. A rollover menu with those actions would be the "cherry on the cake" ;-)

Any thoughts and suggestions?
8 years 1 month ago #160543 by pepperstreet
More DIVs and CLASSes...
It seems i have to change the code output of the plugin to achieve the clean and minimal design. At least the maintenance icons have to be in a seperate DIV container. Then positioning and styling should be more versatile.
7 years 4 months ago #188185 by vedtam
Hi pepperstreet,

I have a similar problem, what you had. I would like to achieve nice equal sized thumbnails in the ProfileGallery, but I have no idea which file to pick in order to set a with for all images, and cropping their height via overflow...


Could you help me out, in case if you have managed to make this?

Thanks in advance,
ved
7 years 4 months ago #188218 by pepperstreet

vedtam wrote: ...set a with for all images, and cropping their height via overflow...


a quick and dirty way is to open

look around line 439
add a class to the DIV

change
$pgitemthumbnail			=	"<div style=\"height:" . $pgm_item_height . "px;\">" . "<img src=\"$pgitemthumbuserpath\" border=\"0\" height=\"$new_height\" width=\"$new_width\" title=\"$html_pgitemtitle\" alt=\"$html_pgitemtitle\" />" . "</div>";


to
$pgitemthumbnail			=	"<div class=\"YOURCLASS\" style=\"height:" . $pgm_item_height . "px;\">" . "<img src=\"$pgitemthumbuserpath\" border=\"0\" height=\"$new_height\" width=\"$new_width\" title=\"$html_pgitemtitle\" alt=\"$html_pgitemtitle\" />" . "</div>";

then add to your CSS file

.YOURCLASS {
overflow: hidden;
width: 60px;
height: 60px !important;


additionally you could alter the IMG tag CSS, and force a squared, slightly bigger image, ... so your DIV is properly filled up. Not ideal, because of image distortion... depends on your needs and claim.
7 years 2 weeks ago #200072 by zahmundzornig
Hi pepperstreet,

which file do you change for this "dirty" crop function? It could be enough for my community.

Thank you very much!
Mike

www.zahmundzornig.de thanx joomlapolis for the great work and support!
Build with CB: www.jaii.de
7 years 1 week ago - 7 years 1 week ago #200081 by pepperstreet
Did someone remove my filename in the previous post? Did I miss it, or maybe hacks are not allowed to post?!

I edited the module PHP file: mod_cbgallery.php

(If this post is not allowed, I will also send a PM to you.)


EDIT: Oooops, i mixed up my own requests and goals in one topic. You may have noticed..., I modified the gallery module for a cleaner look. The gallery tab just got some CSS changes and new icons. Sorry for the misunderstanding or any inconvenience!

Eventually, I did not use the ProfileGallery in my last project (yet). But if there is any sparetime, i will try and post a modification for the tab thumb display. Currently it does not have a suitable output for squared thumbs. You can simply hide the overflow of the surrounding DIV, but that would hide the edit-icons as well! Resizing the actual IMG tag directly is also not a good solution, because the edit-icons will have the wrong distance... stay tuned...

If anyone has a smart and waterproof way... don´t hesitate to post here ;-)
Moderators: beatnantkrileon
Time to create page: 0.414 seconds
Facebook Twitter Google LinkedIn