Strange behavior of thumbnails

[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:



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

[Socrates_mx5]

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]

Hi,

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.

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).

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

[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:



Jan

[christine]

Hi 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:



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]

Hi,

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

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.

Kind regards
Christine

[Socrates_mx5]

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]

I think, I have good news. Just tested successfully. Thanks to Jan for the hint

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]

Hi,

that's fine

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