CSS bug/error

Phoca Gallery - image gallery extension
rogerco
Phoca Member
Phoca Member
Posts: 33
Joined: 18 Sep 2011, 16:17

CSS bug/error

Post by rogerco » 19 Apr 2020, 16:27

Inserting a gallery on a page seems to cause the following style to be inserted in the header of the page:

Code: Select all

<style type="text/css">
	img {
		max-width: none !important;
	}
</style>
This is very very annoying if you have any other images anywhere on the page which you do not want displayed without a max-width limit.
Most templates have a standard

Code: Select all

img {
	max-width: 100%;
}
to apply as a default to all images so they don't overflow their container unless you explicitly want them to. What you have done is broken that by using a !important in the header which has a higher priority than any stylesheet.

Could it be amended to restrict it to only apply to phocagallery elements please.

Thanks

Tags:

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42872
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS bug/error

Post by Jan » 20 Apr 2020, 13:51

Hi, which version of Phoca Gallery do you use?

In latest the following item is set:

Code: Select all

$s .= "\n" . '#phocagallery img {'."\n";
$s .= '   max-width: none;'."\n";
$s .= "\n" . '}'."\n";
If you find Phoca extensions useful, please support the project

rogerco
Phoca Member
Phoca Member
Posts: 33
Joined: 18 Sep 2011, 16:17

Re: CSS bug/error

Post by rogerco » 20 Apr 2020, 15:48

Phoca Gallery 4.3.18 - a fresh install as I'm trying it as an alternative to sigplus.
Plugins also downloaded from site last week - none showing any update available.
Gallery plugin 4.3.16
Slideshow plugin 4.3.11
Button plugin 4.3.11

I noticed it on a page where I was using the gallery plugin and there was another image on the page.

The setting in the page header is removed if I remove the phocagallery plugin from the page.

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42872
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS bug/error

Post by Jan » 20 Apr 2020, 19:26

Hi, hmmm, testing now, I don't see any such code in plugin, not even in the source HTML.

Image

Can you paste here the plugin syntax so I can test it.

Or do you have a link to the site where this occurrs so I can take a look at it :idea:

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

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42872
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS bug/error

Post by Jan » 20 Apr 2020, 19:47

EDIT: I found it,

for now you can do a quick fix here:

administrator/components/com_phocagallery/libraries/phocagallery/render/renderdetailwindow.php

on lince cca 301 - just add #phocagallery before the img tag.

I will change it in next version.

Thank you much for this info.

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

rogerco
Phoca Member
Phoca Member
Posts: 33
Joined: 18 Sep 2011, 16:17

Re: CSS bug/error

Post by rogerco » 20 Apr 2020, 21:49

AAARGH Noooooo :o

I spoke to soon - there is a very undesirable side effect to doing that mod:
Using Jak Lightbox for the detail view all the images are offset to the left and down by about 2/3rd of the popup width and height.
(I can't work out how to paste an image here - is there a way to attach it so that you can see what I mean)
I haven't tried other setting but Jak is the only one that lets me display titles and descriptions nicely

Back to the drawing board I'm afraid :x

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42872
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS bug/error

Post by Jan » 21 Apr 2020, 16:46

Hi,

just use the following link to add screenshots here:
Image

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

rogerco
Phoca Member
Phoca Member
Posts: 33
Joined: 18 Sep 2011, 16:17

Re: CSS bug/error

Post by rogerco » 21 Apr 2020, 19:33

OK here you go:
1. The image as displayed in the Jak Lightbox without modifying the renderdetailwindow.php file
Image

2. Inspecting the image
Image
Note that the element itself has {position:absolute; top 0px; left:100px}
and that the page has {max-width: none !important;}
which overrides the template {max-width:100%}

3. After modifying the code as above
Image
The image has been offset

4. Inspecting the image with the modified code
Image
Note that now the element position has been modified to {top:225px; left:400px;}
but on the other hand there is no page {max-width} setting overriding the template default.
Also note that the settings for the image width and height are now missing.
The actual lightbox image area on this screen is 600 by 450, the thumbnail image that is being displayed is 640x480px.

The offset of 225,400 has moved the image by half of the display width and height from the original 0,100 offset.

So for some reason the image attributes for size are being replaced by a position offset...all because the max width is now 100%

rogerco
Phoca Member
Phoca Member
Posts: 33
Joined: 18 Sep 2011, 16:17

Re: CSS bug/error

Post by rogerco » 21 Apr 2020, 19:55

And to apparently fix it you can amend lines 289-300 in the same file to read:

Code: Select all

$customJakTag .= '.lightBox {height: '.$lHeight.'px;width:800px;}'
				.'.lightBox .image-browser-caption { height: '.$lcHeight.'px;}'
				.'.lightBox .image-browser-thumbs { display:none;}'
				.'.lightBox .image-browser-thumbs div.image-browser-thumb-box { display:none;}'
                  		.".lightBox .image-browser-image img {top:0 !important; left:100px !important;}";
			}
ie insert the offset with an !important flag - however this might not work correctly on different sized screens...or may have further undesirable consequences.

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42872
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: CSS bug/error

Post by Jan » 21 Apr 2020, 20:10

Hi, the JAK method is an obsolete method (not responsive) which will be removed in Joomla! 4. Try to use some modern responsive method, like Photoswipe is:

https://www.phoca.cz/phocacartdemo/phoca-gallery
If you find Phoca extensions useful, please support the project

Post Reply