Floating Images

[Fletch]

I have a business card that has a possibility of 1, 2 or 3 phone numbers on it. They are stacked ontop of each other. The each have a corresponding image to the left of the number (Cell image, Phone image and Fax image) When there are less than 3 numbers, the correct image needs to appear next to the corresponding number, and the empty spaces need to disappear. The baseline for the numbers will be centered from top to bottom within the text box. I've created image rules to place the images, but I do not know how to have them float. I know how to do this with text, but not images. What's the best solution?

I uploaded a file named 'phone_number.jpg' which shows the layout.

[step]

One way to do this would be to use inline graphics in a text rule:

// Number logos:
var cellImg = '/path/to/cell.png';
var phoneImg = '/path/to/phone.png';
var faxImg = '/path/to/fax.png';

// Number offset from baseline
var offset = 50;

var numbers = [
   [cellImg, Field('cell')],
   [phoneImg, Field('phone')],
   [faxImg, Field('fax')]
   ].filter(function(s){return s[1]}).map(function(s){return CreateResource(s[0],'graphic').content + '<p br=false superoffset=' + offset + ' superratio=100><superscript>' + s[1] + '</superscript>';}).join('<br>')

return numbers;

Note that the 'offset' variable is just used to superscript the actual phone number in order to give it the appearance that it's vertically aligned to the middle of the icons.

[bkurzbuch]

Hi Ste

 

Thats awesome. I have almost the exact same template to build. My text is to the left of the icons thou. I can assume I just need to rearrange the code to have the "Field" called out first and then the image, correct?

As for the first three lines, i can just create then as a graphic resource and call then out as such, correct?

 

Thanks Stu - You guys are awesome

[step]

Hi Ste

 

Thats awesome. I have almost the exact same template to build. My text is to the left of the icons thou. I can assume I just need to rearrange the code to have the "Field" called out first and then the image, correct?

Actually, all you'd have to change is the map function:

// Number logos:
var cellImg = '/path/to/cell.png';
var phoneImg = '/path/to/phone.png';
var faxImg = '/path/to/fax.png';

// Number offset from baseline
var offset = 50;

var numbers = [
   [cellImg, Field('cell')],
   [phoneImg, Field('phone')],
   [faxImg, Field('fax')]
   ].filter(function(s){return s[1]}).map(
       function(s){
           [color="Red"]return '<p br=false superoffset=' + offset + ' superratio=100><superscript>' + s[1] + '</superscript>' + 
               CreateResource(s[0],'graphic').content;[/color]
   }).join('<br>')

return numbers;

Within that function is where all of the "magic" is happening. That's where the image path is being converted to a resource and where the inner array ([img, number]) is being converted to a string where 's[0]' is the img and 's[1]' is the number.

As for the first three lines, i can just create then as a graphic resource and call then out as such, correct?

Sure you could create them as graphic resources, but you'd have to make a few changes to account for that:

// Number logos:
[color="red"]var cellImg = Resource("cell").content;
var phoneImg = Resource("phone").content;
var faxImg = Resource("fax").content;[/color]

// Number offset from baseline
var offset = 50;

var numbers = [
   [cellImg, Field('cell')],
   [phoneImg, Field('phone')],
   [faxImg, Field('fax')]
   ].filter(function(s){return s[1]}).map(
       function(s){
           [color="red"]return '<p br=false superoffset=' + offset + ' superratio=100><superscript>' + s[1] + '</superscript>' + s[0];[/color]
   }).join('<br>')

return numbers;

[bkurzbuch]

Thanks Stu & Thank You Fletch for posting the question.

 

This board is invaluable for info. Thanks Again

[Fletch]

What am I doing wrong? (I uploaded a screen shot - rule_problem.jpg)

[step]

Oh, I'm just noticing that you're running FusionPro 7 which uses JavaScript 1.5. The 'filter' and 'map' functions were introduced in JavaScript 1.6. You could insert Array.prototype.filter and Array.prototype.map to the beginning of the previously mentioned code or you can just change the code to this:

// Number logos:
var cellImg = Resource("cell").content;
var phoneImg = Resource("phone").content;
var faxImg = Resource("fax").content;

// Number offset from baseline
var offset = 50;

var result = [];
var numbers = [[cellImg, Field('cell')],[phoneImg, Field('phone')],[faxImg, Field('fax')]];

for (var i in numbers)
   if (numbers[i][1])
       result.push(numbers[i][0] + '<p br=false superoffset=' + offset + ' superratio=100><superscript>' + numbers[i][1] + '</superscript>');

return result.join('<br>');

[Fletch]

That definately got rid of that error. When I validate, it says expression ok. However, when I preview, all I see is the a bunch of text from the rule. I have that one rule placed in a varible text box. Should I have done something else? see attached screen shot.

[step]

Make sure "treat returned strings as tagged text" is checked in the rule editor.

[Fletch]

