CODEWITHSUNDEEP
sap-commerce-cloud
Harvey
Harvey

Reputation: 572

Adding maintenance page to hybris cloud - how to show images and css?

We have been trying to upload a maintenance page to our site via cloud portal. We've been following this tutorial from sap help cloud portal, and the file structure is like the following below, compressed as a zip file and added to static files;

error.zip

📂error
 ┣ 📜 503.html
 ┣ img1.jpg
 ┣ img2.png
 ┣ 📂 assets
 ┣┗ 📜style.css

The problem is that, when I use the static file as a maintenance page in one of our JS storefronts and activate maintenance mode, it doesn't see the images nor the css in the file.

I've done this in another project of ours before, and had to convert the images to base64 format and use internal css inside the html file as a workaround for the images and styles to show up correctly.

Is there another way or specific file naming conventions that I have to use in order to make the images work without base64 conversion, and to use css as external files?

We're using hybris 2005

Upvotes: 1

Views: 784

Answers (2)

Raushan Kumar
Raushan Kumar

Reputation: 1248

Structure seems to be correct and please check how your have referred css and img.

<html>
<head>
    <title>Maintenance</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="error/css/style.css" type="text/css">
</head>
<body>
    
<div class="block">
    <div class="block-img">
        <img src="error/img/back-soon-img.jpg" alt="My test image" class="img" />
    </div>
    <div class="block-text">
        <img src="error/img/back-soon-text.jpg" alt="My test image" class="img" />
    </div>
</div>

<div class="hidden">
    <h1>Maintenance</h1>
    <p>Our site is temporarily offline but we'll be back shortly, looking better than ever.</p>
</div>

</body>
</html>

File and Folder structure: enter image description here

Upvotes: 1

leonaugust
leonaugust

Reputation: 312

I had the same issue with images. They didn't work for maintenance page in hybris 6.7.0. Make sure to use the correct src

<img src="/error/img2.png"/>

In my case I forgot to add /error/ before the image name. Adding it fixed my issue

Upvotes: 1

Related Questions