I cooked up a custom tag named [Screenshot]. You can put an image URL inside it. It will automatically compact the image to a small size of 800x600 to fit in a forum window easily. But it is clickable to toggle the image back and forth to full size.
What's the difference between [Screenshot] and [Spoiler]? Spoiler is better for a large number of images, since they don't load right away until the reader clicks it. Screenshot is better for one or two very large images, so that the smaller version is visible inline without an extra click. Note that Screenshot does download the entire image at full size; it's only resized in the client browser.
You'll need Javascript enabled. If not, to see the screenshot at full size, you'll have to do it yourself with something like right-click -> "view image".
Feel free to try it out in this thread. It worked for me in Firefox 14, Opera 12, and IE 8. I'd appreciate some testing in other browsers, especially mobile.
1. What if the image isn't in a 4:3 ratio?
2. What if the image is smaller than 800x600?
3. When will this go past the 'testing' stage and be safe for mass consumption?
4. Will there eventually be functionality to set the miniature version to a size other than 800x600?
(March 12th, 2024, 07:40)naufragar Wrote:"But naufragar, I want to be an emperor, not a product manager." Soon, my bloodthirsty friend, soon.
1. Handles it fine. My test image isn't quite 4:3. It will reduce depending on the longer axis as necessary, so the whole thing fits inside an 800x600 box while preserving the aspect ratio.
2. It appears clickable but nothing happens. I checked in the code to make sure not to resize a small image UP to 800x600.
3. Go ahead and use it now. The more eyes finding any problems, the better.
4. I hardcoded the 800x600 in the javascript. Parameterizing it could be done, but would complicate the syntax since you'd have to stick your 800 and 600 parameters inside the screenshot tag somewhere. I want to keep it simple to use and the cost of a hardcoded size is okay by me.
Okay, there's a bit of a problem like I suspected with the current method of doing this. Mobile browsers generally have autozoom. It looks like what you're doing right now is loading the image at full size before the Javascript kicks in and then makes it small. Because the full image size is loaded first, this sets the mobile browser's autozoom to be really far out, and it takes quite a bit of tricky maneuvering before it correctly fixes the zoom to fit the smaller size well. Any chance you can change the code such that the smaller size is used on page load?
NobleHelium Wrote:Okay, there's a bit of a problem like I suspected with the current method of doing this. Mobile browsers generally have autozoom. It looks like what you're doing right now is loading the image at full size before the Javascript kicks in and then makes it small. Because the full image size is loaded first, this sets the mobile browser's autozoom to be really far out, and it takes quite a bit of tricky maneuvering before it correctly fixes the zoom to fit the smaller size well. Any chance you can change the code such that the smaller size is used on page load?
Weird, it didn't do that on my mobile browser (granted, this was before you posted the really large image).
Merovech's Mapmaking Guidelines:
0. Player Requests: The player's requests take precedence, even if they contradict the following guidelines.
1. Balance: The map must be balanced, both in regards to land quality and availability and in regards to special civilization features. A map may be wonderfully unique and surprising, but, if it is unbalanced, the game will suffer and the player's enjoyment will not be as high as it could be.
2. Identity and Enjoyment: The map should be interesting to play at all levels, from city placement and management to the border-created interactions between civilizations, and should include varied terrain. Flavor should enhance the inherent pleasure resulting from the underlying tile arrangements. The map should not be exceedingly lush, but it is better to err on the lush side than on the poor side when placing terrain.
3. Feel (Avoiding Gimmicks): The map should not be overwhelmed or dominated by the mapmaker's flavor. Embellishment of the map through the use of special improvements, barbarian units, and abnormal terrain can enhance the identity and enjoyment of the map, but should take a backseat to the more normal aspects of the map. The game should usually not revolve around the flavor, but merely be accented by it.
4. Realism: Where possible, the terrain of the map should be realistic. Jungles on desert tiles, or even next to desert tiles, should therefore have a very specific reason for existing. Rivers should run downhill or across level ground into bodies of water. Irrigated terrain should have a higher grassland to plains ratio than dry terrain. Mountain chains should cast rain shadows. Islands, mountains, and peninsulas should follow logical plate tectonics.
NobleHelium Wrote:It looks like what you're doing right now is loading the image at full size before the Javascript kicks in and then makes it small.
Yes, that's exactly what it's doing. One upside is that the functionality degrades usably if javascript is disabled, the image simply appears full size. Feel free to view source and see how it works. Search for "setSmallShot" .
I wish I could set the height and width attributes on the <img> tag ahead of time, but that approach doesn't work out. Can't just set 800 and 600 or else images with a different aspect ratio will appear skewed. Dynamically calculating them from the image would require some server-side code, and I don't know a word of PHP or how (if it's possible at all) to start hacking that into vBulletin. I think they could be parameterized into the [screenshot] tag, but then anybody posting an image has to go look up and type in its dimensions.
Awkwardness on a few mobile devices shouldn't warrant killing the feature though, since it is a great gain where it works. I'll think about it some more, although I don't have a smartphone or any mobile browser to see it myself.
