Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Keeping classes in order

  • 08-08-2015 08:20PM
    #1
    off.the.walls
    Registered Users, Registered Users 2 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

  • #2
    tricky D
    Closed Accounts Posts: 9,698 ✭✭✭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