User's Guide > About the User's Guide > Codebeamer: Common Concepts > Wiki > Wiki Markup and Plugins > Pictures > Using Thumbnails to Automatically Size and Shrink WIKI Images to Fit the Page
Using Thumbnails to Automatically Size and Shrink WIKI Images to Fit the Page
Larger images, such as screenshots that are added to a wiki page or a defect description, can extend the boundaries of the page and interfere with the layout. To fix this, you can use a special wiki markup (a CSS class) which automatically resizes and shrinks large images. Click shrunk images to open them in a slide show or overlay, and then show them in their original size.
For example, this markup renders the image to shrink if it does not fit the page:
%%thumbnailImages

[https://intland.com/wp-content/uploads/2016/02/slider-home-2-automotive.png]

[https://intland.com/wp-content/uploads/2016/02/slider-home-2-medical.png]

%%
It Will be rendered as shown in the next figure:
The simple %%thumbnailImages markup shrinks the image if it is too large. It is good practice to avoid excessively large images.
Alternatively, you can add the actual thumbnails of your images if you know the thumbnail size in advance. For example, this markup shows a 200 px wide thumbnail of the previous image. When clicked, it shows a larger version:
%%thumbnailImages200px ... images... %%
The following CSS classes can be used:
CSS class
Result
%%thumbnailImages ...%%
Shrinks the image if does not fit the width of page.
%%thumbnailImages200px ...%%
Shows a fixed 200px width thumbnail
%%thumbnailImages300px ...%%
Shows a fixed 300px width thumbnail.
%%thumbnailImages400px ...%%
Shows a fixed 400px width thumbnail.
%%thumbnailImages600px ...%%
Shows a fixed 600px width thumbnail.
%%thumbnailImages800px ...%%
Shows a fixed 800px width thumbnail.
%%thumbnailImages1000px ...%%
Shows a fixed 1000px width thumbnail.
%%thumbnailImages20pct ...%%
Shows a thumbnail, which is 20% of the page/container's width. If used for multiple images, 5 of them will fit side-by-side on the page.
%%thumbnailImages25pct ...%%
Shows a thumbnail that is 25% width of the page/container.
%%thumbnailImages33pct ...%%
Shows a thumbnail that is 33% width of the page.
%%thumbnailImages50pct ...%%
Shows a thumbnail that is 50% width of the page.
%%thumbnailImages75pct ...%%
Shows a thumbnail that is 75% width of the page.
%%thumbnailImages150pct ...%%
Shows a thumbnail that is 150% width of the page.
Was this helpful?