Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Keeping classes in order

Options
  • 08-08-2015 8:20pm
    #1
    off.the.walls
    Registered Users Posts: 1,298 ✭✭✭


    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?

    357950.png

    Using Pythons flask to do this.


Comments

  • Options
    #2
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    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>


Advertisement