Member Avatar for tefflox

today I found a site with jpg images that by themselves are placed on a strict xhtml source. is it an htaccess function? here is a sample source..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title>Photo</title>
        <style type="text/css">
            html, body, p
            {
                margin: 0;
                border: 0;
                padding: 0;
                background: #000;
            }
        </style>
    </head>
    <body>
        <p><img src="/./photos/uncategorized/giacomettip6.jpg" alt="Photo" /></p>
    </body>
</html>
  • 3 Contributors
  • 6 Replies
  • 226 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

As observed, the effect on that blog is not an .htaccess “image magic” but simply an HTML wrapper that sets a dark page and places the JPG inside it. That is also what and were getting at: background color comes from a page, not from the raw image file itself. Three practical approaches follow — each keeps the browser showing a dark page while the photo loads.

Option 1 — a small server-side viewer (safe, cache-friendly). Point thumbnail links at a tiny viewer that validates the filename and emits a minimal HTML page with a dark background and a centered image. Example (PHP):

<?php
$img = isset($_GET['img']) ? basename($_GET['img']) : '';
$path = __DIR__ . '/photos/' . $img;
if (!file_exists($path)) { http_response_code(404); exit; }
?>
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Photo</title></head>
<body style="margin:0;background:#000;display:flex;align-items:center;justify-content:center;">
  <img src="/photos/<?php echo rawurlencode($img); ?>" alt="" style="max-width:100%;height:auto;">
</body>
</html>

Link thumbnails to viewer.php?img=filename.jpg. This preserves direct access to image files and avoids replacing the image MIME type.

Option 2 — a JavaScript popup that preloads the image, opens a new window and writes a black wrapper so the user sees the dark page immediately:

function openImagePopup(src){
  var img=new Image();
  img.onload=function(){
    var w=window.open('','_blank','toolbar=0,location=0,menubar=0,resizable=1');
    var html='<!doctype html><html><head><meta charset="utf-8"></head><body style="margin:0;background:#000;display:flex;align-items:center;justify-content:center;">' +
             '<img src="'+src.replace(/"/g,'&quot;')+'" style="max-width:100%;height:auto;">' +
             '</body></html>';
    w.document.write(html); w.document.close();
    try{ w.resizeTo(img.width+20,img.height+20); }catch(e){}
  };
  img.src=src;
}

Notes and cautions: do not rewrite real .jpg URLs to HTML (breaks embeds and tools). Sanitize inputs to avoid path traversal or XSS, add max-width:100% for mobile, and prefer a dedicated viewer URL to preserve caching and direct-download behavior.

Recommended Answers

All 6 Replies

Member Avatar for peter_budo

can you specify your question please....

Member Avatar for tefflox

can you specify your question please....

Say there is a smaller or thumbnail image, which can be clicked to bring up it's own url.. domain.com/image.jpg, and the above code places it in its own background color. How to do this?

Member Avatar for tgreer

I don't see a question here, either. Are you asking how to create a hyperlink? Display an image? Specify a background color? I keep looking at the code you posted expecting to see something mysterious...

Member Avatar for peter_budo

click thumb and large image pop-up, you mean open in new window????

Member Avatar for tefflox

click thumb and large image pop-up, you mean open in new window????

well, yes, the images in question do open in new windows. check out this page and open one of the thumbnails, pull down the source.. (plz if you will) http://www.thezone.blogs.com/flotsam/

that's what i'm trying to do, or maybe not in a new window, but still do that, just get a dark backroung for the plain /.../media.image pages

thanks for helping

Member Avatar for tgreer

Background colors are specified with the "background" CSS property.

If you want to display an image on a "black" page, you could use a style declaration for the page like this:

<style type="text/css">
html, body
{ 
   background: #000000;
}
</style>

All they are doing is opening a window with a black background, the exact same size as the image that will be loaded.

Since the image takes a bit of time to load, you see the black window first as the browser loads the image.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.