At times, using the Small Image or Large Image fields may not provide enough flexibility for your page. When this is the case, the "image filter" may help solve your problems. However, these can easily be misused. Please read this entire page to ensure that you don't misuse these.
- Rescale your image to the appropriate size in an image editor such as Photoshop (remember to optimize the image for the web), or
- Use an imagecache setting.
Instructions
To use an image filter:
- find the node ID of the image(s) you want to use.
- In the text where you want to place the image, add [image:12345|||], where "12345" is the node ID you found in Step 1.
- Note: the "pipe" character ("|") is normally on the right side of your keyboard on the same key as "\".
- If you want the image to be "floated" to the left (with text wrapping around), use [image:12345|||align=left]. If you want the image to be floated right, use [image:12345|||align=right]. To center an image, create the image filter you want, apply the "Paragraph" style to it from the Format drop down (see image) and then apply the "centered-text" style to it from the Styles drop down.
- If the image should be resized:
- to 145px-wide — [image:12345|thumbnail||]
- to 225px-wide — [image:12345|image-size-small||]
- to 350px-wide — [image:12345|350px-wide||]
- to 500px-wide — [image:12345|image-size-large||].
- If the image should be a link, use [image:12345||help/bugs|] (that would link to the bug reporter).
- Note: this will not work for external links that go outside of www.grinnell.edu. To make a link to an external site, select the image filter text and then make it a link.
- You can combine all of these features in a single image filter statement:
[image:12345|image-size-small|/academic/sociology|align=right].
How Not to Use Image Filters
Too many Images/Should Use an Image Gallery
Images detract from a page if they are too close to each other or greatly outnumber the amount of text. Images should almost never be touching. If you find yourself using a large number of images, consider using an Image Gallery rather than image filters.
The example at the bottom of this page shows the two images in three long paragraphs of text. This is as "dense" as images should ever be on a page when using image filters.
Making a Design/Using Images Within a Table
Image filters are designed for "inline" images that appear alongside/within text. If you are trying to use image filters for decorative borders or other layout changes — such as elaborately positioning elements in a table — you probably need to change the page's theme. Talk to one of the web guys and tell them what you're trying to accomplish. They can either help you or point you to a person or firm that can.
Note: We're aware of the desire for banners other than the feature image. We are looking into ways to accommodate such a design feature in the mid-term future.
Recreating a View
If you find yourself making a repetitious layout on a single page such as the one below, this should be created as a "View" of multiple nodes. A "View" can be created by a site administrator and means you don't have to repeat information or make the same update in multiple places. Examples of Views are Faculty Listings, a list of news stories, a list of events, or a list of FAQs.
A "View" Page Structure
| Name Position |
Image |
| Name Position |
Image |
| Name Position |
Image |
Examples
The two images in the following text use the filters:
- [image:47546|image-size-large||align=right]
- [image:47546|image-size-small||align=left]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia lorem lacinia eros tincidunt vehicula. Fusce fringilla lorem eget dolor ullamcorper in iaculis lorem consequat. Nunc euismod odio quis leo pretium porttitor viverra dui dictum. Integer eget metus at massa bibendum bibendum. Donec sem magna, tincidunt ullamcorper tempus eu, lacinia quis leo. Phasellus ut euismod lectus. Ut erat est, dictum ut congue dapibus, semper non dolor. Vestibulum sit amet sagittis quam. In ut risus pharetra lacus facilisis tincidunt. Phasellus adipiscing egestas tristique. Nam nibh purus, ornare non ullamcorper vel, porttitor ut justo. Integer faucibus venenatis turpis non viverra. Maecenas id iaculis purus. Vivamus auctor luctus quam non convallis. Proin rutrum dictum ligula vel ultrices.
Suspendisse potenti. Integer nec elit et orci venenatis commodo. Duis malesuada porta justo, a condimentum eros sodales ac. Vivamus consequat, magna quis feugiat facilisis, lorem eros sodales arcu, id semper neque tellus ac purus. Quisque tincidunt mauris eu metus sodales sit amet congue leo ornare. Mauris at vestibulum risus. Nulla facilisi. Nullam nisl mi, vehicula sed malesuada et, fringilla at diam. Suspendisse potenti. Morbi tellus ligula, ultricies euismod convallis nec, hendrerit vitae orci. Mauris tempus libero eget enim tempus nec porttitor est gravida. Ut quis orci urna, et tincidunt nisi. Aliquam erat volutpat. Mauris luctus enim non libero interdum consequat. Donec hendrerit enim et augue elementum vitae hendrerit urna aliquam. Donec id purus leo. Praesent ac iaculis nibh. Aenean nec congue dolor. Duis eu nisl non elit porta scelerisque. Integer in metus vitae massa fringilla condimentum id sed est.
Aliquam ultrices bibendum ante id euismod. Mauris eleifend dapibus tellus, eu faucibus ipsum vulputate sed. Maecenas eget sapien eget nunc condimentum dapibus vel sed justo. Curabitur neque ante, iaculis vitae tincidunt in, ultrices vitae dolor. Duis laoreet dictum enim, vel interdum leo porttitor sed. Sed pretium ligula metus, eu viverra mi. Aenean risus ante, fringilla sodales iaculis a, varius in lectus. Sed lacinia dolor vel erat congue nec lacinia ipsum fermentum. Cras in libero lorem. Aliquam in lorem dolor. Vivamus a purus mollis libero iaculis venenatis eu congue augue. Ut lacinia iaculis nunc, vehicula auctor ipsum consectetur quis. Etiam quis gravida lorem. Aliquam est elit, facilisis vel sollicitudin ac, cursus et est. Integer et urna urna. Phasellus placerat tempus justo. Curabitur vehicula risus orci. Sed quis arcu condimentum neque ullamcorper bibendum. Maecenas venenatis malesuada arcu, ut tempor mauris sodales nec. Quisque gravida leo in est bibendum fringilla.
