How to make image size dynamic

[Kuper]

How to make image size dynamic
depending on the monitor
desirable magnific
cannot be specified as a percentage
you can not guess who has what screen resolution
it looks bad
sorry google translator

[christine]

Hi,

which version of Phoca gallery & Joomla version are you using?
https://www.phoca.cz/documents/2-phoca- ... e-joomla-3
it looks bad? Show us your site please.

Kind regards
Christine

[Kuper]

Joomla 3.9.6 - 4.3.18
http://demo.cms-php.ru/?option=com_phoc ... Itemid=101
http://demo.cms-php.ru/index.php?view=c ... Itemid=130
http://demo.cms-php.ru/index.php?option ... Itemid=134

[KarEm]

Hi,
I am not sure if I got you correctly.

The adaptation to different monitor / screen sizes is realized by a suitable template. This template has to support the "responsive" approach. If this is the case, no percentage value must be defined for the scaling of the images.

The two images in the phoca gallery have a size of 640 x 360px. This size (for the detailled view) can be adjusted via the options (see link from Christine).
The pictures in the joomgallery have a size of 1920 x 1080px respectively 2489 x 1400px and those in the eventgallery a size of 1600 x 900px.

That means four different sizes but what is the size you want for the detailed view of your images?
What do you mean by "... it looks bad..." and which template do you use?

Regards
KarEm

[Kuper]

default template
I did not understand where the link these settings
poke my nose please
As you noticed in JG, an image of any size adapts to the monitor.
http://demo.cms-php.ru/index.php/phoca/category/1-new 3840 px i don't see it on the screen i need a microscope
you can not guess in advance who has what monitor, set size 640 х 360 for 4k monitor, is it really good ??? or 1920px and the monitor will be with a resolution of 1366, what then?
the same with adaptation EG
http://demo.cms-php.ru/index.php/event/3840-2160px
original image https://i.lensdump.com/i/83tUH.jpg

I'm lost
thank

[KarEm]

Hi,

...poke my nose please...

Global Configuration->Phoca Gallery->Thumbnails->Images And Detail Window Size Settings
Options: Detail Window Width and Detail Window Hight

With these options you can change the size of the thumbs for the detailed view.

Regards
KarEm

[Kuper]

It does not work as a percentage.
I saw it
if only indicate a large size of about 4000px
and hope not to get off the screen

[KarEm]

Hi,

It does not work as a percentage.

I'm not aware of such a option in PG and to be honest I don't see a value add for this approach.

Regards
KarEm

[Kuper]

I already realized that if you set the size larger than you need the picture still does not go beyond the edges of the monitor
you can stupidly put 3000px or 9000 image will be approximately 80% of the screen resolution
so on this i think everything

thank

[christine]

Hi,

images in generally responsive design: https://www.w3schools.com/howto/howto_c ... onsive.asp

In your example with detail view magnific:

Code: Select all

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}

PG is rendered for responsive design. You can check it with e.g. Strg+Shift+M.

Nevertheless take (also) care of server/speed/performance, when loading big images.

Kind regards
Christine