Taht was it. Thank you. Please take a look at the attached jpg file. The images are being cut-off on the left and the bottom. I've tried changing all the settings in each of the resources, as well as within the text box, but nothing is affecting the images. I double-checked the images. They are vector from Illustrator. Is the problem that they are circles?

[step]

What's the file format of the images? PDF?

 

Looks like part of the circle is outside of the artbox to me but I can't really help you any more than that just based off of a screenshot.

[Fletch]

I was able to fix the images being cut-off on 2 sides. All looks good with one small exception,which is probably an easy fix for eveyone except me. I need to add spce between the images and where the phone number starts. (see attached pdf.)

[step]

You could add space to the right side of the graphic itself, you could add a non-breaking space ( ), or you could add a tab and set the spacing by adjusting your tab-stops.

 

Here's an example of adding a non-breaking space:

// Number logos:
var cellImg = Resource("cell").content;
var phoneImg = Resource("phone").content;
var faxImg = Resource("fax").content;

// Number offset from baseline
var offset = 50;

var result = [];
var numbers = [[cellImg, Field('cell')],[phoneImg, Field('phone')],[faxImg, Field('fax')]];

for (var i in numbers)
   if (numbers[i][1])
       result.push(numbers[i][0] + '<p br=false superoffset=' + offset + ' superratio=100><superscript>[color="Red"] [/color]' + numbers[i][1] + '</superscript>');

return result.join('<br>');

[Fletch]

That's it! I really want to thank you very much for all your patience. Have a good day.

[bkurzbuch]

Hi STE

 

Thanks again for your help. I needed to change the order of the Icons and add some space, but was able to figure it out on my own with the code your provided. One last question. If I wanted to force formatting for the number so they always appeared as 123.456.7891 i could just copy and paste some of the code from the prebuilt rules, but where in the coding would i put it.

 

Thanks again

[step]

You can make 3 separate phone formatting rules for each number and call them like this:

// Number logos:
var cellImg = Resource("cell").content;
var phoneImg = Resource("phone").content;
var faxImg = Resource("fax").content;

// Number offset from baseline
var offset = 50;

var result = [];
var numbers = [[cellImg, [color="Red"]Rule('cell')[/color]],[phoneImg, [color="red"]Rule('phone')[/color]],[faxImg, [color="red"]Rule('fax')[/color]]];

for (var i in numbers)
   if (numbers[i][1])
       result.push(numbers[i][0] + '<p br=false superoffset=' + offset + ' superratio=100><superscript> ' + numbers[i][1] + '</superscript>');

return result.join('<br>');

 

Or you could do create a function to format the numbers and do this:

// Number logos:
var cellImg = Resource("cell").content;
var phoneImg = Resource("phone").content;
var faxImg = Resource("fax").content;

// Number offset from baseline
var offset = 50;

var result = [];
var numbers = [[cellImg, Field('cell')],[phoneImg, Field('phone')],[faxImg, Field('fax')]];

for (var i in numbers)
   if (numbers[i][1])
       result.push(numbers[i][0] + '<p br=false superoffset=' + offset + ' superratio=100><superscript> ' + [color="red"]formatNumber(numbers[i][1])[/color] + '</superscript>');

return result.join('<br>');


// Format Phone Number 
[color="red"]function formatNumber(number){
   var number = Trim(number);
   var pattern01 = /^(\d{3})[^\d]*(\d{4})$/;   						
   var pattern02 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;
   var pattern03 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})$/;
   var pattern04 = /^[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;
   var pattern05 = /^\+?(\d{1})[\D]*(\d{3})[\D]*(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;
   var pattern06 = /^(\d{3})[\D]*(\d{4})\D*[x#n]\D*(\d+)$/;
   var patternEndExt = /(.)[x#n](.)/;
   var patternStart1 = /^[\D]*[1]/;

   if(number.match(pattern01)){
       number = number.replace(pattern01, "$1.$2");
       return number;
   } else if(number.match(pattern02)){
       number = number.replace(pattern02, "$1.$2.$3");
       return number;
   } else if(number.match(pattern03)){
       if (number.match(patternStart1)){
           number = number.replace(pattern03, "+$1 $2.$3.$4");
           return number;
       } else {
           return number;
       }
   } else if(number.match(pattern04)){
       number = number.replace(pattern04, "$1.$2.$3 ext.$4");
       return number; 
   } else if(number.match(pattern05)){
       number = number.replace(pattern05, "+$1 $2.$3.$4 ext.$5");
       return number;
   }  else if(number.match(pattern06)){
       number = number.replace(pattern06, "$1.$2 ext.$3");
       return number;
   } else {
       //return "no match any pattern";
       return number;
   }	
}[/color]

[bkurzbuch]

Ste If your ever in the Chicago area got to buy you a beer. Worked perfectly

 

Thanks again

[step]

haha! Sounds good!

[Dan Korn]

Ste If your ever in the Chicago area got to buy you a beer.

Ste, if you're in Chicago, I'll buy you dinner!

[step]

Sounds like it's time for a Chicago trip!

[bkurzbuch]

Count me in!! God knows i owe both of you for ALL your help. I'll buy