Cell Numbers and grid icons in CE4 CRG albums and galleries

If you’re using CE4 CRG you’ll run into a conflict if you’re using Cell Numbers in the grid. What happens is that the Feedback and Download icons are placed in the lower left of the cell, the same place that the Cell Number appears.

ttg CE4 CRG grid cells
Grid icons are covering the Cell Numbers

There are a couple of solutions to this.

One solution is to not use the Cell Number in the first place (disable these in Appearance > Thumbnail Grid) . Instead, if you do want an cell identifying number you can include that in the metadata panel. In Image Info, use Sequence in either Metadata 1 or Metadata 2.

If using Publisher you’ll also have to set it up in Output Settings > Publisher Setup. The tokens are a bit different there. You’ll have to use {CellNumber} and {NumImages}. See the TTG Documentation for more on metadata tokens used in Publisher.

But, if you do want the cell numbers, another, more elegant option is to use custom css to move the download and feedback icons to the right side OR move the cell number to the right side. (To enable custom css, see the TTG documentation – custom css)
This code works for moving the download and feedback icons:

ul.grid-icons-bl {
bottom: 0px;
right: 0px;
}
ul.grid-icons-bl li {
float: right;
}

 

Feedback and Download icons moved to the right side of the cell
Feedback and Download icons moved to the right side of the cell

And this works for moving the cell number to the right in the CE4 Standard layout:

.ce4-standard .cellnumber {
right: 2px;
left: auto;
}

(If you’re using the Freewall (Masonry) layout, replace .ce4-standard with .ce4-freewall in the above code. If you’re using the Masonry, Rigid option, you’ll probably need to increase the pixel width in right: 2px; to better place the cell number. This will depend on how much cell padding you’ve dialed in when using Masonry, Rigid.)

 

Cell numbers moved to the right
Cell numbers moved to the right

Use one or the other. So far this looks to be working pretty good and I’ve not found any conflicts. What I’ve done is place both of these in my custom css file, commenting out one of them. This way, if I want to reverse the locations of the grid icons and the Cell Numbers all I need to do is comment out one and un-comment the other.

/*Move CRG grid cell icons to the right so Cell Numbers aren't covered
=================================================*/
ul.grid-icons-bl {
bottom: 0px;
right: 0px;
}
ul.grid-icons-bl li {
float: right;
}
/*Move CRG grid cell numbers to right so they're not covered by grid icons
=============================================================
.ce4-standard .cellnumber {
right: 2px;
left: auto;
}
*/

Above, the code to move the Cell Numbers is commented out. (see css syntax for more on css comments )

But these settings will most likely affect any regular galleries you have (especially if you choose to move the Cell Number). So if you want to target only CRGs with this styling you’ll have to modify your phplugins.php file to conditionally send one custom css file to CRG galleries and albums and another custom css file to the rest of the site. Something like this:

function ttg_head_end ( $style, $path ) {
if (G_STYLE == "CE4-CRG" ){
echo '
<link rel="stylesheet" href="/phplugins/css/crg-custom.css" />
';
} else {
echo '
<link rel="stylesheet" href="/phplugins/css/custom.css" />
';
}
}

So not only did we apply some custom css here, we applied it selectively to only CE4 CRG galleries and albums. Pretty slick. And not to difficult at all.

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.3
Pages module 1.2.3
Cart Add-on 4.1.5
Client Response Add-on 7.1.2
Theater Add-on 1.2.4
WordPress Add-on 1.2.3
Publisher 3.2.2

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts