Every so often I like to refresh the look of my gallery which is built using the NextGEN gallery plugin. My latest update was to customise the NextGEN CSS to change the way it displays the gallery thumbnails when using the album shortcodes.
I like the gridview effect that shortcode [album id=n template=compact] provides but have been finding that it now feels a little tired. The thumbnails are small and enlarging them causes issues with the stepped border thats placed around them.
So, my question was, how to improve the look of the template=compact gridview appearance without doing anything complicated. The answer was to use the shortcode [album id=n template=extend] which provides larger thumbnails and then just tweak the CSS.
By modifying the NextGEN CSS it was possible to change the default listview appearance of the shortcode to my preferred gridview and then ‘pimp’ it a little to get a bolder appearance.
The following CSS changes were used to produce the layout in the right-hand image above. Depending on what you’d like to acheive you may wish to use all or some of them. Variables such as the height, width and colour may/would need to be adjusted for your own implementation. The theme I use with NextGEN gallery is Suffusion which comes which a facility to include custom CSS changes so I don’t need to edit CSS files. My changes therefore override rather than overwrite any CSS and are also therefore always carried forward when upgrading the NextGEN plugin. If you are editing CSS files directly then be sure to save a copy of the original in case of problems.
(1) Remove bolding from the titles and center them.
/* --- start customisation of album thumbnails --- */
/* style the album titles */
(2) Customise the container that holds the title, thumbnail and caption.
/* setup the box to hold the album title, image and description */
box-shadow: 10px 10px 5px #888888;
(3) Hide the album photo count as my page width caused it to wrap untidily. Increasing the album container width above wasn’t possible for me as that caused another issue. This change is optional depending on whether you want this information displayed or not and how it appears which will vary depending on the width of your page. Start off without doing this and see how it looks for you.
/* hide unwanted album photo count by setting colour to same as background in ngg-album */
(4) Center the thumbnail within the container.
/* center album thumbnail within its container */
To see the new layout in action you can visit my Japanese Arts Gallery website.
Is it possible would you please send the NextGen Galeryy style?
The CSS used for the gallery style that appears on pages such as http://japaneseartsgallery.com/gallery/woodblock-prints/osamu-sugiyama/ can be found in the post https://www.wpbugs.com/2013/05/nextgen-gallery-thumbnail-centering/.
On the Japanese Arts Gallery site, Nextgen ALBUM shortcodes (eg [album id=xx template=extend]) are used on pages ‘Gallery’ (my gallery page is an ALBUM!), ‘Woodblock Prints’, ‘Watercolours’ and ‘Non-Japanese Art’, Nextgen GALLERY shortcodes (eg. [nggallery id=xx template=caption]) are on pages with artist names eg. as “Toshi Yoshida’ and Takeji Asano’.
I took a look at your Japanese Arts Gallery and it made me feel very humble. It looks wonderful! I just started with wordpress some 5 weeks ago and produced a website that looks rather clumsy. The idea of the site is a sort of ‘Antiques Roadshow’ on the internet. People can upload photos of rare objects and inquire after their meaning and value.
I have a blog page that contains their uploads (photo + information + questions). This is the page I mean: http://www.bonabene.nl/jouw-bijdrage-in-beeld.
I tried to set up a NextGen Gallery here: http://www.bonabene.nl/wat-is-het-fotogalerij/wat-is-het-fotogalerij.
I would love to do away with my blog page and replace it with the gallery, but the gallery still looks awful. What can I do to make it look like your Japanese Arts Gallery? Keep it simple please, because I am a noob at html.