Field Gallery - адаптивный дизайн

Hello

You can maybe set that pictures area css to:

.picture-class {overflow:hidden;}

rgds

Hello,

Unfortunately it only hides pictures :(

Ну тут сложный алгоритм подбора размера картинок исходя из их рамера. Они расчитываются точно в заданный конейнер. К сожалению адаптивнсти сюда не внести.

Понятно, жалко конечно, тогда буду использовать вариант предложенный пользователем jimie, картинки скрываются, но их всё равно можно просмотреть\пролистать, кликнув по доступным.

Hello COBALT, would you mind to explain your issue, your used field settings and template in english? Maybe I can help you out...

(Google Translator sometimes sucks ... ;) )

Hello pepperstreet,

Field Gallery miniatures: maximum width 600px, maximum height 120px.

website template the adaptive ( http://yootheme.com ): http://111q.ru

if the window of the browser is less 620px, miniatures of gallery aren't located:

it is necessary that miniatures decreased if don't enter website width

COBALT Field Gallery miniatures: maximum width 600px, maximum height 120px. if the window of the browser is less 620px, miniatures of gallery aren't located:

You are using the "Auto" mode? This is why you are getting a fixed container. It seems to be necessary for the distribution and sizing of the gallery thumbs. The actual purpose of the "Auto" mode is to get a proper thumbnail-grid. After visiting your site, I don't see an example for this grid... you just need thumbnails of the same size (in a row).

Suggestion

You should try the "Custom" mode. Just set your thumbnail sizes. IMHO you won't get a fixed container anymore.
The result is a "floating" layout of your thumbnails...
If the space is too small, the thumbnails break into a new line/row.

At least, you will get an "adaptive layout". The thumbnail sizes stay the same.

it is necessary that miniatures decreased if don't enter website width

The default gallery markup and the "dynamic amount" of total images do not allow a "real responsive" behavior.
Although, you could add some additional CSS to a certain media-query to reduce the px size on smaller screens.

Maybe a good feature request for a future release? Or Cobalt 9 in general. Maybe the default thumbnail display could be based on a nested bootstrap grid? Maybe output a plain UL/LI with parameters for custom classes etc.? (just loud thinking)

Platforms for blocks of miniatures: maximum width 600px, maximum height 120px. Miniatures: maximum width 100px, maximum height 120px.

I use CSS .picture-class {overflow:hidden;}, result: http://111q.ru/ios/item/3176-heroes-reborn-enigma

To see, reduce a browser window

no CSS .picture-class {overflow:hidden;}, result:

it is necessary that miniatures decreased if don't enter website width, the result is required:

PS. Maybe will help @media Rule ?

COBALT Platforms for blocks of miniatures: maximum width 600px, maximum height 120px. Miniatures: maximum width 100px, maximum height 120px.

I have checked with Yootheme WARP7 Master2.
I have tested with default Cobalt Gallery and "full.php".
I have not touched the maximum width in auto-mode settings.

Use thumbnail settings in "custom" mode, only.
Do not set a max-width for the container/frame.
Do not set a height for the row!

As far as I can tell, you won't get that 600px inline style and container.
Therefor you don't need that overflow. Remove it.

Result:
The thumnails will take as much as space as there is. (it behaves like 100% width)
If your thumbnails do not fit in this space... they will break into a new line.
So, no cutting off. All thumbs should be visible and clickable.

Example 480px

pepperstreet Result: The thumnails will take as much as space as there is. (it behaves like 100% width)

If your thumbnails do not fit in this space... they will break into a new line.

So, no cutting off. All thumbs should be visible and clickable.

There will be 2 rows

The result is necessary: 1 row with reduction of miniatures

COBALT The result is necessary: 1 row with reduction of miniatures

I understood your request. Just wanted to point out a workaround with the available parameters and options.

IMHO, the floating result is much better user-experience on small devices. Why? Hence the average thumbnail amount. If everything is in one row, you will get very tiny thumbs. Almost impossible to click & touch on a smaller device.

Additionally, you can use overflow-x: auto; to keep the images in a horizontal line. It will get scrollbars automatically. The same behavior like Bootstrap3's responsive tables.

Yootheme WARP supplies a special class uk-overflow-container
You may enter it in Cobalt Gallery field class parameter.

Result:

pepperstreet IMHO, the floating result is much better user-experience on small devices. Why? Hence the average thumbnail amount. If everything is in one row, you will get very tiny thumbs. Almost impossible to click & touch on a smaller device.

On the mobile device they it is much more than on the personal computer

ipod touch 4g (browser window 480px - 320px):

COBALT On the mobile device they it is much more than on the personal computer

I know. Depends totally on the device and screen. The majority has no Retina or Phablets. Testing with an iPod does not represent the whole user base ;)

