Yikes! I missed last week's posting while we prepared for the Plone Symposium this week.
Sizing images
The most-uploaded media type we see are images of some sort. It's a good idea to always create and save your images in the size you want them to appear online. That means that you don't need to specify height and width attributes, and your image will always appear clear and not blurry. But in those cases where you need to scale or resize your images, the height and width attributes will do the trick. Specify the height and width in pixels:
<media id="a_unique_id" display="block" alt="An example.">
<image mime-type="image/png" src="myfile.png" height="480" width="640" />
</media>
Thumbnail images
Alternatively, you may want to only show a relevant portion of an image, but link to a bigger version of the image to give more context. This is especially useful for screenshots. Upload both the thumbnail file and the larger file to your module, and specify the thumbnail image with the thumbnail attribute. It will link to the larger file when clicked:
<media id="a_unique_id" display="block" alt="An example of a thumbnail.">
<image mime-type="image/png" src="mybigfile.png" thumbnail="mythumbfile.png" />
</media>
Alternate media online and in print
Finally, you may want to have two images: one suitable for online viewing, and one suitable for print. For instance, a scalable image may be used online, so that viewers can zoom in and out on the image without losing image quality, and a static image can be specified for print. Even more exotically, a video or slideshow may be used online, with an image file used in the print version. To do this, you need to specify two media items (video/image, image/image, etc.) within one <media> tag:
<media id="a_unique_id" display="block" alt="An example of an alternate print-image.">
<image mime-type="image/png" src="myimagefile.png" for="pdf" />
<video mime-type="video/mpeg" src="myvideofile.mpg" for="online" />
</media>
Follow Us on Twitter
Visit Our Facebook Page
Subscribe via RSS
Remember, the height and width attributes also speed up the rendering of your page because the rendering engine doesn't need to fetch the image-size info to know how much space it has to reserve for that image. So put them there. Always.
ReplyDeleteI enjoy you because of your entire efforts on this web page. My daughter takes pleasure in carrying out investigation and it's easy to understand why. My spouse and i know all concerning the powerful ways you present precious guides by means of the website and in addition welcome participation from other individuals on that concern then our own child is now becoming educated a lot of things. Take advantage of the rest of the new year. Your performing a useful job.דלתות פנים
ReplyDelete