Here you’ll find some new options you can implement on the current template to display images on the home page. Maybe you want a new block or two in addition to what you already have going on, or maybe you want to switch things up and swap out the slideshow and the two images next to it.
We’ll show examples of the new pieces, have the HTML and CSS to copy/paste, and have an example walkthrough.
Some general notes before looking at the specifics:
The dummy images used in the examples show you their dimensions. You should use the width that you see, but feel free to use a different height if you like. Considering how things scale in the mobile view, as a general recommendation try to avoid having heights smaller than 250px.
Having said that, avoid using differing heights within a row. You don’t need uniform heights for all the images on your homepage, but all the images in a row within one of these new blocks should have the same height. You can see in the example below that when there are differing heights, the images with smaller heights will distort/stretch the image when it makes those images match the height of the image with the largest height in the row:
In all the examples the links will be pointing to buy_textbooks.asp, the images will be dummy images, and there will be dummy copy for the alt tags. You will need to update each to suit your needs.
Wrapping Blocks
When the width of the browser changes, the images within the block will shift and rearrange themselves onto a new row or rows. Images that were in a row when viewed on desktop will most likely end up stacked in a column on mobile.
Here are some different versions to try out:
Two Image Row
<div class="double-banners">
<a href="buy_textbooks.asp"><img src="images/demo_800x500.png" alt="800x500 placeholder"></a>
<a href="buy_textbooks.asp"><img src="images/demo_800x500.png" alt="800x500 placeholder"></a>
</div>
Three Image Row
<div class="triple-banners">
<a href="buy_textbooks.asp"><img src="images/demo_533x500.png" alt="533x500 placeholder"></a>
<a href="buy_textbooks.asp"><img src="images/demo_533x500.png" alt="533x500 placeholder"></a>
<a href="buy_textbooks.asp"><img src="images/demo_533x500.png" alt="533x500 placeholder"></a>
</div>
Four Image Row
<div class="quad-banners">
<a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a>
<a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a>
<a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a>
<a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a>
</div>
Non-Wrapping Blocks
When the width of the browser changes, the images within the block will maintain their order in the row and not shift to a new row. They will scale down in size to fit the new viewport width. With this in mind, you will want to make sure your image’s message can still be conveyed effectively at a smaller size.
Here are some different versions to try out:
Single Full Width
<div class="single-banner">
<a href="buy_textbooks.asp"><img src="images/demo_1600x500.png" alt="1600x500 placeholder"></a>
</div>
One-third/Two-thirds Split
<div class="banner-container"> <div class="one-third-first"><a href="buy_textbooks.asp"><img src="images/demo_533x500_green.png" alt="533x500 placeholder"></a></div> <div class="two-thirds-second"><a href="buy_textbooks.asp"><img src="images/demo_1066x500_purp.png" alt="1066x500 placeholder"></a></div> </div>
Two-thirds/One-third Split
<div class="banner-container"> <div class="two-thirds-first"><a href="buy_textbooks.asp"><img src="images/demo_1066x500_purp.png" alt="1066x500 placeholder"></a></div> <div class="one-third-second"><a href="buy_textbooks.asp"><img src="images/demo_533x500_green.png" alt="533x500 placeholder"></a></div> </div>
Even Split - 2
<div class="banner-container"> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_800x500.png" alt="800x500 placeholder"></a></div> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_800x500.png" alt="800x500 placeholder"></a></div> </div>
Even Split - 3
<div class="banner-container"> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_533x500.png" alt="533x500 placeholder"></a></div> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_533x500.png" alt="533x500 placeholder"></a></div> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_533x500.png" alt="533x500 placeholder"></a></div> </div>
Even Split - 4
<div class="banner-container"> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a></div> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a></div> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a></div> <div class="even-spread"><a href="buy_textbooks.asp"><img src="images/demo_400x400.png" alt="400x400 placeholder"></a></div> </div>
CSS
The CSS below contains the styling for both the wrapping and non-wrapping blocks. Paste the following into your css/main.css file:
/* NEW HOME PAGE BANNER STYLING */
.marketing-ads {
margin-bottom: 1.5em;
}
@media screen and (max-width: 620px) {
.marketing-ads {
margin-bottom: 0;
}
}
.single-banner,
.double-banners,
.triple-banners,
.quad-banners {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
margin: 0 .7% 1.1em .7%;
}
@media screen and (max-width: 645px) {
.single-banner,
.double-banners,
.triple-banners,
.quad-banners {
margin: .3em .1% .3em .1%;
}
}
.single-banner a {
flex-grow: 1;
flex-basis: 0px;
max-width: 100%;
margin: 0 5px 5px 5px;
}
.single-banner img {
height: 100%;
width: 100%;
}
.double-banners a {
flex-grow: 1;
flex-basis: 375px;
max-width: 100%;
margin: 0 5px 5px 5px;
}
.double-banners img {
height: 100%;
width: 100%;
}
@media screen and (max-width: 620px) {
.double-banners a:last-child {
margin-top: 10px;
}
}
.triple-banners a {
flex-grow: 1;
flex-basis: 229px;
max-width: 100%;
margin: 0 5px 5px 5px;
}
.triple-banners img {
height: 100%;
width: 100%;
}
@media screen and (max-width: 727px) {
.triple-banners a:nth-of-type(2) {
margin-top: 0;
}
.triple-banners a:last-child {
margin-top: 10px;
}
}
@media screen and (max-width: 484px) {
.triple-banners a:nth-of-type(2),
.triple-banners a:last-child {
margin-top: 10px;
}
}
.quad-banners a {
flex-grow: 1;
flex-basis: 180px;
max-width: 100%;
margin: 0 5px 5px 5px;
}
.quad-banners img {
height: 100%;
width: 100%;
}
@media screen and (max-width: 770px) {
.quad-banners a:last-child {
margin-top: 10px;
}
}
@media screen and (max-width: 578px) {
.quad-banners a:nth-of-type(3),
.quad-banners a:last-child {
margin-top: 10px;
}
}
@media screen and (max-width: 385px) {
.quad-banners a:nth-of-type(2),
.quad-banners a:nth-of-type(3),
.quad-banners a:last-child {
margin-top: 10px;
}
}
.banner-container {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
margin: -.1em 1% 1.1em 1%;
width: 98%;
}
@media screen and (max-width: 620px) {
.banner-container {
margin: .4em 1% 0 1%;
}
}
.two-thirds-first {
order:1;
flex-grow:2;
flex-basis: 66%;
margin-right: 10px;
}
.one-third-second {
order:2;
flex-grow:1;
flex-basis: 33%;
}
.one-third-first {
order:1;
flex-grow:1;
flex-basis: 33%;
margin-right: 10px;
}
.two-thirds-second {
order:2;
flex-grow:2;
flex-basis: 66%;
}
.even-spread {
flex: 1 1 auto;
margin-right: 10px;
}
.even-spread:last-child {
margin-right: 0;
}
Step-by-step Example
Brief:
Create new outerweb file, name as you see fit.
On default.asp, add include for that new outerweb file, in the order you want it to appear.
Upload new image(s) to images directory.
Add the content to the new outerweb file.
Paste in the new styles to main.css.
Refresh your staging site, confirm new content looks good, content deploy to production.
Long version:
Once you’re in your site files, expand your outerweb folder. You should have an o_site_blank.asp file to make a copy from, but really you can make a copy of whatever outerweb file you want, because you will be deleting the content and replacing it with new stuff. So, make a copy of a file and rename it something relevant to the content.
Go up a directory from outerweb so you’re seeing the root files of your site files, there you should find your home page - default.asp.
You need to add an include statement to call for that outerweb file you just created. It will look like this (if you happened to name your new outerweb file o_home_promos.asp):
<!-- #INCLUDE FILE="outerweb/o_home_promos.asp" -->
You’ll see that the include statements on default.asp are laid out in the order you see them when looking at the page in browser, it starts with the header at the top and ends with the footer at the bottom. Insert your include statement where you would like it to appear. Ex: if you want it to come directly after your announcements block, you’d put the new include statement after<!-- #INCLUDE VIRTUAL="/innerweb/v4.0/i_home_announcements.asp" -->
If you want to replace the slideshow (slideshow.asp) and the two images to the right of it (o_home_right_col.asp), you’ll need to disable the include statements for those two pieces by putting a space between the # symbol and the word INCLUDE, that will break the include and hide the content. Then, put in your include statement after the slideshow.asp and o_home_right_col.asp includes. NOTE: You’ll see those two includes you’re commenting out are wrapped by a div assigned the class “marketing-ads”, you want to place the include for your new piece OUTSIDE that div:
Go ahead and upload the new images for the new content into your “images” directory. Make sure you’ve adjusted the quality of your image so it has as small of a file size as possible while still looking good (optimized images = faster page load times).
Add the content to your new outerweb file. Feel free to copy/paste from the code snippet examples above, swapping out the dummy image file name(s) with your actual image file name(s). Update the link to point to where you want it to go instead of “buy_textbooks.asp” like you get in the examples. If you’re linking away from your site you need to include the full URL, but if you’re linking somewhere on your site, you just need to put in the container page (what you see in the address bar after your project name; if you’re looking your staging site. ex: https://staging.prismservices.net/demo/site_about_us.asp - “site_about_us.asp” is what you’d link to if you wanted to point to the About Us page). Also, don’t forget to add useful alt tags!
Copy the all the CSS from further up this page. Then open the “css” folder in your site files and open main.css. Go to the very last line of the file and paste in the CSS from this page, and then save the main.css file.
Refresh your staging site and make sure everything looks good. NOTE: the old style of your homepage may be cached by your browser, so it might be a good idea to do a hard refresh (ctrl+shift+R for Chrome) when you’re first checking things out on staging. Once you’ve determined staging looks the way you want, you’re good to do the content deployment from https://manager.prismservices.net/ to move the changes to your live site.
FIRST PUBLISHED 05/19/2020