If you really need to reduce the size you could target the div.image-wrapper and width property. But again, this is also very restrictive and not 100% responsive. You are working with px values. So, what should be the "right" px dimension for an "unknown amount" of thumbs in your opinion ;)

Anyways, here is an example:

• add custom field class in gallery field parameter e.g. myclass
• find a suitable media-query in your template's CSS. For WARP see theme.css at the end. It is well commented in section Layout.
• copy media-query to your custom.css
• add your custom class and the following rules to shrink your image thumbnails (backgrounds)

.myclass .image-wrapper {
    width: 64px;
    background-position: center;
    background-size: contain;
}

64px width is just an example. The size property might be contain or cover. Doesn't make a difference, because you keep the aspect ratio of the bigger thumbnail. So, it fits anyways.

Some additional thougths:

Not sure why the default gallery uses 2 image representations. It seems to overlay the actual image with the wrapper div's background ?!

If background size is too small, you might remove the property. This will result in a slightly cropped thumbnail.

The actual IMG is not visible (opacity=0 !!!) , so I decided to focus on the wrapper and background property. If you see any issues, you might try to use the IMG instead. Make the IMG visible and hide the backgound...
Here is a related topic and question. Hence nican's and my comments.

If you work with a certain total amount of images, you might try to use % values.

pepperstreet Not sure why the default gallery uses 2 image representations. It seems to overlay the actual image with the wrapper div's background ?!

Miniatures are made of the original of the picture, depending on settings of a field and are located in \cache\cobalt_thumbs\

It is impossible to make a platform for miniatures adaptive

I would use "custom" the mode but what to do with different pictures:

In "automatic" the mode, it is perfectly realized:

COBALT I would use "custom" the mode but what to do with different pictures:

Did you try different options in parameter Thumbs mode.
You might force a certain thumbnail height for all images... i.e. based on height, crop etc. Remember to delete thumbnail cache in Cobalt Tools.

In "automatic" the mode, it is perfectly realized

I know what you mean and like about it ;)
But the easy setup and result has that fixed width and amount of items per row.
I guess both parameters are needed for internal calculations. Hence: The actual result and goal is a "seemless wall" layout. It is not made to resize the whole wall responsively.

So, you might live with the "auto" benefits and combine them with:

• either overflow-x: auto; (scrollbars)
• or CSS to reduce size in certain media-query (adaptive to certain screensizes only)

PS: Do you know any full-responsive gallery wall example? A wall with different sized items? All CSS-based solutions I have found are responsive and fluid... but they do not resize the whole wall/container.

pepperstreet Did you try different options in parameter Thumbs mode.

You might force a certain thumbnail height for all images... i.e. based on height, crop etc. Remember to delete thumbnail cache in Cobalt Tools.

I tried, it is correctly displayed not in all materials

pepperstreet So, you might live with the "auto" benefits and combine them with:

• either overflow-y: auto; (scrollbars)
• or CSS to reduce size in certain media-query (adaptive to certain screensizes only)

it isn't correct if the platform is filled not completely:

pepperstreet Do you know any full-responsive gallery wall example? A wall with different sized items?

Unfortunately no

COBALT it isn't correct if the platform is filled not completely:

On which container element did you apply the overflow-x property? The gallery wrapper?
If you use "auto" mode, there is another DIV row which has the fixed width +1 px ...
Possibly this might cause the scrollbars. (no matter if your thumbnails fit or not)

pepperstreet On which container element did you apply the overflow-y property? The gallery wrapper?

#dd-kda97bf720e695b1debfab141ef962341 {
    overflow-y: auto;
}

Result: http://111q.ru/ios/item/3239-my-scans-pro-best-document-scanner

pepperstreet If you use "auto" mode, there is another DIV row which has the fixed width +1 px ...

Possibly this might cause the scrollbars. (no matter if your thumbnails fit or not)

#gallery144 div.images-row {
    overflow-y: auto;
}

doesn't work

COBALT doesn't work

Silly me! First of all, for any reason I have written overflow-y :( And copied it through all comments. Shame on me.
Obviously we need overflow-x instead!!!

Important detail

You have to remove the left floating from the image-wrapper DIV.
Make sure to use a specific rule. Combine either with your custom field class name,
or maybe gallery fieldID. Which seems to be attached automatically. Example:

#gallery144 div.image-wrapper {
float: none;
}

Second important detail

The auto-mode generates 2 surrounding DIVs, which cut-off your gallery by default.
First one is the gallery main wrapper.
Second one is the images row.
Both have to be modified.
Only 1 of the 2 should create the auto-scrollbars.

Example with galleryID#
(again, you might also use your custom field class instead)

#gallery144 {
    width: 100%;
}

#gallery144 div.images-row {
    width: 100%;
    overflow-x: auto;
}

As far as I can see, it does work with the 100% overrides. So, your max width parameters are not used anymore. The only remaining features: Row height and max thumbnails per row. And your favourite equal heights ;)