IPFS Dedicated Gateways: Hosting an Image Gallery
Learn how to use an IPFS dedicated gateway to host an image gallery.
Filebase IPFS dedicated gateways can be configured to serve a single IPFS CID at the root of the gateway. This means that instead of needing to specify the IPFS CID in the gateway URL, by default the URL will host the configured CID.
For example, when using an IPFS gateway, the format typically follows:
When using a dedicated gateway with a root CID, the path and CID fields are not required to return the root CID. A dedicated gateway through Filebase will use the following domain structure:
https://gatewayname.myfilebase.comIf a root CID is set, this single URL can be shared to distribute the stored CID’s content.
This file is a basic HTML file to serve as the homepage of your website. Change and edit this file to reflect your website’s content, and style it accordingly. To learn more about HTML and CSS styling, see here.
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="image1.jpg">
<img src="image1.jpg" alt="Image 1" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="image2.jpg">
<img src="image2.jpg" alt="Image 2" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="image3.jpg">
<img src="image3.jpg" alt="Image 3" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="image4.jpg">
<img src="image4.jpg" alt="Image 4" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
</div>
</body>
</html>
Any files you want to be used with your website, such as image files or script files, save in this folder.
Currently, the directory should look like this:
- Image Gallery
- index.html
- image1.jpg
- image2.jpg
- image3.jpg
- image4.jpg
Filebase IPFS Dedicated Gateways are a feature only available to paid users. They are not available for users on the free tier.
Gateway names are subject to the same naming restrictions as bucket names. All gateway names must be lowercase, between 3-63 characters, and must be unique.
If you have any questions, please join our Discord server, or send us an email at [email protected]