Strange behavior of thumbnails

Phoca Gallery - image gallery extension
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Strange behavior of thumbnails

Post by Jan »

Hi, I am now working on next version of Phoca Gallery.

When using Photoswipe, the CSS class will be uncommented:

Code: Select all

.pg-box3 figure {
	display: inline;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
	margin: 0 auto;
	padding: 0;
	display:relative;
}
so, then the thumbnails should be not more resized when using photoswipe:

Image

I will try to take a look at the resized icon. The problem is, there are many different libraries (popup methods + core loaded by Joomla! like obsolete mootools, etc. so sometimes it is hard to load different features without design conflicts - the example is photoswipe with figure tag)

BTW: I will still recommend modern responsive methods like photoswipe (methods like Highslide JS, etc. which are not responsive will be removed in future - in version ready for Joomla! 4)


Jan
If you find Phoca extensions useful, please support the project

Tags:
Socrates_mx5
Phoca Member
Phoca Member
Posts: 37
Joined: 21 Sep 2020, 14:06

Re: Strange behavior of thumbnails

Post by Socrates_mx5 »

Jan wrote: 29 Sep 2020, 00:17 I will try to take a look at the resized icon. The problem is, there are many different libraries (popup methods + core loaded by Joomla! like obsolete mootools, etc. so sometimes it is hard to load different features without design conflicts - the example is photoswipe with figure tag)

BTW: I will still recommend modern responsive methods like photoswipe (methods like Highslide JS, etc. which are not responsive will be removed in future - in version ready for Joomla! 4)
Jan, thanks for the the information.

I added your css-code to my user.css and that solved the problem of the thumbnails being shrank in size, which is great news.

Code: Select all

.pg-box3 figure {
	display: inline;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
	margin: 0 auto;
	padding: 0;
	display:relative;
}
The icons also looked fine in PhotoSwipe on the Smartphone, so this is a problem that seems to occur when using HighslideJS (Image Only).

The remaining problem with PhotoSwipe is now that it can't load images in portrait format. When this problem is solved, then PhotoSwipe will be my preferred choice. Until then I'll have to stay with HighslideJS (Image Only).
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Strange behavior of thumbnails

Post by christine »

Hi,
Socrates_mx5 wrote: 29 Sep 2020, 08:05 Jan, thanks for the the information.

I added your css-code to my user.css and that solved the problem of the thumbnails being shrank in size, which is great news.

Code: Select all

.pg-box3 figure {
	display: inline;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
	margin: 0 auto;
	padding: 0;
	display:relative;
}
Confirm: After adding above code, it works. Thanks Jan for your Code.
Socrates_mx5 wrote: 29 Sep 2020, 08:05The remaining problem with PhotoSwipe is now that it can't load images in portrait format. When this problem is solved, then PhotoSwipe will be my preferred choice. Until then I'll have to stay with HighslideJS (Image Only).
After test: Loading images in portrait format is possible.
- Also correct view under: Category View.

- But after displaying the image, get response: The image could not be loaded.
Don't see JS error under console. Maybe it comes from: div.pswp-preloader.pswp_preloader active

Kind regards
Christine
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Strange behavior of thumbnails

Post by Jan »

BTW, I still don't recommend JS Highslide for using on mobile phones as it is not responsive but if used and the template uses Bootstrap, the icons can be changed to Bootstrap icons in options and there is no more problem with enlarged icons on mobile phones:

Image

Jan
If you find Phoca extensions useful, please support the project
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Strange behavior of thumbnails

Post by christine »

Hi Jan,
Jan wrote: 29 Sep 2020, 20:36 BTW, I still don't recommend JS Highslide for using on mobile phones as it is not responsive but if used and the template uses Bootstrap, the icons can be changed to Bootstrap icons in options and there is no more problem with enlarged icons on mobile phones:

Image

Jan
FYI: It is Protostar using BS2, so you can't change in Option to BS3 icon (will not be loaded).

Kind regards
Christine
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Strange behavior of thumbnails

Post by christine »

Hi,
Socrates_mx5 wrote: 29 Sep 2020, 08:05
The remaining problem with PhotoSwipe is now that it can't load images in portrait format. When this problem is solved, then PhotoSwipe will be my preferred choice. Until then I'll have to stay with HighslideJS (Image Only).
I think, I have good news. Just tested successfully. Thanks to Jan for the hint 8)

a) enable Thumbnail Creation!
b) Then:

For PhotoSwipe, you have to set "Additional Images" to All

Image

c) in my case, the system started automatically. But I only hv some images. Maybe you have to Recreate the Thumbnails in several steps. If so, just make it category by category.

Kind regards
Christine
Socrates_mx5
Phoca Member
Phoca Member
Posts: 37
Joined: 21 Sep 2020, 14:06

Re: Strange behavior of thumbnails

Post by Socrates_mx5 »

Jan wrote: 29 Sep 2020, 20:36 BTW, I still don't recommend JS Highslide for using on mobile phones as it is not responsive but if used and the template uses Bootstrap, the icons can be changed to Bootstrap icons in options and there is no more problem with enlarged icons on mobile phones:
Thanks Jan. I changed the setting of Bootstrap 3 Icons from No to Yes, but then it's only the icon for Link 2 that is shown. The template I use is Protostar, which use Bootstrap, but it seems like Protostar uses its own icon set.

https://docs.joomla.org/J3.x:Joomla_Sta ... moon_Fonts

I believe this might be the reason why all the other icons are not shown. I downloaded Bootstrap to see if I could put its CSS-file in media/com_phocagallery/css/custom/, due to the instruction in the General Settings, but there were several files in its css-folder. Do you have any idea which bootstrap css-file/s to upload to the Custom folder?
Socrates_mx5
Phoca Member
Phoca Member
Posts: 37
Joined: 21 Sep 2020, 14:06

Re: Strange behavior of thumbnails

Post by Socrates_mx5 »

christine wrote: 29 Sep 2020, 22:31 I think, I have good news. Just tested successfully. Thanks to Jan for the hint 8)

a) enable Thumbnail Creation!
b) Then:

For PhotoSwipe, you have to set "Additional Images" to All

c) in my case, the system started automatically. But I only hv some images. Maybe you have to Recreate the Thumbnails in several steps. If so, just make it category by category.
Thanks, Christine you made my day!

PhotoSwipe is showing images in portrait format After changing "Additional Images" to All!

When I just clicked in Images in back-end, then it started automatically to regenerate thumbnails. It took a few minutes until it was done, meanwhile I could get a better view of the image from Harlem in the Netherlands :)

All images are shown nicely in PhotoSwipe, both on the computer and the Smartphone. A bonus is that besides the title of the image even its description is shown when there is one.

The icons are shown as expected on the Smartphones as well as on the computer.

Now it's perfect and I'm happy as Larry!
christine
Phoca Hero
Phoca Hero
Posts: 2725
Joined: 28 Nov 2010, 17:20

Re: Strange behavior of thumbnails

Post by christine »

Hi,

that's fine :D

Will close here. For New questions etc. create new Thread. Thanks.
Kind regards
Christine
Post Reply