I would like custom modification for my picture gallery thumbnail WordPress
- SOLVED
i would like custom modification for the gallery thumbnail i have
here is a sample of the image gallery i have
http://alqubaisi.net/?page_id=85
the thumbnail alignment is on the right, i would like to have it on the center, and instead of having only 7 thumbnails in a row i would like to have it more flexible depending on the person computer and resolution. at least 10-15 with the same thumbnail size.
Answers (8)
Arnav Joy answers:
in the demo page you have an extra div added
<div class="one_third">
this is causing it to display at right remove it and see
let me know if you any problem in removing it.
Arnav Joy comments:
add following lines to the screen.css found at
http://alqubaisi.net/wp-content/themes/core/css/
.page-template-gallery_t-php .one_third{ display:none;}
.page-template-gallery_t-php .two_third { float: none !important;
margin: 0 auto !important;}
and it will center the gallery ..
Arnav Joy comments:
for the other edits , i have to work in your files , let me know if you are interested .
send me mail at : [email protected]
Abdelhadi Touil answers:
The sollution gived by Arnav will work (I mean add display: none and other css tags to css file), but the best sollution in my opinion is to modify the code to remove the balnk div (<div class="one_third"></div>), and then change the right side width (<div class="two_third last"></div>) to 100% and remove float tag.
I'v tested these changes on my pc (by adding display:none to the right side) and you can see the result in the screenshot attached.
So we want the gallery_t.php code to modify it and then explain you the change to make in the css file. Please paste or send it.
Good luck.
Plugarized answers:
Download the following css which is modified to fit the gallery http://latinunit.net/screen.css just copy and paste it to your file
Or if you want it full responsive to fit to users screen here is the css http://latinunit.net/screen_full_responsive.css
Here is a video of the output http://www.screenr.com/et38
Also add and replace the following to the grid.php line 126
.page_caption, #page_content_wrapper {
width: 100%;
margin: auto;
margin-top: 25px;
}
iPad & iPhone 4s Compatibility******
Open the following links showing how responsive it is on my iPhone 4s
http://latinunit.net/iphone_4s.PNG
http://latinunit.net/iphone_4s_2.PNG
http://latinunit.net/iPad.png
Duncan O'Neill answers:
Hi at first glance it looks like this is fairly easily achievable with CSS.
If you want to message me with your details I can make your changes.
best,
Additional to arnav's code, the lines
.two_third {
float: left;
margin-right: 3%;
width: 64%;
}
will also need updating with something like
.two_third {
width:90%;/* widens the div */
margin:0 auto;
float:none;
}
to make the containing div wider, and thus allow for more columns than seven to display.
Add those lines to the bottom of your screen.css
Agus Setiawan answers:
there's 2 columns on that pages, left and right. left column is blank column, and right column filled with thumbnail. i think you have to remove left column, there will be only 1 column, and left column will automaticly replaced with thumbnail.
Martin Pham answers:
hi there,
i can help you. Please sent file : <strong>gallery_t.php</strong> from your theme to mail [email protected]
Regards,
Martin
daas answers:
Hi,
I have created responsive gallery once ( Please see attachment ). Images has adjustable width, to fit various resolutions. I can handle your request, just send me login details: [email protected]
Hai Bui answers:
As other experts said, removing the left column and expanding the right column to 100% of the width will solve one part of the problem but the thumbnails will not be centered in responsive layouts (e.g. on iPad and iPhone). It would require more edits to make it work on all browsers/devices. I can help you with that if you are interested, contact me at [email protected]