You are here

Home » API reference » AutoFloat 8

README.txt in AutoFloat 8

Same filename and directory in other branches
  1. 6.2 README.txt
  2. 6 README.txt
  3. 7.2 README.txt
  4. 7 README.txt
Name: AutoFloat (autofloat)
Author: Martin Postma ('lolandese', http://drupal.org/user/210402)
Drupal: 8.x


-- SUMMARY --

A text format filter that wraps images in a div or span with odd/even classes
to make them float alternately left and right.

Configurable:
* the starting side
* exclude the module's CSS to use your theme's style.css
* the elements to target, div or span
* add classes to target a 'span', e.g. in case a caption is displayed
* add classes to exclude a 'div', e.g. a set of thumbnails. 


-- EXAMPLE --

The filter turns:
  ‹img src="/path/photo.jpg"›
into:
  ‹span class="autofloat-odd"›‹img src="/path/photo.jpg"›‹/span›

Or:
  <div>‹img src="/path/photo.jpg"›</div>
into:
  ‹div class="autofloat-odd"›‹img src="/path/photo.jpg"›‹/div›


-- FEATURES --

Generates an organized layout of images in a text automatically.

Easy for the less technical users.

Saves time.

Avoids inline styling.

Inserting images later doesn't mess up the alternating floating.


-- INSTALLATION AND CONFIGURATION --

Extract the package in your modules directory, e.g. '/modules'.

On your Drupal site, enable the module under '/admin/modules'.

Add the autofloat filter to one of your text formats under 
'/admin/config/content/formats'. Put it below other image related filters in
the 'filter processing order'.

Configure under '/admin/config/content/autofloat'.

Re-save existing nodes you want to apply AutoFloat to. If you still can't see
any changes, try clearing both your site and browser cache as well.


-- USAGE --

Images will float unless they have the class 'nofloat'.

A 'span' or 'div' with the class 'float' will float the image and other
containing content, e.g. a caption under it.

Images in a 'div' with the class 'nofloat' do NOT float, e.g. a set of 
thumbnails.

Avoid adding classes manually by defining classes added by other 
modules/filters. Use your browser's inspector to find them.

The class 'nofloat' of a nested element has priority over classes set in the 
parent, thus makes that the parent will not float.

Remember an element floats within the block-element containing it. If that 
doesn't cover the full width, the image might not float as expected. 
Check your CSS before submitting an issue.


-- CSS --

The autofloat.css and autofloat-rtl.css files add a right-margin to left
floating images and a left-margin to right floating images. 

If your images won't float your theme might not use the id or class "content"
to target the node body. Adjust the id or class used in the modules' css files
accordingly.

You can exclude the module's CSS on the configuration page to use your
customized theme's style.css.

File

README.txt
View source 
  1. Name: AutoFloat (autofloat)

  2. Author: Martin Postma ('lolandese', http://drupal.org/user/210402)

  3. Drupal: 8.x

  4. 

  5. 

  6. -- SUMMARY --

  7. 

  8. A text format filter that wraps images in a div or span with odd/even classes

  9. to make them float alternately left and right.

  10. 

  11. Configurable:

  12. * the starting side

  13. * exclude the module's CSS to use your theme's style.css

  14. * the elements to target, div or span

  15. * add classes to target a 'span', e.g. in case a caption is displayed

  16. * add classes to exclude a 'div', e.g. a set of thumbnails. 

  17. 

  18. 

  19. -- EXAMPLE --

  20. 

  21. The filter turns:

  22.   ‹img src="/path/photo.jpg"›

  23. into:

  24.   ‹span class="autofloat-odd"›‹img src="/path/photo.jpg"›‹/span›

  25. 

  26. Or:

  27.   
    ‹img src="/path/photo.jpg"›
    

  28. into:

  29.   ‹div class="autofloat-odd"›‹img src="/path/photo.jpg"›‹/div›

  30. 

  31. 

  32. -- FEATURES --

  33. 

  34. Generates an organized layout of images in a text automatically.

  35. 

  36. Easy for the less technical users.

  37. 

  38. Saves time.

  39. 

  40. Avoids inline styling.

  41. 

  42. Inserting images later doesn't mess up the alternating floating.

  43. 

  44. 

  45. -- INSTALLATION AND CONFIGURATION --

  46. 

  47. Extract the package in your modules directory, e.g. '/modules'.

  48. 

  49. On your Drupal site, enable the module under '/admin/modules'.

  50. 

  51. Add the autofloat filter to one of your text formats under 

  52. '/admin/config/content/formats'. Put it below other image related filters in

  53. the 'filter processing order'.

  54. 

  55. Configure under '/admin/config/content/autofloat'.

  56. 

  57. Re-save existing nodes you want to apply AutoFloat to. If you still can't see

  58. any changes, try clearing both your site and browser cache as well.

  59. 

  60. 

  61. -- USAGE --

  62. 

  63. Images will float unless they have the class 'nofloat'.

  64. 

  65. A 'span' or 'div' with the class 'float' will float the image and other

  66. containing content, e.g. a caption under it.

  67. 

  68. Images in a 'div' with the class 'nofloat' do NOT float, e.g. a set of 

  69. thumbnails.

  70. 

  71. Avoid adding classes manually by defining classes added by other 

  72. modules/filters. Use your browser's inspector to find them.

  73. 

  74. The class 'nofloat' of a nested element has priority over classes set in the 

  75. parent, thus makes that the parent will not float.

  76. 

  77. Remember an element floats within the block-element containing it. If that 

  78. doesn't cover the full width, the image might not float as expected. 

  79. Check your CSS before submitting an issue.

  80. 

  81. 

  82. -- CSS --

  83. 

  84. The autofloat.css and autofloat-rtl.css files add a right-margin to left

  85. floating images and a left-margin to right floating images. 

  86. 

  87. If your images won't float your theme might not use the id or class "content"

  88. to target the node body. Adjust the id or class used in the modules' css files

  89. accordingly.

  90. 

  91. You can exclude the module's CSS on the configuration page to use your

  92. customized theme's style.css.