Strange behavior of thumbnails

[Socrates_mx5]

The thumbnails of photos are scaled down to 70 x 46.6667, when they're expected to be 150 x 100. It's just the thumbnails of the photos that has this behavior. The thumbnails of the categories are showing the expected 150 x 100. When looking at the css-code in the Inspector of Firefox, it shows that the code is almost identical between the thumbnail of the categories and the thumbnail of the photos. I believe the problem might be cause of what make the code responsive.

Now I'm using Photoswipe. There was also a problem with the resize and position of the thumbnails of photos when I used Jak Lightbox, even if the behavior was a bit different.

The Phoca Gallery is run on Joomla 3.9.21 and PHP 7.4.9.

When using Photoswipe the differences between the thumbnails of the categories and photos start in the div class="pg-box1":

• Thumbnails of photos - size is scaled down to 150 x 74.6667
  Thumbnails of categories - size is 150 x 100

The div class="pg-box2":

• Thumbnails of photos - size is scaled down to 150 x 46.6667
  Thumbnails of categories - size is 150 x 100

The div class="pg-box3":

• Thumbnails of photos - size is scaled down to 150 x 46.6667
  Thumbnails of categories - size is 150 x 100

The thumbnail image (div class="pg-image"):

• Thumbnails of photos - size is scaled down to 70 x 46.6667
  Thumbnails of categories - size is 150 x 100

I've tried to override:
max-height: 100px;
max-width: 150px;

with:

Code: Select all

.pg-box1, .pg-box2, .pg-box3 {
	width: 150px !important;
	height: 100px !important;
}

but it doesn't have any impact on the resize of the thumbnails images of the photos, it just mess up the mosaic thumbnail images of the categories.

The Phoca Gallery looks fine, except this unwanted behavior. Any ideas how to solve it?

[christine]

Hi,

but it doesn't have any impact on the resize of the thumbnails images of the photos, it just mess up the mosaic thumbnail images of the categories.

Unfortunately I don't know exactly what you mean. Would be useful to see it live.

You are using mosaic - as stated above? As it belongs to Categories View and not which Detail View (photoswipe) you are using.

Did you check example of demo and explanation? https://www.phoca.cz/documents/2-phoca- ... -demo-site.

Kind regards
Christine

[Socrates_mx5]

Hi Christine,

Yes, I've had a look at the demo and document of mosaic, but the problem was already there before when I used Jak Lightbox. I changed to Photoswipe because it works better on Smartphones.

The site is live, but I don't fancy to show the link in this thread. Can I send the link by the contact form of Phoca instead?

[christine]

Hi,

you could try it to send via PN.

Kind regards
Christine

[Socrates_mx5]

It doesn't look like that I can send PM. I get the following message when trying to compose it:

We are sorry, but you are not authorised to use this feature. You may have just registered here and may need to participate more in discussions to be able to use this feature.

I send the link by the contact form instead. Please let me know if you get it.

[christine]

Hi,

confirm. Got the Link from Jan.

At the moment, I'm only able to "sort out". You are not meaning the Categories View but rather the Category View.

I see, e.g.:

Code: Select all

<a class="photoswipe-button" title="" href="/images/phocagallery/General/thumbs/phoca_thumb_l_imgp4184_crop_web.jpg" itemprop="contentUrl" data-size="900x536"><img src="/images/phocagallery/General/thumbs/phoca_thumb_m_imgp4184_crop_web.jpg" alt="...." class="pg-image img img-responsive c-Image c-Image--shaded" itemprop="thumbnail"></a>

> don't know where: thumbs/phoca_thumb_l_imgp4184_crop_web.jpg comes from.

We will check further.

Kind regards
Christine

[Jan]

Hi,

if I see the site:
.../category/5-general

the real size of the thumbnails is 150x100

When I disable this CSS on the site:

/templates/my_protostar/css/template.css

then the size is correct, so it seems, there is some conflict, some rule which overwrite the image size

Jan

[christine]

Hi,

then the size is correct, so it seems, there is some conflict, some rule which overwrite the image size

Jan

I see this here (in /media(com_phocagallery/css/custom):

Code: Select all

img.pg-image {
//	width: 150px !important;
//	height: 100px !important;
}

try to delete this here: //

in generell: I saw also in other CSS, e.g. user.css (will be loaded at last) and take precedence over other CSS: // (two slashes) in front of some Codes. If you want to comment out some segments, use for example:
/*your code*/

Kind regards
Christine

[Socrates_mx5]

the real size of the thumbnails is 150x100

When I disable this CSS on the site:

/templates/my_protostar/css/template.css

then the size is correct, so it seems, there is some conflict, some rule which overwrite the image size :idea:

Thanks, this is good to know. All customization of CSS of my Protostar template is done in user.css. The template.css is unchanged. I've made a few minor changes in override files of my_protostar. I temporary swapped back to the default Protostar template to see if it made any difference, but the thumbnails are still scaled down further then expected.

I wonder if there're any other user of the Protostar template that experience the same behaviour, or it's just me. If it's only me then it maybe could depend on some of the other plugins I use for the site.

[Socrates_mx5]

Hi,

then the size is correct, so it seems, there is some conflict, some rule which overwrite the image size :idea:

Jan

I see this here (in /media(com_phocagallery/css/custom):

Code: Select all

img.pg-image {
//	width: 150px !important;
//	height: 100px !important;
}

try to delete this here: //

in generell: I saw also in other CSS, e.g. user.css (will be loaded at last) and take precedence over other CSS: // (two slashes) in front of some Codes. If you want to comment out some segments, use for example:
/*your code*/

Kind regards
Christine

I'm aware that comments are written different in CSS then in PHP, but it's my experience that comment out a line with "//" at the beginning works in CSS.

Code: Select all

img.pg-image {
//	width: 150px !important;
//	height: 100px !important;
}

This code was just for testing, but it doesn't make any difference if the lines are comment out or deleted. I've deleted the lines I commented out in both user.css and phocagallerycustom.css, so there won't be any doubt those lines are creating the trouble. When testing afterwards, nothing has changed. The thumbnails of the photos are still scaled down. Observe that the thumbnails of the sub-category in the second category is not scaled down.