View Full Version : Gallery description truncation?
wellman
Jan-08-2006, 11:45 AM
Is it possible to disable the truncation of gallery descriptions? I see that all the text is contained in the "description" div, but that it gets truncated after all the height is used up (I think). I don't actually want to increase the height of all these divs - just the ones that need it to show all my text. Is there an easy way to do this in CSS? Thanks!
{JT}
Jan-08-2006, 01:34 PM
We don't truncate the description on the gallery page itself, so you must be referring to your homepage? Send a link to the page you are talking about and maybe I can clarify more ...
Is it possible to disable the truncation of gallery descriptions? I see that all the text is contained in the "description" div, but that it gets truncated after all the height is used up (I think). I don't actually want to increase the height of all these divs - just the ones that need it to show all my text. Is there an easy way to do this in CSS? Thanks!
wellman
Jan-08-2006, 02:20 PM
We don't truncate the description on the gallery page itself, so you must be referring to your homepage? Send a link to the page you are talking about and maybe I can clarify more ...
Whoops - I should have been more specific. I am indeed referring to my homepage, linked here: http://wellman.smugmug.com/
A good example is in my featured galleries. Both galleries have their descriptions truncated by an ellipsis right now. I'd like all the text to show. Thanks!
{JT}
Jan-08-2006, 02:40 PM
Actually - we force the truncation (in software) for several reasons - and there is no css around it :(
Well, there is a way around it, but you will still be limited to the 80-120 character limit we impose. You could write an "opening" description, then put the more detailed oriented description after it and wrap each in css classes.
New description:
<div class="shortDesc">Our day at the beach!</div>
<div class="longDesc">On Saturday August the second of the year two thousand and five, we drove our car down to the ...</div>
CSS Code:
.homepage .shortDesc, .galleryPage .longDesc {
display: block;
}
.galleryPage .shortDesc, .homepage .longDesc {
display: none;
}
Of course their are some other pages that the descriptions can be seen on depending on your set up, but that should be enough to get you started.
Whoops - I should have been more specific. I am indeed referring to my homepage, linked here: http://wellman.smugmug.com/
A good example is in my featured galleries. Both galleries have their descriptions truncated by an ellipsis right now. I'd like all the text to show. Thanks!
wellman
Jan-08-2006, 07:10 PM
Thanks for the idea and the quick reply.
fourfather
Feb-13-2006, 04:52 AM
Actually - we force the truncation (in software) for several reasons - and there is no css around it :(
Well, there is a way around it, but you will still be limited to the 80-120 character limit we impose. You could write an "opening" description, then put the more detailed oriented description after it and wrap each in css classes.
New description:
<div class="shortDesc">Our day at the beach!</div>
<div class="longDesc">On Saturday August the second of the year two thousand and five, we drove our car down to the ...</div>
CSS Code:
.homepage .shortDesc, .galleryPage .longDesc {
display: block;
}
.galleryPage .shortDesc, .homepage .longDesc {
display: none;
}
Of course their are some other pages that the descriptions can be seen on depending on your set up, but that should be enough to get you started.
A little help please:
I tried this strategy and even used JT's text for testing.
It worked fine here (where only longDesc displays): http://photos.knoll-family.com/gallery/1121320
but not on the following two pages where only shortDesc is supposed to display but both shortDesc and longDesc are appearing:
http://photos.knoll-family.com/
http://photos.knoll-family.com/Galleries/149342
Thanks in advance,
Jay
fourfather
Feb-14-2006, 03:04 PM
A little help please:
I tried this strategy and even used JT's text for testing.
It worked fine here (where only longDesc displays): http://photos.knoll-family.com/gallery/1121320
but not on the following two pages where only shortDesc is supposed to display but both shortDesc and longDesc are appearing:
http://photos.knoll-family.com/
http://photos.knoll-family.com/Galleries/149342
Thanks in advance,
Jay
Any ideas on this one? JT?
Andy
Feb-14-2006, 03:32 PM
Any ideas on this one? JT?
I will look tonight.
Having your SMUGMUG name truly helps us....
http://knoll.smugmug.com/
http://knoll.smugmug.com/Galleries/149342
Andy
Feb-14-2006, 03:49 PM
I will look tonight.
Having your SMUGMUG name truly helps us....
http://knoll.smugmug.com/
http://knoll.smugmug.com/Galleries/149342
I've tried and I can't seem to figure it out. Will ask JT once things settle down a bit :D
Andy
Feb-14-2006, 04:21 PM
The closest I can come is this:
.category .longDesc {display: none;}
trying to make it work on the subcategory page... can't seem to get it :D
Andy
Feb-14-2006, 05:42 PM
Took me nearly all night to figure out what's goin on :D
.subcategory .longDesc {display: none;}
works. But not if you are over the charachter limit.
fourfather
Feb-15-2006, 03:56 AM
Took me nearly all night to figure out what's goin on :D
.subcategory .longDesc {display: none;}
works. But not if you are over the charachter limit.
Thanks so much!
LeDude
Apr-20-2006, 11:47 AM
The closest I can come is this:
.category .longDesc {display: none;}
http://ledudeprojects.smugmug.com/Non-Music
This is working everywhere else, but displaying both within Catergory pages.
turnerphoto
Aug-11-2006, 07:21 PM
I am trying as well to (preferably) eliminate the gallery description showing on the gallery categories page. I have tried the short description/long description thing but then both the short & the long are showing up:
http://www.turnerphotography.smugmug.com/gallery
Help!
Thanks
Lisa
yapleo
Sep-15-2006, 10:07 AM
For multi-byte characters, the truncation seems odd.
Sometimes even a gallery description with 10 words will also be truncated.
It's too short. :scratch
So I write a small function to display all the gallery discription.
Copy the following code to javascript section
//
// expandGalleryDescription - Payne Cheng
//
function expandGalleryDescription() {
re1 = /^([^:]*)\s*:\s*(.*)/;
re2 = /^(.*)\s*\.\.\.\s*(.*)/;
divTags = document.getElementsByTagName("div");
for (i=0; i<divTags.length; i++)
{
if (divTags[i].className == "miniBox")
{
dTags = divTags[i].getElementsByTagName("div");
pTags = divTags[i].getElementsByTagName("p");
aTags = dTags[0].getElementsByTagName("a");
iTags = aTags[0].getElementsByTagName("img");
if ( re1.exec(iTags[0].getAttribute("title")) ) { $desc = RegExp.$2; }
if ( re2.exec(pTags[1].innerHTML) ) { pTags[1].innerHTML = $desc + RegExp.$2; }
}
}
}
And in footer section
********>
expandGalleryDescription();
</********
Here are some of my galleries with long chinese descriptions.
Sorry for those who don't read chinese. http://yapleo.smugmug.com/Travel/230698
BTW, the FAQ list is awesome, thanks a lot!!
BeachBill
Sep-18-2006, 10:31 AM
So I write a small function to display all the gallery discription.
Cool! :clap
It works. Now the complete non-HTML part of my gallery description is showing up on my homepage. THANK YOU!
BeachBill
Nov-06-2006, 03:15 AM
Actually - we force the truncation (in software) for several reasons
It would be really nice if you would truncate at the end of words, not in the middle of them... :dunno
If I get a chance, I might try modifying yapleo's expandGalleryDescription to provide a little bit longer description than standard and truncate at a word boundary...
BeachBill
Jan-15-2007, 09:20 AM
It would be really nice if you would truncate at the end of words, not in the middle of them... :dunno
If I get a chance, I might try modifying yapleo's expandGalleryDescription to provide a little bit longer description than standard and truncate at a word boundary...
Okay, so I actually did implement this code a couple months ago. It has been working quite well on my site. Gallery descriptions are now truncated on word boundaries based on the number of characters I specify (150 in my example code) and then an ellipsis is added at the end.
This includes Payne Cheng's expandGalleryDescription modified to call my smartTruncate function.
// smartTruncate by Bill Gerrard, http://www.PrimaryColors.com
// Truncate to maximum of maxLen characters on nearest word boundary, append ellipsis
function smartTruncate(sText, maxLen) {
if (sText.length <= maxLen) {
return sText;
} else {
var words = sText.split(" ");
var tmpText = "";
var i = 0;
while(i < words.length-1) {
outText = tmpText;
tmpText += words[i] + " ";
if (tmpText.length > maxLen) {
break;
}
outText = tmpText;
i++;
}
return outText.substring(0,outText.length-1) + " ...";
}
}
//
// expandGalleryDescription - Payne Cheng
//
function expandGalleryDescription() {
re1 = /^([^:]*)\s*:\s*(.*)/;
re2 = /^(.*)\s*\.\.\.\s*(.*)/;
divTags = document.getElementsByTagName("div");
for (i=0; i<divTags.length; i++)
{
if (divTags[i].className == "miniBox")
{
dTags = divTags[i].getElementsByTagName("div");
pTags = divTags[i].getElementsByTagName("p");
aTags = dTags[0].getElementsByTagName("a");
iTags = aTags[0].getElementsByTagName("img");
if ( re1.exec(iTags[0].getAttribute("title")) )
{
$desc = RegExp.$2;
}
if ( re2.exec(pTags[1].innerHTML) )
{
pTags[1].innerHTML = smartTruncate($desc + RegExp.$2, 150);
}
}
}
}
scoodog
Apr-14-2007, 07:13 PM
Is it possible to disable the truncation of gallery descriptions? I see that all the text is contained in the "description" div, but that it gets truncated after all the height is used up (I think). I don't actually want to increase the height of all these divs - just the ones that need it to show all my text. Is there an easy way to do this in CSS? Thanks!
I have a solution to the original request that appears to work! It's a combination of ideas offered in other replies plus some unique footer JavaScript.
STEP 1.
Use the following format for your gallery descriptions:
<div class="shortDesc">Replace this yellow text with a short description : </div><div class="longDesc">Replace this red text with a long description</div>
The " : " -- with blank spaces to the left and right of the colon -- is critical. The JavaScript code below will look for this character pattern as the delimiter for cropping the overall description from the category or sub-category views.
STEP 2.
Add the following lines of CSS code:
.galleryPage .longDesc {display: block;}
.galleryPage .shortDesc {display: none;}
This code takes care of NOT displaying the short description on gallery pages.
STEP 3.
Add the following JavaScript to your footer section in-between script tags:
divTags = document.getElementsByTagName("div");
for (i=0; i<divTags.length; i++)
{
if ((divTags[i].className == "miniBox") || (divTags[i].className == "miniBox albumLarge")) {
pTags = divTags[i].getElementsByTagName("p");
var description = new String(pTags[1].innerHTML);
var a = description.indexOf(' : ');
if (a > 0) {
description = description.substring(0,a);
pTags[1].innerHTML = description;
}
}
}
That should do it! You can check this out on my smugmug site -- http://scoodog.smugmug.com -- in particular the gallery called "Hanging out with Max."
Let me know if you have any questions!
Tom
aka Scoodog
http://scoodog.smugmug.com
mountainpz
Oct-11-2008, 11:47 AM
Okay, so I actually did implement this code a couple months ago. It has been working quite well on my site. Gallery descriptions are now truncated on word boundaries based on the number of characters I specify (150 in my example code) and then an ellipsis is added at the end.
This includes Payne Cheng's expandGalleryDescription modified to call my smartTruncate function.
// smartTruncate by Bill Gerrard, http://www.PrimaryColors.com
// Truncate to maximum of maxLen characters on nearest word boundary, append ellipsis
function smartTruncate(sText, maxLen) {
if (sText.length <= maxLen) {
return sText;
} else {
var words = sText.split(" ");
var tmpText = "";
var i = 0;
while(i < words.length-1) {
outText = tmpText;
tmpText += words[i] + " ";
if (tmpText.length > maxLen) {
break;
}
outText = tmpText;
i++;
}
return outText.substring(0,outText.length-1) + " ...";
}
}
//
// expandGalleryDescription - Payne Cheng
//
function expandGalleryDescription() {
re1 = /^([^:]*)\s*:\s*(.*)/;
re2 = /^(.*)\s*\.\.\.\s*(.*)/;
divTags = document.getElementsByTagName("div");
for (i=0; i<divTags.length; i++)
{
if (divTags[i].className == "miniBox")
{
dTags = divTags[i].getElementsByTagName("div");
pTags = divTags[i].getElementsByTagName("p");
aTags = dTags[0].getElementsByTagName("a");
iTags = aTags[0].getElementsByTagName("img");
if ( re1.exec(iTags[0].getAttribute("title")) )
{
$desc = RegExp.$2;
}
if ( re2.exec(pTags[1].innerHTML) )
{
pTags[1].innerHTML = smartTruncate($desc + RegExp.$2, 150);
}
}
}
}
BeachBill, I am just a newbie. Where do I enter that code you posted? Do I need to add anything in the custom footer? Thanks!
BeachBill
Oct-13-2008, 07:29 PM
BeachBill, I am just a newbie. Where do I enter that code you posted? Do I need to add anything in the custom footer? Thanks!
SmugMug has made some changes since I posted that code, so I have slightly updated on code.
Put the following code in your Footer Javascript. Do not use any of the code or instructions in yapleo's message as this incorporates that code.
// smartTruncate by Bill Gerrard, http://www.PrimaryColors.com
// Truncate to maximum of maxLen characters on nearest word boundary, append ellipsis
function smartTruncate(sText, maxLen) {
if (sText.length <= maxLen) {
return sText;
} else {
var words = sText.split(" ");
var tmpText = "";
var i = 0;
while(i < words.length-1) {
outText = tmpText;
tmpText += words[i] + " ";
if (tmpText.length > maxLen) {
break;
}
outText = tmpText;
i++;
}
return outText.substring(0,outText.length-1) + " ...";
}
}
//
// expandGalleryDescription - Payne Cheng
//
function expandGalleryDescription() {
re1 = /^([^:]*)\s*:\s*(.*)/;
re2 = /^(.*)\s*\.\.\.\s*(.*)/;
divTags = document.getElementsByTagName("div");
for (i=0; i<divTags.length; i++)
{
if (divTags[i].className == "miniBox")
{
dTags = divTags[i].getElementsByTagName("div");
pTags = divTags[i].getElementsByTagName("p");
aTags = dTags[0].getElementsByTagName("a");
iTags = aTags[0].getElementsByTagName("img");
if ( re1.exec(iTags[0].getAttribute("title")) )
{
$desc = RegExp.$2;
}
if ( pTags[1] && re2.exec(pTags[1].innerHTML) )
{
pTags[1].innerHTML = smartTruncate($desc + RegExp.$2, 150);
}
}
}
}
if (YD.hasClass(document.body, 'homepage')) { expandGalleryDescription(); }
mountainpz
Dec-09-2008, 12:59 PM
SmugMug has made some changes since I posted that code, so I have slightly updated on code.
Put the following code in your Footer Javascript. Do not use any of the code or instructions in yapleo's message as this incorporates that code.
// smartTruncate by Bill Gerrard, http://www.PrimaryColors.com
// Truncate to maximum of maxLen characters on nearest word boundary, append ellipsis
function smartTruncate(sText, maxLen) {
if (sText.length <= maxLen) {
return sText;
} else {
var words = sText.split(" ");
var tmpText = "";
var i = 0;
while(i < words.length-1) {
outText = tmpText;
tmpText += words[i] + " ";
if (tmpText.length > maxLen) {
break;
}
outText = tmpText;
i++;
}
return outText.substring(0,outText.length-1) + " ...";
}
}
//
// expandGalleryDescription - Payne Cheng
//
function expandGalleryDescription() {
re1 = /^([^:]*)\s*:\s*(.*)/;
re2 = /^(.*)\s*\.\.\.\s*(.*)/;
divTags = document.getElementsByTagName("div");
for (i=0; i<divTags.length; i++)
{
if (divTags[i].className == "miniBox")
{
dTags = divTags[i].getElementsByTagName("div");
pTags = divTags[i].getElementsByTagName("p");
aTags = dTags[0].getElementsByTagName("a");
iTags = aTags[0].getElementsByTagName("img");
if ( re1.exec(iTags[0].getAttribute("title")) )
{
$desc = RegExp.$2;
}
if ( pTags[1] && re2.exec(pTags[1].innerHTML) )
{
pTags[1].innerHTML = smartTruncate($desc + RegExp.$2, 150);
}
}
}
}
if (YD.hasClass(document.body, 'homepage')) { expandGalleryDescription(); }
Thanks BeachBill. I now want to apply the longer truncated gallery descriptions to all galleries in the following category: http://zizka.smugmug.com/HikingTrips How would I modify the code to make that happen?
Thanks very much!
mountainpz
Dec-10-2008, 03:30 PM
Thanks BeachBill. I now want to apply the longer truncated gallery descriptions to all galleries in the following category: http://zizka.smugmug.com/HikingTrips How would I modify the code to make that happen?
Thanks very much!
BUMP.
jchin
Jun-01-2009, 01:37 PM
HELP!
The code works on this page:
http://galleries.jchinphotography.com/Weddings%20&%20Engagements
but not on this one:
http://galleries.jchinphotography.com/School%20Events
Why? :scratch:scratch:scratch
jchin
Jun-01-2009, 01:40 PM
HELP!
The code works on this page:
http://galleries.jchinphotography.com/Weddings%20&%20Engagements
but not on this one:
http://galleries.jchinphotography.com/School%20Events
Why? :scratch:scratch:scratch
Actually ... in the case of the Schools category page, it is not even using the descriptions of the albums, it is using the titles. Why? Is something wrong with the JavaScript code given in this thread?
jchin
Jun-01-2009, 01:43 PM
For ease of seeing the code I am using ... slightly modified smartTruncate code from what was given above ... did I make a mistake somewhere?
Thank in advance for your help.
// smartTruncate by Bill Gerrard, http://www.PrimaryColors.com
// Truncate to maximum of maxLen characters on nearest word boundary, append ellipsis
// modified by Johnny Chin to also truncate at '[' (but not at beginning of string)
function smartTruncate(sText, maxLen) {
var longText = (sText.length <= maxLen);
if (longText) {
var words = sText.split(' ');
var tmpText = "";
var i = 0;
while(i < words.length-1) {
outText = tmpText;
tmpText += words[i] + " ";
if (tmpText.length > maxLen) { break; }
outText = tmpText;
i++;
}
var tmpText = outText.substring(0,outText.length-1);
} else {
var tmpText = sText;
}
var sLoc = tmpText.indexOf(' [');
if (sLoc > 0) {
var rText = tmpText.substring(0,sLoc);
} else {
var rText = tmpText;
}
if (longText) {
return rText + " ...";
} else {
return rText;
}
}
//
// expandGalleryDescription - Payne Cheng
//
function expandGalleryDescription() {
re1 = /^([^:]*)\s*:\s*(.*)/;
re2 = /^(.*)\s*\.\.\.\s*(.*)/;
divTags = document.getElementsByTagName("div");
for (i=0; i<divTags.length; i++)
{
if (divTags[i].className == "miniBox")
{
dTags = divTags[i].getElementsByTagName("div");
pTags = divTags[i].getElementsByTagName("p");
aTags = dTags[0].getElementsByTagName("a");
iTags = aTags[0].getElementsByTagName("img");
if ( re1.exec(iTags[0].getAttribute("title")) )
{
$desc = RegExp.$2;
}
if ( pTags[1] && re2.exec(pTags[1].innerHTML) )
{
pTags[1].innerHTML = smartTruncate($desc + RegExp.$2, 150);
}
}
}
}
jchin
Jun-01-2009, 11:23 PM
After a few hours of hacking the JavaScript ... I learned a lot from it ... I got the gallery description truncation to work for my needs.
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.