Responsive Gallery Responsive Gallery is a MyCode that has a simple design and makes use of the modal windows used throughout the site. This code serves as a base that can be used on its own to create a sleak, multi-column look or combined with other coding to create something to match an existing skin.

First create a gallery container and then insert a galleryimg.


The galleryimg MyCode requires a few things to work properly.

1. Identifier - This is used in the CSS to make the modal pop up. It should be a unique single word with no spaces or special characters; hyphens allowed. Examples: 001, 002, 003; One, Two, Three; John-01, John-02, John-03
   
2. Image Url - This is used to generate the thumbnail and larger image. For the person that posted the character, this will show in the modal window.
   
3. Alt Description - This is used to generate a description of the picture that could be used by readers or accessibility devices to describe the image. This should be a short, literal description of the image when able.
   
   Good: Mid twenties brunette sitting on a grassy hill looking at the night sky behind her.
   Bad: She is contemplating her dreams.
4. Caption - This is used for the more character relevant description of the image and what it means to your character.
   

Tip: If your gallery looks like it is spaced incorrectly, it may be because the coding has line breaks. You can condense the code manually or you can use the dohtml MyCode to collapse it for you.



VS




You can use html around each galleryimg if you would like to add things like image titles or if you want to add a caption under the thumbnail.

John's Prom

Young dark haired male with acne making a face like something stinks and holding his hand out to try and block the camera shothttp://placehold.it/100x100

John wasn't super jazzed about prom, but his mom made him take pictures anyway.

John on the Beach

Dark haired young adult male jumping in the air toward the volley ball flying over the nethttp://placehold.it/100x100

John loves to build sandcastles and play beach volley ball.

John's Sunburn

An animated gif of a dancing red lobster that has the face of a mid twenties male with red, sunburned skin digitally added on tophttp://placehold.it/100x100

John looked like a lobster because he forgot his sunscreen.

The modal can not be edited in the same way. You may make used of pseudo css elements to create additional text or styling in the windows if you would like.

(I will add the preview and such later.)

In the codes section, you will find the HTML and CSS that are generated when using the MyCode. You are welcome to use the HTML instead of the MyCode.

The Codes