I modified the formula to vertically center resized images, added that info to the display, and updated the package and code
Okay... I put together a skin that utilizes JSMorley's ImageSize Plugin, a Container meter, and PreserveAspectRatio=2 to demonstrate creating a picture gallery with varying image sizes that hopefully solves most of your issues. I tested with images ranging from 400x400 to 2550x1440 and the resized images display was acceptable for me.
As I said before, if your image ratios vary significantly, there is no best way to use Rainmeter to display them; you should resize the images to similar ratios outside of Rainmeter.
It will display a gallery with a defined picture width (#PicWidth# [default is 400 pixels]) and shows the dimensions of your resized images so you can select the optimal picture height variable (#PicHeight#). PreserveAspectRatio=2 will resize the original image to 400 pixels wide and a varying height of pixels based on the original image ratio. You should set the #PicHeight# variable smaller than the smallest value you see for the resized images in the skin. If it is set too high, the image will not fill the entire gallery container meter.
The container meter dimensions are set to "crop" the resized image to your optimal height. A calc measure will determine the difference between the resized image height and the #PicHeight# and shift the displayed image vertically in relation to the container meter; this will center the resized image in the skin.
I added some comments in the code similar to what is here to help you understand what each section is trying to do; this is a good habit especially if you come back a year later and want to edit something!
I created a package that contains the skin and the plugin. It will install "GalleryContainer" in your skin folder. You will have to edit the skin to point the PathToImages variable to your pictures folder. Refresh and try it.
If you have any questions feel free to post them here.
Skin code (requires you have ImageSize.dll plugin installed) Download the package below to get the skin and plugin.
Code: Select all
ContextAction=[!WriteKeyValue Variables HideInfo (1-#HideInfo#)][!SetVariable HideInfo (1-#HideInfo#)][!UpdateMeter MeterDimensions][!Redraw]
Information=Resize, crop, and shift images for better display of gallery skins using images of varying sizes. Set the "PicWidth" to your desired size. Set "PicHeight" based on the smallest value of your images when resized to your "PicWidth" using "PreserveAspectRatio=2"; uses JSMorley's ImageSize plugin to allow you to test and determine the optimal "PicHeight" based on your resized image's height.
License=Creative Commons Attribution-Non-Commercial-Share Alike 4.0
Version=July 18, 2019a
; Set this to your image folder
; Seconds between image changes
; Set to your desired gallery width
; Set based on the smallest value returned by the [ImageHeight] measure :: (Usually half your PicWidth is close , but will be determined by the ratio's of the images you use)
; Set to 1 to hide string meter
OnUpdateAction=[!EnableMeasureGroup Sizes][!UpdateMeasureGroup Sizes]
; Calculate an amount of vertical shift (used to better center the resized image vertically) based on the image height divided by the same ratio used for width on the resized image when using PreserveAspectRation=2
; A "Container" meter used to "Crop" the resized image to #PicHeight# (If resized images height is less than #PicHeight# they will not fill the image window; so #PicHeight# should be set to the samllest height of your resized images.
; Image display. Y position is half the resized image height minus your #PicHeight# (Used to center images vertically)
; Information meter : This can be hidden once you determine your optimal #PicHeight#
Text="Resized Image: [MeterImage:W] X [MeterImage:H] | V-Shift: [MeasureYPosition]#CRLF#Original Image Size: %1 X %2"
You do not have the required permissions to view the files attached to this post.