summaryrefslogtreecommitdiff
path: root/templates/fluid
AgeCommit message (Collapse)AuthorFilesLines
2021-01-15fluid: Rework index item thumbnailsTomas Bzatek2-5/+22
Even the recent Firefox still doesn't support the background-image:image-set CSS styles for HiDPI thumbnails. Rework this to a regular image placed inside the <a> tag.
2021-01-15fluid: CSS gradient fixesTomas Bzatek1-28/+28
As pointed out by the CSS validator.
2021-01-15fluid: Use https for external font resourcesTomas Bzatek1-2/+2
2021-01-15fluid: Add workaround to disable initial transitions on page loadTomas Bzatek2-0/+7
Although this may look weird on a first sight it does the trick. Perhaps as a result of another bug in recent Webkit-based browsers, still good enough for the time being.
2021-01-15fluid: Rounded borders for album imagesTomas Bzatek1-1/+3
2021-01-15fluid: Use box-shadow for index item bordersTomas Bzatek1-12/+8
Fractional HiDPI scaling (1.5x) on newer Webkit-based browsers tend to cause extra black borders around the index item thumbnails due to rounding error. Turned out borders created by CSS box-shadow are rendered differently and less prone to rounding errors. Though this way of border rendering is slightly different but generally more acceptable.
2021-01-15fluid: Set thumbnail size to an even valuesTomas Bzatek2-2/+2
Odd base image sizes are a real problem for fractional scaling (HiDPI 1.5x).
2021-01-15fluid: Set default link colour before loading the common CSS fileTomas Bzatek3-24/+28
Recent Webkit-based browsers tend to animate link colour from builtin one (blue) once the common CSS stylesheet file gets loaded, resulting in unwanted animation. So set a sane default color within the HTML files so that the animation goes unnoticed. Still would be great to disable initial transitions altogether.
2019-05-11templates/fluid: Disable index items dimming/highlight on hoverTomas Bzatek1-9/+2
Let the album thumbnails shine, no need to dim them as we really want to present the albums.
2018-12-15theming: Add option to disable HiDPI for any particular image sizeTomas Bzatek1-0/+2
Useful for 4k size where additional HiDPI sizes (i.e. 6k and 8k) are overkill to generate and aren't very common on the market yet.
2018-12-15templates/fluid: Add 4k sizeTomas Bzatek2-0/+15
Suitable for >30" native 4k screens with no scaling.
2018-12-15templates/fluid: Tweak image sizesTomas Bzatek2-11/+11
Tested on various common resolutions with standard browser and system toolbars.
2016-10-02Add support for HiDPI imagesTomas Bzatek3-8/+30
This works by creating corresponding hidpi image sizes on startup and letting the machinery generate high resolution images from the source images (no way to use supplied images). However since browsers expect exact image dimension multiples for the particular scale factor, a reference image size (scale factor 1.0x) must be read first, then cropped to match reference aspect ratio and resized to exact dimensions. That way pixel-perfect results can be achieved for the chosen scale factor. TODO: the CSS background-image: image-set() tags are not supported on Firefox. TODO: try the 1.5x scale factor
2016-10-02jpeg-utils: Add support for custom resize optionsTomas Bzatek1-0/+16
This change brings the possibility to tweak resize options using standard ImageMagick `convert` command syntax. Separate options are offered for thumbnails.
2016-09-23fluid: Use CSS media queries to determine displayed image sizeTomas Bzatek3-68/+45
This is a huge step forward in terms of usability and simplicity. Image sizes are now determined by browser automatically based on window width. As a result the image size switch buttons have been removed and only a single page is generated (index.html). Note: in order to make image title, description and EXIF table dynamically aligned to the image width, "display: table" and relatives were used. This may not be the best webdesigner practice but it's an effective and sufficient approach for the moment.
2016-09-18Introduce resizing thresholdsTomas Bzatek1-3/+3
This commit brings deeper changes to the image sizes concept. The goal was to allow more flexible input in resizing vs. supplied files mixed mode. Instead of hard <noresize> flags the decision whether to resize or copy an image is now based on threshold. While not 100% universal, it brings more control regarding image size bounds. Also brings a level of tolerance for specific errors (off-by-one exports). Image sizes' rules are a bit simpler, hopefully easier to understand. A lot can be achieved by combination of thresholds.
2016-04-03New 'fluid' themeTomas Bzatek10-0/+1441
Introducing a modern looking theme that changes gallery philosophy a bit. Instead of having thumbnails on an album page and photos on separate pages this new design brings emphasis on story telling. Viewer is advised to go through the whole album sequentially, bringing atmosphere to the whole set. All photos are loaded within a single page and keyboard navigation via left/right arrows is supposed to be used to switch the presentation mode on. Three photo sizes are supported now with the 'preview' size being the default. High resolution size has been introduced for 2560x1440 screens and larger. Note that this template uses code from 3rd parties, see CREDITS for details. I haven't been able to contact anyone behind the TheCodePlayer.com project so licensing of the breadcrumbs might be an issue.