Twitter Bootstrap Media Grid: square box with images -

-


Twitter Bootstrap Media Grid: square box with images -

this not question, solution problem had. i'm posting here, because can imagine others utilize it.

the problem had was: want show overview of square image tiles using twitter bootstrap (media grid module) fixed width using grid scheme (span2, span3, etc.) without cluttering markup.

the less code below works out of box , extension bootstrap library:

.squarecolumns(@columnspan: 1) { width: (@gridcolumnwidth * @columnspan) + (@gridgutterwidth * (@columnspan - 1)); height: (@gridcolumnwidth * @columnspan) + (@gridgutterwidth * (@columnspan - 1)); } .maxsquarecolumns(@columnspan: 1) { max-width: (@gridcolumnwidth * @columnspan) + (@gridgutterwidth * (@columnspan - 1)); max-height: (@gridcolumnwidth * @columnspan) + (@gridgutterwidth * (@columnspan - 1)); } ul.square-media-grid { .media-grid; li a.span1 { .squarecolumns(1); img { .maxsquarecolumns(1); } } li a.span2 { .squarecolumns(2); img { .maxsquarecolumns(2); } } li a.span3 { .squarecolumns(3); img { .maxsquarecolumns(3); } } li a.span4 { .squarecolumns(4); img { .maxsquarecolumns(4); } } li a.span5 { .squarecolumns(5); img { .maxsquarecolumns(5); } } li a.span6 { .squarecolumns(6); img { .maxsquarecolumns(6); } } li a.span7 { .squarecolumns(7); img { .maxsquarecolumns(7); } } li a.span8 { .squarecolumns(8); img { .maxsquarecolumns(8); } } li a.span9 { .squarecolumns(9); img { .maxsquarecolumns(9); } } li a.span10 { .squarecolumns(10); img { .maxsquarecolumns(10); } } li a.span11 { .squarecolumns(11); img { .maxsquarecolumns(11); } } li a.span12 { .squarecolumns(12); img { .maxsquarecolumns(12); } } li a.span13 { .squarecolumns(13); img { .maxsquarecolumns(13); } } li a.span14 { .squarecolumns(14); img { .maxsquarecolumns(14); } } li a.span15 { .squarecolumns(15); img { .maxsquarecolumns(15); } } li a.span16 { .squarecolumns(16); img { .maxsquarecolumns(16); } } li a.span17 { .squarecolumns(17); img { .maxsquarecolumns(17); } } li a.span18 { .squarecolumns(18); img { .maxsquarecolumns(18); } } li a.span19 { .squarecolumns(19); img { .maxsquarecolumns(19); } } li a.span20 { .squarecolumns(20); img { .maxsquarecolumns(20); } } li a.span21 { .squarecolumns(21); img { .maxsquarecolumns(21); } } li a.span22 { .squarecolumns(22); img { .maxsquarecolumns(22); } } li a.span23 { .squarecolumns(23); img { .maxsquarecolumns(23); } } li a.span24 { .squarecolumns(24); img { .maxsquarecolumns(24); } } li img { display: block; margin: auto; } }

usage:

<ul class="square-media-grid"> <li> <a href="#" class="span3"> <img class="thumbnail" src="http://placehold.it/330x230" alt=""> </a> </li> <li> <a href="#" class="span3"> <img class="thumbnail" src="http://placehold.it/80x120" alt=""> </a> </li> <li> <a href="#" class="span3"> <img class="thumbnail" src="http://placehold.it/230x330" alt=""> </a> </li> </ul>

result:

http://tinyurl.com/7aqby3a

twitter-bootstrap

Comments

Post a Comment

Popular posts from this blog

delphi - blogger via idHTTP : error 400 bad request -

-
delphi - blogger via idHTTP : error 400 bad request - i'm trying post blogger using idhttp component, however, i'm getting "http/1.0 400 bad request" error. procedure tform1.button1click(sender: tobject); var request,response,req : tstringlist; auth,blogid : string; begin blogid := '00000000000000000000000'; request := tstringlist.create; response := tstringlist.create; req := tstringlist.create; idhttp1.request.connection := 'keep-alive'; idhttp1.request.contenttype := 'application/x-www-form-urlencoded'; idssliohandlersocket1.ssloptions.method := sslvsslv23; request.clear(); request.values['accounttype'] := 'google'; request.values['email'] := 'xxx@gmail.com'; request.values['passwd'] := 'yyy'; request.values['service'] := 'blogger'; response.text :=idhttp1.post('https://www.google.com/accounts/clientlogin',request); auth := resp...
Read more

c++ - compiler errors when initializing EXPECT_CALL with function which has program_options::variables_map as parameter -

-
c++ - compiler errors when initializing EXPECT_CALL with function which has program_options::variables_map as parameter - i'm having problem expect_call method, when trying : boost::program_options::variables_map vm; mymock mock; expect_call(mock, mymethod(vm)).willonce(return(l"")); mymethod looks : std::wstring mymethod(const boost::program_options::variables_map &vm) when compiling got errors : error 17 error c2676: binary '==' : 'const boost::program_options::variable_value' not define operator or conversion type acceptable predefined operator c:\program files (x86)\microsoft visual studio 9.0\vc\include\utility error 10 error c2784: 'bool std::operator ==(const _elem *,const std::basic_string<_elem,_traits,_alloc> &)' : not deduce template argument 'const _elem *' 'const boost::program_options::variable_value' c:\program files (x86)\microsoft visual studio 9.0\vc\include\u...
Read more

How do I check if an insert was successful with MySQLdb in Python? -

-
How do I check if an insert was successful with MySQLdb in Python? - i have code: cursor = conn.cursor() cursor.execute(("insert new_files (videos_id, filename, " "is_processing) values (%s,%s,1)"), (id, filename)) logging.warn("%d", cursor.rowcount) if (cursor.rowcount == 1): logging.info("inserted values %d, %s", id, filename) else: logging.warn("failed insert values %d, %s", id, filename) cursor.close() fun is, cursor.rowcount always one, though updated database create videos_id unique key. is, insert fails because in tests same videos_id going appear (and when check database, nil inserted). whatever reason, rowcount 1 - logging.warn have spits out rowcount of 1. so, question: can utilize rowcount work out if insert went fine? if so, (presumably) doing wrong? otherwise, how check if insert went fine? your code not commit after modifications (your modifications rolled back). should...
Read more