Variable Width Headings that Group Headshots by Teams

[David Miller]

Wondering if anyone has a solution or suggestion how to accomplish this. The attached PDF shows what we need far better than what I can put into words. Flip though all 4 pages and you'll see what I mean.

 

We are trying to group people into teams. There are 4 teams that always appear in the same order.

 

1. Onsite Team (Light Blue)
   
2. Service Leadership (Dark Blue)
   
3. Support Team (Light Green)
   
4. Regional Team (Dark Green)
   

The headshots always appear from the top left to bottom right. 6 across then a maximum of 4 rows down. 24 headshots maximum.

 

If less than 24 headshots are used. White space begins in the bottom right working it's way backwards.

 

The headshots have drop shadows or outer glows that use transparency. We will prepare them with the shadows.

 

For what it is worth, this will be a Versioned Product in MarcomCentral.

Whos_Who_Ellis_Poster.pdf

Edited April 19, 2018 by David Miller

[Fellsway]

That is quite a project. I'm looking forward to someones solution on how to tackle that.

[step]

I think you could use a table to achieve that layout. Each team member would be made up of two rows: the first row would be their team name and the second row would be there headshot/name/etc. Then you'd just horizontally straddle the first row for team members on the same team.

 

The tricky part, in my mind, is the fact that the team names don't just butt up to each other. So considering that, I would add two additional columns on each team member's table – one on the left and one on the right. These columns won't have any content but will allow us to manipulate the gap between each team member. The benefit over simply increasing the margins on our cells is that we can still allow the team name headers to straddle the dummy columns.

 

Anyway, I'm sure there's probably a better/more efficient way to do this but I thought I'd give it shot:

var columns = 6;
var rows = 4;
var teams = {
 'onsite team': { color: [72, 15, 0, 0] },
 'service leadership': { color: [94, 68, 1, 0] },
 'support team': { color: [64, 6, 100, 0] },
 'regional team': { color: [86, 30, 55, 9] }
}

// Assumes Field names:  Name1, Team1, Headshot1, Title1, etc
for (var i = 1; i <= columns * rows; i++) {
 var teamname = Field('Team' + i);
 if (!(team = teams[teamname])) continue;
 if (!team.members) {
   team.members = [];
   // Create the color for this team.
   FusionProColor.apply(null, [teamname].concat(team.color));
 }
 team.members.push({
   team: ToUpper(teamname),
   name: Field('Name' + i),
   headshot: CreateResource(Field('Headshot' + i) + '.pdf', 'graphic', true),
   title: Field('Title' + i)
 });
}

var data = [];
for (var team in teams) {
 if (members = teams[team].members)
   data = data.concat(members);
}

// Return nothing if no data was found.
if (!data.length) return '';

// Table configuration.
var colWidth = 1.5 * 7200;               // 1.5" Column
var spaceBetweenColumns = 0.125 * 7200;  // 1/8" Space between columns
var table = new FPTable();
// Add the columns to the table definition.
for (var col = 0; col < columns * 3; col++) {
 var width = col % 3 == 1 ? colWidth : spaceBetweenColumns / 2;
 table.AddColumn(width);
}

while (data.length) {
 var people = data.splice(0, columns);
 var team = false;
 var teamRow = table.AddRow();
 var picRow = table.AddRow();

 // Global styles.
 [teamRow, picRow].map(function (row) {
   var cell = row.Cells[0];
   cell.HAlign = 'Center';
   cell.VAlign = 'Middle';
   cell.Margins = { 'Top': spaceBetweenColumns / 10, 'Bottom': spaceBetweenColumns / 10, 'Left': 10, 'Right': 10 };
   row.CopyCells.apply(row, row.Cells.map(function (s, p) { return p; }));
   row.minHeight = 1800;
 });

 for (var i = 1; i <= teamRow.Cells.length && people.length; i += 3) {
   var person = people.shift();
   var teamCell = teamRow.Cells[i];
   var picCell = picRow.Cells[i];
   if (team && person.team == team.Content) {
     team.HStraddle += 3;
   } else {
     teamCell.ShadeColor = person.team;
     teamCell.ShadePct = 100;
     teamCell.HStraddle = 1;
     teamCell.Content = person.team;
     team = teamCell;
   }
   var headshot = person.headshot.exists ?
     person.headshot.content.replace('/>', 'width="' + colWidth - picCell.Margins.Left - picCell.Margins.Right + '"/>') : '';
   picCell.Content = [headshot, person.name, person.title].filter(String).join('<br>');
 }
}
return table.MakeTags();

[David Miller]

Thank you Ste. Much appreciated. Will give it a try.

[David Miller]

I don't seem to be able to get the table to show up. Any ideas what I might be missing?

 

Had to omit the last few headshots because of the forum's file size limitations.

2018_Whos_Who_Elis_Poster_v01.zip

[Fellsway]

David, I was messing around with what Ste provided and maybe my attachment can help.

Collect.zip

Edited April 30, 2018 by Fellsway

[David Miller]

Thank you Ste and Fellsway.

 

It seems that lines 4-8 are case sensitive. I changed them to title case to match the Field Names and a result was returned.

 

var teams = {
 'Onsite Team': { color: [72, 15, 0, 0] },
 'Service Leadership': { color: [94, 68, 1, 0] },
 'Support Team': { color: [64, 6, 100, 0] },
 'Regional Team': { color: [86, 30, 55, 9] }
}

[step]

I don't seem to be able to get the table to show up. Any ideas what I might be missing?

 

