Create Custom gpEasy Galleries Pages Tutorial

A question that has come up a few times on the gpEasy forum is, how can I make the Galleries page only display certain gallery pages? The short answer is you can't without hiding gallery pages, and that's not the goal.

The Galleries page (Special_Galleries) is a special page in gpEasy CMS that is designed to organize all gallery pages in one area. This is a handy feature but some people would like to control what Gallery pages are grouped together instead of displaying all gallery pages in one location. Well, there is an easy way to do it.

I've actually done it on this site. Partly to display how the final product of this tutorial will look and secondly to make the galleries for different sections of this site more "user friendly." Check out the gpEasy galleries and then the Tech galleries to see the end result. As you can see from the two "galleries pages" they only display the gallery pages pertinent to each section however, if you check the Galleries page you will see all galleries organized together. So, what I have is the Special_Galleries page that organizes all galleries in one area, then separate pages that I've organized in custom galleries.

Step 1 Create Gallery Pages as Usual
Create your gallery pages as usual. If you aren't sure about that then see the Create & Edit A Gallery Tutorial.

Step 2 Organize Special Galleries
Organize the Galleries page so the gallery pages are grouped the way you will want to group them on your custom galleries page. In other words, organize the Special Galleris page by "sections" or groupings.

Step 3 Create A Custom Galleries Page
We need to create a new page, not a new gallery page. In the File Manager create a new page and name it what you want your new Custom Galleries page to be. In my case I created two pages, one named 'gpEasy Galleries' and the other named 'Tech Galleries'

Step 4 Edit The New Custom Galleries Page
Just like any other gpEasy CMS page/file you will edit your new custom galleries page. Change the title to look the way you want and most likely delete the other text. Then enter the "source view" of the editor because we are going to paste some code from the Special Galleries page into your custom galleries page.

Step 5 Copy the Gallery Pages from Special Galleries Page
Now go to the Special_Galleries page. Open it in your browser in an "incognito" mode or logged out of gpEasy. We are doing this so we don't have to look at all the admin code--it add's a lot of code when logged in. Once viewing the Special_Galleries page view the source code in your browser, most likely Ctrl+U. Look through the code till you find the beginning of the Galleries page content. It should look something like one of the following two lines:

<h2>Galleries</h2><ul class="gp_gallery"><li>
OR
<h2>Galleries</h2><ul class="gp_gallery gp_galleries"><li>

Depending on the version of gpEasy CMS you are using you will see one or the other of the above lines.

Right after the h2 heading of "Galleries" is the unordered list of gallery pages, their links, captions, and everything you need to copy and paste into your custom galleries page.

What you need to do is copy the <li> to </li> that have the gallery pages you want to include in your custom galleries page. Those list items (<li></li>) need to be wrapped in an <ul class="gp_gallery"></ul> just like they are in the special galleries page. You can copy all the ul code from <ul> to </ul> and paste it into your new custom galleries page and then delete the list items (gallery pages) you don't want.

Since I've customized the styling of my galleries page and gallery pages I had some issues with styling with the ul class="gp_gallery" so I changed it  to class="mygalleries" and added that to my styling and everything worked fine.

For my Tech Galleries page (no longer exists) the code with the first gallery page added looked like:

<ul class="mygalleries">
<li>
	<a href="/Bamix_Gallery" title="Bamix Gallery"> <img alt="" height="100" src="/data/_uploaded/image/thumbnails/image/techtips/bamix/bamix-04.jpg.jpg" width="100" /></a>
	<div>
		<a href="/Bamix_Gallery" title="Bamix Gallery">Bamix Gallery</a>
		<p>10 images</p>
	</div>
</li>
</ul>
<div style="clear:both;">
	&nbsp;</div>

It's all copied directly from the special galleries page. No need in me doing all kinds of work when the special galleries page has already done it. Once pasted into your new custom galleries page just save the page.

Step 6 Style Your Custom Galleries Page
Depending on your styling you may need to change the class or not, I did. You can read my styling galleries hack to find out how I styled my gallery pages. Everything is the same as shown on the hacks page with .mygalleries added to the galleries page styling. The end resulting code for my custom galleries, gallery pages, and special galleries page all in one is:

/* Galleries & Gallery pages */
.mygalleries, .gp_gallery {
	margin: 0;
	padding-left: 30px;
	clear: both;
}
.mygalleries li, .gp_gallery li {
	float: left;
	width: 170px;
	overflow: hidden;
	list-style: none;
	display: block;
	margin: 0 10px 10px 0;
	padding: 0;
	border: 1px solid #eee;
	height: 170px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	-o-border-radius: 9px;
	border-radius: 9px;
	background-color: #ffffff;
	background: none rgb(255,255,255) !important;
	position: relative;
	text-align: center;
}
.mygalleries div, .gp_gallery div {
	margin: 0;
	display: block;
	font-size: 12px;
}
.mygalleries div p, .gp_gallery div p {
	margin: 5px;
}
.mygalleries img, .gp_gallery img {
	left: 0px;
	top: 0px;
	position: relative;
	margin: 10px;
}
/* .GPAREA shows in gallery pages not special_galleries = Gallery Pages ONLY */
.GPAREA .gp_gallery li {
	width: 120px;
	height: 120px;
}
.GPAREA .gp_gallery div {
	display: none;
}
.GPAREA .gp_gallery img {
	left: 0px;
	top: 0px;
	position: relative;
	margin: 10px 0 0 0;
}

That code seems to be working for me on all my "gallery" type pages.

That's it for this gpEasy tutorial. This tutorial sounds a lot harder than it is. Really, all you are doing is creating a new page and copying the unordered list items from the Special_Galleries page.

 

gpEasy B2sq Theme by CS @True Acupuncture