How do I do this simple HTML/image task?

June 25, 2013 1:58 PM

I have a lot of images for a card game I'm working on. I want to put them on a single web page in printable form. Automatically, if possible - there are a LOT of images. (They're all in one directory, though.) Bonus points if the size of the images can be easily rescaled so they can fit the sizes of cards from other games (so they can be sleeved together, for instance.)
posted by LSK to Computers & Internet (9 answers total)

Put them into a PDF file, if you intend end users to print them out at a certain size, as browsers can be finicky about how they render pages when printing.
posted by Blazecock Pileon at 2:00 PM on June 25, 2013

Best answer: Displaying the images is a 5 minute job using your favourite server side scripting language. Here's a PHP example.

You can then use CSS, with the @media print tag, that is only used when you print the document. You can give all the img elements a width:100%, display:block, and page-break-after:always styles. Example here. Not sure about browser support, but appears to be well supported.
posted by derbs at 2:31 PM on June 25, 2013 [1 favorite]

to make an HTML files with links to all the images in vim:

cd [directory where your images are]
:r !ls
gg
qai<img src="[ESC]A"/>[ESC]j0q5000@a
:sav [name of file you want to save.html]


Things in brackets are not literal.
posted by tylerkaraszewski at 5:39 PM on June 25, 2013

What kind of webserver do you have at your disposal? What programming languages are available on it?

In general, derbs is right. You want a chunk of code that reads the image directory filenames and orders them in some fashion... if the files are quite big you may be resizing them on the fly... or you could simply have a process that downsizes the originals to a predetermined print size.

As for the CSS, I'd be using print styles as described by tylerkaraszewski, and likely set the sizes of the images (presuming all the images have the same aspect ratio - that is - the same proportions of height to width - and then you set the print CSS for the image tag to set the height and/or width in inches.

But that's a more general description of a solution than a solution. Because your description is a more general description of a problem than a problem. :-) Feel free to update with more details of what webserver resources you have available, whether the images are all alike, what resolution they are, etc. :-)
posted by artlung at 7:31 AM on June 26, 2013

Response by poster: I'm using XAMPP but I can't figure out how to get php to actually run on it. My php scripts are getting parsed as HTML.
posted by LSK at 7:45 AM on June 26, 2013

Either you're putting your php files in the wrong spot, or you need to add:

AddType application/x-httpd-php .php

in your httpd.conf (probably somewhere like C:\Xampp\apache\conf\) then restart.
posted by artlung at 7:59 AM on June 26, 2013

Response by poster: I added that line to httpd.conf, restarted XAMPP, started Apache, ran the example script derbs linked to saved as localhost/test.php, and it still displays as text (I did add an image directory). I haven't modified any other XAMPP settings as far as I know.
posted by LSK at 8:06 AM on June 26, 2013

Best answer: This might be stating the obvious, but based on your description, is it possible you're missing the open/close PHP tags?

<?php
(your code here)
?>

If those aren't present, the page doesn't know the code is PHP so it outputs it as text.
posted by meggan at 11:32 AM on June 26, 2013

Response by poster: I know this is way belated, but IT WORKS!
posted by LSK at 1:11 PM on July 2, 2013