Code<\/h3>\n
Rendering<\/h3>\n
![\"img](\"https:\/\/www.library.illinois.edu\/wp-content\/uploads\/2022\/08\/ACES.jpg\")
\n <\/a>\n <\/div>\n <\/div>\n ![\"img](\"https:\/\/www.library.illinois.edu\/wp-content\/uploads\/2022\/08\/UI-08-210714-067-2.jpg\")
\n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nAttributes<\/h2>\n
Use the following 9 attributes to customize the image gallery:<\/p>\n
order<\/h3>\n
The order<\/strong> attribute determines if the images are ordered in a row or in a column. In case the attribute is empty, the default order is row.<\/p>\n The image<\/strong> attribute determines what images to display. Separate the URLs of the images by comma<\/strong> with no space in between.<\/p>\n The alt <\/b>attribute lets you define the alt text for the images included in the “image” attribute. The ALTs are separated by a comma<\/strong> with no space in between.<\/p>\n Example<\/strong>: [image-gallery alt=\"img description,img description\"]<\/p>\n The link<\/strong> attribute lets you define what page an image links to. The URLs are separated by a comma<\/strong> with no space in between.<\/p>\n The title<\/strong> attribute defines the text overlay at the bottom of the image. The default value is “Title 1<\/strong>” and “Title 2<\/strong>“. Titles are separated by the pipe character |<\/strong> with no space in between.<\/p>\n The font-size<\/strong> attribute lets you set the size of the text overlay. The default value is “16px<\/strong>“.<\/p>\n The font-weight<\/strong> attribute defines how bold or light the text appears. The default value is “normal<\/strong>“. You can set it using one of the following numeric values:<\/p>\n or a keyword value:<\/p>\n or a relative value:<\/p>\n The bgcolor<\/strong> attribute defines the background color of the text overlay. The default value is black (#000000). Use the color’s hex value in the #xxxxxx<\/strong> format.<\/p>\n The bg-opacity<\/strong> attribute lets you set the opacity\/transparency of the background color of the text overlay. The default value is 0.75<\/strong>. You can give a value between 0.0 and 1.0<\/strong>. The lower the value, the more transparent the background color is.<\/p>\nColumn<\/h3>\n
\n <\/a>\n <\/div>\n <\/div>\n \n <\/a>\n <\/div>\n <\/div><\/div> <\/div><\/div><\/div><\/div>Row<\/h3>\n
\n <\/a>\n <\/div>\n <\/div>\n \n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nimage<\/h3>\n
Code<\/h4>\n
Rendering<\/h4>\n
![\"img](\"https:\/\/www.library.illinois.edu\/mpal\/wp-content\/uploads\/sites\/17\/2019\/08\/Theatre-Resources.jpg\")
\n <\/a>\n <\/div>\n <\/div>\n ![\"img](\"https:\/\/www.library.illinois.edu\/mpal\/wp-content\/uploads\/sites\/17\/2019\/08\/dance.jpg\")
\n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nalt<\/h3>\n
link<\/h3>\n
Code<\/h4>\n
Rendering<\/h4>\n
\n <\/a>\n <\/div>\n <\/div>\n \n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\ntitle<\/h3>\n
Code<\/h4>\n
Rendering<\/h4>\n
\n <\/a>\n <\/div>\n <\/div>\n \n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nfont-size<\/h3>\n
Code<\/h4>\n
Rendering<\/h4>\n
\n <\/a>\n <\/div>\n <\/div>\n \n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nfont-weight<\/h3>\n
\n
\n
\n
Code<\/h4>\n
Rendering<\/h4>\n
\n <\/a>\n <\/div>\n <\/div>\n \n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nbgcolor<\/h3>\n
Code<\/h4>\n
Rendering<\/h4>\n
\n <\/a>\n <\/div>\n <\/div>\n \n <\/a>\n <\/div>\n <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\nbg-opacity<\/h3>\n
Code<\/h4>\n
Rendering<\/h4>\n