# Add Featured Animal to your pages

There is a built-in code snippet that is not listed on the built-in snippets list and works in a similar manner to the **Featured Pet** or **Random Animal Snippet**. The code snippet listed in the built-in snippet list only uses the thumbnail image and cannot be made larger, whereas the code snippet described here uses the full-size image that you uploaded when uploading images to your pet's description page. To learn more about the Random Animal Snippet, see[Place animal on a web page using snippets](/doc/8ce92114-0dcc-49d3-b89c-9d31be1effc5).

# **How to display a larger featured pet**

When editing a web page, in the WYSIWYG editor, click the **Source** button at the top of the editor and manually type the following where you want the snippet to appear.

> {AnimalAdLarge/} 

 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/14ce95f2-8c0c-493e-b7c2-3701d8e80d2f/source.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=0b44bedb27147303ce40ef515596d8376ca1eb396741058b2b3c3bab356738fd&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =222x73")



:::info
To use this feature, you must make sure that, in your Website Settings, you do **NOT** have the Animal Picture Mode set to Disabled, but instead select Featured or Random.   

 ![ ](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/ea613dc5-c815-4296-a191-d7ca6d39f54f/AnimalPictureMode.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261024%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261024T150000Z&X-Amz-Expires=86400&X-Amz-Signature=2f2b9c556d2f17cbe656b2544267c1c2796977409d26a580ee6b25c5ca734206&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =626x219")

:::


To control the size of this image a user must include some CSS based on where they are placing the snippet. For example, if you place the {AnimalAdLarge/} snippet on the right sidebar, you might add the following to the CSS to control the size of the image to 200px wide and increase the font size of the text.


:::tip
If you are unfamiliar with CSS and want to experiment with this code snippet, please [contact support](https://rescuegroups.org/support/) if you have trouble. We can help.

:::

>  /\* ===============
>
> FEATURED PET  
> =============== \*/  
> \#rightContainer .animalimg {  
> width: 200px;  
> height: auto;  
> }
>
> .AnimalAd {  
> font-size: 1em;  
> text-align: center;  
> line-height: 1.4em;  
> font-weight: bold;  
> }