nilsnh/avatar-banner
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Adjusted banner size. And floated images right.

Browse source
This commit is contained in:
NilsNH 2013-02-20 10:13:14 +01:00
parent b151e56e91
commit f49a137e11
4 changed files with 51 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
README.md
View file

@ -1,10 +1,5 @@
#Interim specification #What do I need?
Something that automatically creates a grid of images, that links them to relevant Facebook profiles. Need to be able to export html using inline styling. Something that automatically creates a grid of images, that links them to relevant Facebook profiles. Need to be able to export html that contains stylesheets.
#TODO
1. Better control of grid
2. Use jquery to allow for click-drag-adjustments
3. Ability to save out a screenshot.
#Resources

30
index.html
View file

@ -17,12 +17,40 @@
#banner, #bannerSource { #banner, #bannerSource {
margin: 10px; margin: 10px;
} }
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
</style> </style>
</head> </head>
<body> <body>
<p>Simple Facebook image banner creator</p> <p>Simple Facebook image banner creator</p>
<div id='banner'>Inside banner</div> <div id='banner'>Inside banner</div>
</br>
<div id='bannerSource'>Banner source</div> <div id='bannerSource'>Banner source</div>
</body> </body>
</html> </html>

15
scripts/bannerMaker.coffee
View file

@ -14,6 +14,7 @@ fbuserNameObj =
'Hedvig Elisabeth Andersland': 'hedvig.andersland' 'Hedvig Elisabeth Andersland': 'hedvig.andersland'
'Ida Maria Dahr': 'ida.m.nygaard' 'Ida Maria Dahr': 'ida.m.nygaard'
'Torjus Nafstad': 'torjus.nafstad' 'Torjus Nafstad': 'torjus.nafstad'
'Nicolai Gulbrandsøy': 'niccoboss'
cssOptionsObj = cssOptionsObj =
'margin-bottom': '-5px' 'margin-bottom': '-5px'
@ -26,17 +27,21 @@ cssOptionsObj =
createImageGridHtml = (userNameObj) -> createImageGridHtml = (userNameObj) ->
graphFBAddress = 'https://graph.facebook.com/' graphFBAddress = 'https://graph.facebook.com/'
imageArray = [] imageArray = []
styling = "float: right;"
for fullName, username of userNameObj for fullName, username of userNameObj
imageArray.push "<img src='#{graphFBAddress}#{username}/picture#{fbImageOptions}' title='#{fullName}'>" imageArray.push "<img src='#{graphFBAddress}#{username}/picture#{fbImageOptions}' title='#{fullName}' style='#{styling}'>"
resultStr = imageArray.join('') resultStr = imageArray.join('')
resultStr = "<div id='banner'>#{resultStr}</div>" resultStr = "<div id='banner' class='cf'>#{resultStr}</div>"
styleBanner = (divId) -> styleBanner = (divId) ->
$("#{divId}").css 'width', '600px' #851px x 315 facebook banner size
$("#{divId}").css 'width', '851px'
$(document).ready -> $(document).ready ->
console.log 'Starting script' console.log 'Starting script'
console.log fbuserNameObj console.log fbuserNameObj
$('#banner').replaceWith(createImageGridHtml(fbuserNameObj)) $('#banner').replaceWith(createImageGridHtml(fbuserNameObj))
styleBanner('#banner') $('#bannerSource').text(createImageGridHtml(fbuserNameObj))
$('#bannerSource').text(createImageGridHtml(fbuserNameObj))
styleBanner('#banner')

16
scripts/bannerMaker.js
View file

@ -16,7 +16,8 @@
'Bjørnar Fjeldstad': '739398715', 'Bjørnar Fjeldstad': '739398715',
'Hedvig Elisabeth Andersland': 'hedvig.andersland', 'Hedvig Elisabeth Andersland': 'hedvig.andersland',
'Ida Maria Dahr': 'ida.m.nygaard', 'Ida Maria Dahr': 'ida.m.nygaard',
'Torjus Nafstad': 'torjus.nafstad' 'Torjus Nafstad': 'torjus.nafstad',
'Nicolai Gulbrandsøy': 'niccoboss'
}; };
cssOptionsObj = { cssOptionsObj = {
@ -29,27 +30,28 @@
}; };
createImageGridHtml = function(userNameObj) { createImageGridHtml = function(userNameObj) {
var fullName, graphFBAddress, imageArray, resultStr, username; var fullName, graphFBAddress, imageArray, resultStr, styling, username;
graphFBAddress = 'https://graph.facebook.com/'; graphFBAddress = 'https://graph.facebook.com/';
imageArray = []; imageArray = [];
styling = "float: right;";
for (fullName in userNameObj) { for (fullName in userNameObj) {
username = userNameObj[fullName]; username = userNameObj[fullName];
imageArray.push("<img src='" + graphFBAddress + username + "/picture" + fbImageOptions + "' title='" + fullName + "'>"); imageArray.push("<img src='" + graphFBAddress + username + "/picture" + fbImageOptions + "' title='" + fullName + "' style='" + styling + "'>");
} }
resultStr = imageArray.join(''); resultStr = imageArray.join('');
return resultStr = "<div id='banner'>" + resultStr + "</div>"; return resultStr = "<div id='banner' class='cf'>" + resultStr + "</div>";
}; };
styleBanner = function(divId) { styleBanner = function(divId) {
return $("" + divId).css('width', '600px'); return $("" + divId).css('width', '851px');
}; };
$(document).ready(function() { $(document).ready(function() {
console.log('Starting script'); console.log('Starting script');
console.log(fbuserNameObj); console.log(fbuserNameObj);
$('#banner').replaceWith(createImageGridHtml(fbuserNameObj)); $('#banner').replaceWith(createImageGridHtml(fbuserNameObj));
styleBanner('#banner'); $('#bannerSource').text(createImageGridHtml(fbuserNameObj));
return $('#bannerSource').text(createImageGridHtml(fbuserNameObj)); return styleBanner('#banner');
}); });
}).call(this); }).call(this);