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

Adjusted banner size. And floated images right.

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.
#TODO
1. Better control of grid
2. Use jquery to allow for click-drag-adjustments
3. Ability to save out a screenshot.
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.
#Resources

30
index.html
View File

@ -17,12 +17,40 @@
#banner, #bannerSource {
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>
</head>
<body>
<p>Simple Facebook image banner creator</p>
<div id='banner'>Inside banner</div>
</br>
<div id='bannerSource'>Banner source</div>
</body>
</html>

15
scripts/bannerMaker.coffee
View File

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