Multiple Image Layout
Below is a working example of this template.
You'll find simple instructions of how to use it beneath it.
This particular template provides interaction with its viewer. All four images have links attached to them, they just need to be specified/customized by right clicking on the image and clicking "Insert/edit link". This also applies to the links below the images.
Note: for images to display properly in this template, use these sizes:
You'll find simple instructions of how to use it beneath it.
This particular template provides interaction with its viewer. All four images have links attached to them, they just need to be specified/customized by right clicking on the image and clicking "Insert/edit link". This also applies to the links below the images.
You can customize:
- Images
- Text
- 'href' links
You cannot customize:
- Image size
- Layout
- Spacing between images
Note: for images to display properly in this template, use these sizes:
- Large Image -- width: 790px
- Large Image -- height: 514px
- Small Images -- width: 135px
- Small Images -- height: 115px
Link 1...or Contact Information
Hours
Monday-Friday
8-5pm
Locations
Please see our locations page for your major specific center.
Instructions:
- Copy the code below.
- Find page in Ingeniux you want to use this template on.
- Click 'HTML'.
- Paste the code you copied in step 1.
- Click 'Update'.
- Customize the image sources, link, text, etc.
<style>
#container710{
float:left;
overflow:hidden;
}
#mainpicture{
float: left;
margin-bottom: 15px;
width:560px;
height:375px;
}
#mainpicture img{
width:560px;
height:375px;
}
.subpicture{
width:135px;
height:115px;
margin-left:15px;
margin-top:15px;
float:left;
opacity:1;
}
.subpicture img{
width:135px;
height:115px;
}
.firstsubpicture{
margin-top:0px;
}
.subpicture:hover{
opacity:.75;
}
.bottomboxes{
border-radius: 4px;
width: 225px;
height: 200px;
background-color: #f2f2f2;
border: thin solid #e0e0e0;
float: left;
margin:0px;
}
.middle{
margin:0px 14px;
}
.bottomboxheader{
width: 100%;
background-color: #eaeaea;
margin-right: 15px;
padding-top: 10px;
border-bottom: solid 1px #e0e0e0;
}
.bottomboxheadertext{
margin: 0px 0px 5px 15px;
font-size: large;
}
.bottomboxbullettext{
font-size: .9em;
margin-left: 10px;
margin-top: 15px;
padding-left: 5px;
margin-bottom: 10px;
color: #60686e;
}
.bottomboxbullettext a{
text-decoration: none;
color: #60686e;
}
.bottomboxbullettext a:hover{
color:#056CB6;
}
</style>
<div class="span-18" id="container710">
<div id="mainpicture">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="This is the Main Picture">
<img src="http://www.byui.edu/Images/101116_BYU-IdahoCenter_09a.jpg" title="BYUI Center" alt="BYUI Center" width="790" height="514"/>
</a>
</div>
<div class="subpicture firstsubpicture">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Live Chat with an Academic Advisor">
<img src="http://www.byui.edu/Images/art/030730SunsetFence_2622.jpg" title="Sunset" alt="Sunset" width="135" height="115"/>
</a>
</div>
<div class="subpicture">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Career Navigator">
<img src="http://www.byui.edu/Images/dance/ManwaringCenterThumbnailsmall.jpg" title="MC Building" alt="MC Building" width="135" height="115"/>
</a>
</div>
<div class="subpicture">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Career Preparation">
<img src="http://www.byui.edu/Images/planetarium/Directions.png" title="Arial View" alt="Arial View" width="135" height="115"/>
</a>
</div>
<div>
<div class="bottomboxes">
<div class="bottomboxheader">
<p class="bottomboxheadertext">Other Links...</p>
</div>
<p class="bottomboxbullettext">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Expeditions">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> Link 1</a>
</p>
<p class="bottomboxbullettext">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Events and Recruiting">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> Another Link 2</a>
</p>
<p class="bottomboxbullettext">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Academic Advising">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> A third Link</a>
</p>
<p class="bottomboxbullettext">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Health Professions">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> One More link for this column</a>
</p>
</div>
<div class="bottomboxes middle">
<div class="bottomboxheader">
<p class="bottomboxheadertext">...or articles...</p>
</div>
<p class="bottomboxbullettext">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Change Major">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> More Links</a>
</p>
<p class="bottomboxbullettext"><a href="/web-training/code-snippets/multiple-image-layout#"" title="Internship Info">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> More Links</a>
</p>
<p class="bottomboxbullettext">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Class Planning">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> More Links</a>
</p>
<p class="bottomboxbullettext">
<a href="/web-training/code-snippets/multiple-image-layout#"" title="Find a Job">
<img src="http://www.byui.edu/Images/advising/blue-arrow.png" alt="arrow" width="5" height="9"/> More Links</a>
</p>
</div>
<div class="bottomboxes">
<div class="bottomboxheader">
<p class="bottomboxheadertext">...or Contact Information</p>
</div>
<p class="bottomboxbullettext">
<strong>Hours</strong>
<br/>Monday-Friday<br/>8-5pm</p>
<p class="bottomboxbullettext">
<strong>Locations</strong>
<br/>Please see our <a href="/web-training/code-snippets/multiple-image-layout#"" title="Academic Discovery Center Locations" style="color: #056cb6; text-decoration: underline;">locations</a> page for your major specific center.</p>
</div>
</div>
<div class="clear"></div>
</div>