aspect_switcher.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>
  6. Aspect Switcher
  7. </title>
  8. </head>
  9. <body>
  10. <h3>
  11. Using aspect switcher to create a 'square' setting.
  12. </h3>
  13. <p>
  14. This is done through "chaining" two switches - "is it quite
  15. wide or not?", then "is it quite tall or not?" which leaves
  16. us with "must be square then."
  17. </p>
  18. <p>
  19. First we create the three sizes we will be using,
  20. small-landscape, small-square, small-portrait. I'll just set
  21. those up with scale_and_crop.
  22. </p>
  23. <p>
  24. We want wide images up to a ratio of 1:0.75 to be rendered
  25. wide. We want squarish images, with an aspect between 1:0.75
  26. and 1:1.25 to be rendered square, and anything taller to be
  27. rendered tall.
  28. </p>
  29. <p>
  30. To do this, we chain 2 rules. We need to build them
  31. backwards, the smaller sub-rule first, but to understand, I'l
  32. list them top down.
  33. </p>
  34. <p>
  35. Rule 1. is the master rule, <strong>3-aspects</strong>
  36. </p>
  37. <p>
  38. if ratio is less than 1:.75, use small-landscape. If greater,
  39. <strong>proceed to rule 2</strong>.
  40. </p>
  41. <p>
  42. </p>
  43. <p>
  44. Rule 2. <strong>square-or-portrait</strong>
  45. </p>
  46. <p>
  47. if ratio is less than 1:1.25, use small-square. If greater,
  48. use small-portrait.
  49. </p>
  50. <p>
  51. To do this, we use the aspect switcher to link to the two
  52. sizes, and the <em>ratio adjustment</em> to move
  53. the switching point a little. Set the ratio adjustment to
  54. 1.25
  55. </p>
  56. <p>
  57. With these (5!) rules in place, you can get the desired
  58. effect. This is a little trickier than just making a 'square'
  59. setting, but it allows for the required fudge factor to
  60. handle almost-square images.
  61. </p>
  62. <p>
  63. You can nudge the adjustment factor to be looser or tighter.
  64. You can create even more chained rules, and define a
  65. 'super-wide' size.
  66. </p>
  67. <table border="1" cellpadding="1" cellspacing="1">
  68. <tbody>
  69. <tr>
  70. <td rowspan="1" colspan="1">
  71. small-landscape
  72. </td>
  73. <td rowspan="1" colspan="1">
  74. [Scale And Crop]&nbsp;width: 200, height: 100
  75. </td>
  76. </tr>
  77. <tr>
  78. <td rowspan="1" colspan="1">
  79. small-portrait
  80. </td>
  81. <td rowspan="1" colspan="1">
  82. [Scale And Crop]&nbsp;width: 100, height: 200
  83. </td>
  84. </tr>
  85. <tr>
  86. <td rowspan="1" colspan="1">
  87. small-square
  88. </td>
  89. <td rowspan="1" colspan="1">
  90. [Scale And Crop]&nbsp;width: 140, height: 140
  91. </td>
  92. </tr>
  93. <tr>
  94. <td rowspan="1" colspan="1">
  95. small-square-or-portrait
  96. </td>
  97. <td rowspan="1" colspan="1">
  98. [Aspect Switcher] Portrait
  99. size:&nbsp;<strong>small-portrait</strong>. Landscape
  100. size:&nbsp;<strong>small-square</strong>&nbsp;(switch
  101. at 1:1.25)
  102. </td>
  103. </tr>
  104. <tr>
  105. <td rowspan="1" colspan="1">
  106. small-3-aspects
  107. </td>
  108. <td rowspan="1" colspan="1">
  109. [Aspect Switcher]&nbsp;Portrait
  110. size:&nbsp;<strong>small-square-or-portrait</strong>.
  111. Landscape
  112. size:&nbsp;<strong>small-landscape</strong>&nbsp;(switch
  113. at 1:.75)
  114. </td>
  115. </tr>
  116. </tbody>
  117. </table>
  118. <p>
  119. &nbsp;The illustration shows the result of this set-up on a
  120. collection of images. The listed dimensions are those of the
  121. source images. You'll see that the mostly-square ones are
  122. rendered square.
  123. </p>
  124. <img src="../docs/aspect-chaining.png" alt="Illustration of several different sized images passing through the above ruleset."/>
  125. <p>
  126. The rule being applied is: 1 Is it wide?
  127. </p>
  128. <p>
  129. For image 250x300, the aspect is ( 250/300 = 0.83 ) Normally
  130. that number (less than 1) would be classified as 'portrait',
  131. and with the adjustment (*0.75) that is still true, so the
  132. processing passes through to the portrait preset.
  133. </p>
  134. <p>
  135. rule #2 it it tall?
  136. </p>
  137. <p>
  138. This preset however does a different set of maths, and
  139. multiplies the aspect by 1.25, producing a result that causes
  140. it to trigger to 'landscape' choice. 'landscape' at this
  141. point is set to be the 'square' preset. And we get what we
  142. wanted.
  143. </p>
  144. </body>
  145. </html>