The team names in the 'teams' object need to match (case-sensitive) the team names in your data. So, in this case, you could modify the object definition to be:

var teams = {
 [color="Red"]'Onsite Team'[/color]: { color: [72, 15, 0, 0] },
 [color="Red"]'Service Leadership'[/color]: { color: [94, 68, 1, 0] },
 [color="Red"]'Support Team'[/color]: { color: [64, 6, 100, 0] },
 [color="Red"]'Regional Team'[/color]: { color: [86, 30, 55, 9] }
}

 

There are two other changes to note:

team.members.push({
 team: ToUpper(teamname),
 name: Field('Name' + i),
 headshot: CreateResource(Field('Headshot' + i)[color="red"], 'graphic', true[/color]),
 titleone: Field('TitleOne' + i),
 titletwo: Field('TitleTwo' + i)
});

 

person.headshot.content.replace('/>', 'width="' + [color="red"]([/color]colWidth - picCell.Margins.Left - picCell.Margins.Right[color="red"])[/color] + '"/>') : '';

[David Miller]

Thanks. The only difficulty now it changing the fonts and colors of the Team Headings independently of the Name and Titles.

[step]

Use span tags?

team.members.push({
 team: [color="Red"]'<span font="Arial" color="white">'[/color] + ToUpper(teamname) + [color="red"]'</span>'[/color],
 name: Field('Name' + i),
 headshot: CreateResource(Field('Headshot' + i), 'graphic', true),
 titleone: Field('TitleOne' + i),
 titletwo: Field('TitleTwo' + i)
});

[David Miller]

Use span tags?

team.members.push({
 team: [color="Red"]'<span font="Arial" color="white">'[/color] + ToUpper(teamname) + [color="red"]'</span>'[/color],
 name: Field('Name' + i),
 headshot: CreateResource(Field('Headshot' + i), 'graphic', true),
 titleone: Field('TitleOne' + i),
 titletwo: Field('TitleTwo' + i)
});

 

That worked! Except I had to apply the Span Tag to the Name, TitleOne and TitleTwo Fields and use the Text Editor to apply the font to the Team Field. (Strange.)

 

var columns = 6;
var rows = 4;
var teams = {
 'Onsite Team': { color: [72, 15, 0, 0] },
 'Service Leadership': { color: [94, 68, 1, 0] },
 'Support Team': { color: [64, 6, 100, 0] },
 'Regional Team': { color: [86, 30, 55, 9] }
}

// Assumes Field names:  Name1, Team1, Headshot1, TitleOne1, etc
for (var i = 1; i <= columns * rows; i++) {
 var teamname = Field('Team' + i);
 if (!(team = teams[teamname])) continue;
 if (!team.members) {
   team.members = [];
   // Create the color for this team.
   FusionProColor.apply(null, [teamname].concat(team.color));
 }
 team.members.push({
   team: ToUpper(teamname),
   name: '<span font="Frutiger LT Std 67 Bold Cn" pointsize="11" color="Black">' + Field('Name' + i) + '</span>',
   headshot: CreateResource(Field('Headshot' + i), 'graphic', true),
   titleone: '<span font="Frutiger LT Std 67 Bold Cn" pointsize="8" color="Black">' + Field('TitleOne' + i) + '</span>',
   titletwo: '<span font="Frutiger LT Std 67 Bold Cn" pointsize="8" color="Black">' + Field('TitleTwo' + i) + '</span>'
 });
}

var data = [];
for (var team in teams) {
 if (members = teams[team].members)
   data = data.concat(members);
}

// Return nothing if no data was found.
if (!data.length) return '';

// Table configuration.
var colWidth = 1.5 * 7200;               // 1.5" Column width.
var spaceBetweenColumns = 0.125 * 7200;  // 1/8" Space between columns.
var table = new FPTable();
// Add the columns to the table definition.
for (var col = 0; col < columns * 3; col++) {
 var width = col % 3 == 1 ? colWidth : spaceBetweenColumns / 2;
 table.AddColumn(width);
}

while (data.length) {
 var people = data.splice(0, columns);
 var team = false;
 var teamRow = table.AddRow();
 var picRow = table.AddRow();

 // Global styles.
 [teamRow, picRow].map(function (row) {
   var cell = row.Cells[0];
   cell.HAlign = 'Center';
   cell.VAlign = 'Top';
   cell.Margins = { 'Top': spaceBetweenColumns / 10, 'Bottom': spaceBetweenColumns / 0, 'Left': 10, 'Right': 10 };
   row.CopyCells.apply(row, row.Cells.map(function (s, p) { return p; }));
   row.minHeight = 0.375 * 7200;  // 3/8" Minimum row height.
 });

 for (var i = 1; i <= teamRow.Cells.length && people.length; i += 3) {
   var person = people.shift();
   var teamCell = teamRow.Cells[i];
   var picCell = picRow.Cells[i];
   if (team && person.team == team.Content) {
     team.HStraddle += 3;
   } else {
     teamCell.ShadeColor = person.team;
     teamCell.ShadePct = 100;
     teamCell.HStraddle = 1;
     teamCell.Content = person.team;
     team = teamCell;
   }
   var headshot = person.headshot.exists ?
   person.headshot.content.replace('/>', 'width="' + (colWidth - picCell.Margins.Left - picCell.Margins.Right) + '"/>') : '';
   picCell.Content = [headshot, person.name, person.titleone, person.titletwo].filter(String).join('<br>');
 }
}
return table.MakeTags();

 

Thank you for all the help!