Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Image Gallery Improvements

herb3845
Registered User
Quote
2017-01-19 20:37:35

Hi,
I have a few improvements to the Image Gallery I'd like to suggest.

First, the documentation says that there is a "MaxImageHeight" field to set the max height of the images in the gallery, but the field is missing from the UI.

For the 'OpenMode', it would be nice to have a 'None' option if you just want to display some images without anything popping up when the images are clicked on.

Also, it would be nice to be able to specify a different image that pops up when an image in the gallery is clicked. This would be useful to be able to have small images in the gallery and show a larger image when one is clicked. This would allow the page with the gallery to load quickly with small images and incur the network traffic of fetching the large images only when one is clicked on.


mrpresident
Registered User
Quote
2017-01-20 06:58:07

I´m agree with you.

Especially the last point is basic in most of these tools and should be implemented soon.


niko
Moderator
Quote
2017-01-20 09:19:30

First, the documentation says that there is a "MaxImageHeight" field to set the max height of the images in the gallery, but the field is missing from the UI.

Yes, sorry, thanks for pointing this out. That value was available in the beta versions, but it doesn't make any sense for responsive websites: The width of the gallery amount of colums and image ratios already automatically gives that value.

"None" mode: Ah, that's a good idea, yes, thanks!

Different image for opening: This is handled automatically. You only need to set a high res image for the gallery, and then, when publishing the website, a small and a big image is generated automatically. Try it out: There is a small image for the website, and only when you click on the image, the big one is loaded.


herb3845
Registered User
Quote
2017-01-20 17:03:07

Regarding MaxImageHeight, I was thinking it would be a good way to prevent the images from scaling more than 100% when the user stretches in browser window wider, but it looks like I can just put a container around the Image Gallery and give it a MaxWidth to prevent that.

I should have looked at the generated code more carefully! I see that smaller images are indeed automatically created.

This is probably beyond the scope of what RocketCake was designed for, but is there a way to generate multiple sizes of the images that are displayed in the gallery? For instance if the browser window is 1024 wide, the images in the gallery might be 200 wide each, but is the window is 640 wide, the images in the gallery might be only 100 wide, and if the window is 320 wide, then the images might only be 50 wide?
I'm talking about the physical size of the images, not just scaling them smaller. That way on a 320 wide phone 50 pixel wide images would be served up rather than 200 pixel wide images that are scaled down to 50 pixels.

This would be a cool feature for all images, not just in the Image Gallery. Let the user specify which, if any, breakpoints they want to set for the different size images to be generated.


herb3845
Registered User
Quote
2017-01-21 19:20:32

Another thing I just noticed with the Image Gallery:
The div.galleryimgcontainer property "vertical-align" is being set to "middle". When you have a gallery where the images have text captions, if some of those captions are 1 line of text, and others are 2 lines, then the gallery images no longer look vertically aligned. If the "vertical-align" value was "top", then the gallery would look better (in my opinion!)

Also, it the images in the gallery have different aspect ratios, say 200x200 and 200x210, then the rows would look neater if the vertical-align was top.

Could you please add the ability to set the vertical-align value?

Thanks!


mrpresident
Registered User
Quote
2017-01-22 10:49:37

You´re really agree with these widget?
I could not believe....

I have to add more than 100 pics.... why these widget is not able to do? Why I have to add pic by pic? Even the view is low quality....


herb3845
Registered User
Quote
2017-01-22 17:41:36

wrote:
You´re really agree with these widget?
I could not believe....

I have to add more than 100 pics.... why these widget is not able to do? Why I have to add pic by pic? Even the view is low quality....


Being able to import multiple images at a time would be a nice feature. Also a way to reorder the images once they are in the gallery.

Regarding the image quality of the thumbnails: Yes, the quality is a little low, but for thumbnails, it really isn't that noticeable.
This could be greatly improved by making the physical size of the thumbnails smaller while using a higher quality compression ratio.
I noticed that the physical size of the thumbnails doesn't seem to be related to the Width or MaxWidth of the image gallery, any container the image gallery is in. In fact, the dimensions of the thumbnails appears to be hardcoded based on an arbitrary width of 1300 and the number of columns in the gallery.

For example I experimented with 2 images, one is 1026 wide and the other is 700 wide.
With 5 columns the thumbnails were 260 wide (1300 / 5 = 260)
With 4 columns the thumbnails were 325 wide (1300 / 4 = 325)
With 3 columns the thumbnails were 433 wide (1300 / 3 = 433)
With 2 columns the thumbnails were 650 wide (1300 / 2 = 650)
Interestingly, with 1 column, the widths of the thumbnails were the same as the original images. I didn't try an image wider than 1300 to see what happens then.

The dimensions of the thumbnails should be based on the number of columns in the gallery and the Size or MaxWidth of the ImageGallery or if those aren't specified, the Size or MaxWidth of any containers the ImageGallery might be in. If there are no maximum widths specified, then the current approach of sizing the thumbnails based on an arbitrary width of 1300 seems OK.

The only possible reason I could of for the thumbnails being larger than they need to be might be for how they look in a browser? Does a 700 wide image scaled in the browser to be 350 wide look better than a 350 wide image that is not scaled?


vikenti
Registered User
Quote
2017-01-24 11:36:40

Add multiple images is very important feature!
Also it would be nice to do this by drag-n-drop, too.

Creation of multiple size thumbnails must be regulated via option - it is not necessary for all sites but can significantly increase the total file size of the web site.

Another useful option is embedded lightbox with scrolling through pictures with mouse click or buttons\arrows - just like in facebook or flickr image gallery. If i group images into the single gallery - it is obvious that i want to have an ability to look through all of them one by one.


mrpresident
Registered User
Quote
2017-01-25 10:55:03

The quality and usability isn´t only low, it´s really poor.

I gave the developer a heavy list of suggestion, we have to wait, what´s going on the next weeks....


erik
Registered User
Quote
2017-01-25 12:53:38

The quality is pretty good for me, not sure what you are talking about.


farins
Guest
Quote
2017-02-14 18:17:35

Hi

i have show already in my old post what is better improve in gallery module.

like i said in past can me nice add a thumbnail for uniform the size of gallery module when u have several pictures with different aspect ratio.

and one nice think is a different kind of mouseover.....for now just border highlight option. its useful but not cool.
will be great maybe add dark effect or highlight the image when the mouse is over and not just the border.

in fact gallery is ok, but its very very "base" not much customizable with some cool effect like nowday site.

wish see that improvment in next release

my site done with rocketcake: http://www.lazzarotti3dartist.com/


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Internatio?al" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact