Keeping classes in order

off.the.walls · 08-08-2015 7:20pm #1

hi everyone,

I'm currently building a photography template and its a one page theme, basically the client wants it that the first 4 are say 50% width and take up a 2x4 grid followed by a 4x1 row followed by a 2x1, 1x1,1x1 and finally a 2x1 and 2x1 row.

Screen shot attached. What i'm wondering is how to have it coming out of the DB so that the latest image adapts the class of say HalfPage and the other images all move down one space.

Anyone know how I can do this?

Using Pythons flask to do this.

tricky D · 08-08-2015 11:37pm

Some thing like...

<style>
section.container {width: 620px;}

 /* half page */
section.container img:nth-child(1) {height: 200px; width:300px}
section.container img:nth-child(2) {height: 200px; width:300px}
section.container img:nth-child(3) {height: 200px; width:300px}
section.container img:nth-child(4) {height: 200px; width:300px}

 /* quarter page */
section.container img {height: 100px; width:150px} 
</style>

</head>

<body>

<section class="container">
<!-- clean img dump area -->
  <img src="andy_300.jpg" alt="" /> 
  <img src="andy_301.jpg" alt="" /> 
  <img src="andy_302.jpg" alt="" /> 
  <img src="andy_303.jpg" alt="" /> 
  <img src="andy_304.jpg" alt="" /> 
  <img src="andy_305.jpg" alt="" /> 
  <img src="andy_306.jpg" alt="" /> 
  <img src="andy_307.jpg" alt="" /> 
  <img src="andy_308.jpg" alt="" /> 
  
</section>

Keeping classes in order

Comments