? ? Pending

User tests: Successful: Unsuccessful:

avatar Bakual
Bakual
24 Feb 2017

Since it was suggested in various comments so far to get rid of the fotorama JS and CSS in the custom gallery field

Summary of Changes

Removes Fotorama media and changes the gallery plugin to use Bootstrap 2.3 thumbnails.
It adds also a new option to specify how many thumbnails it should show per row. This is limited to values that make sense in a Bootstrap scenario (1,2,3,4,6,12).

Testing Instructions

  • Set up a custom field of type gallery and assign to an article
  • Check frontend

Expected result

bootstrap

Actual result

fotorama

Documentation Changes Required

If there is already a documentation about this custom field, then it needs to be adjusted.

avatar Bakual Bakual - open - 24 Feb 2017
avatar Bakual Bakual - change - 24 Feb 2017
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 24 Feb 2017
Category Administration Language & Strings JavaScript Front End Plugins
avatar Bakual
Bakual - comment - 24 Feb 2017

@dgt41 @coolcat-creations This one's for you two ?

avatar laoneo
laoneo - comment - 24 Feb 2017

Can he images made somehow with equal height?
image

Also when I click on an image it opens the page with only the image. Perhaps just open them in a modal window (for the record, I'm not a fan of modals).

avatar Bakual
Bakual - comment - 24 Feb 2017

The thumbnails are done using the default Bootstrap thumbnails component (http://getbootstrap.com/2.3.2/components.html#thumbnails).
I didn't touch the picture resize stuff you had put into the original plugin, so maybe that can be used to make them equal height? I haven't tested that as I assumed it works ?

Also when I click on an image it opens the page with only the image. Perhaps just open them in a modal window (for the record, I'm not a fan of modals).

That should be doable, yes. But don't ask me how to do that without already loading all the full-resolution images. Maybe someone else with more knowledge in Bootstrap modals knows that.

avatar laoneo
laoneo - comment - 25 Feb 2017

The thumbnail code worked for fotorama, you can't expect that it works for your code as well.

There is no need to load the full sized image as well, you can just pass the full url to the modal window. If you can't figure it out, I can have a look on Monday.

I would not use the bs modal, too many conflicts with bs3 templates, but the joomla modal should work here.

avatar Bakual
Bakual - comment - 25 Feb 2017

The thumbnail code worked for fotorama, you can't expect that it works for your code as well.

Honestly I haven't looked at where exactly it is used. I just saw there is some resizing done in PHP and assumed it has to do with that. That part should work independant of the Fotorama JS as it is done in PHP.

There is no need to load the full sized image as well, you can just pass the full url to the modal window. If you can't figure it out, I can have a look on Monday.

Yep, that's the part I have not figured out yet.

I would not use the bs modal, too many conflicts with bs3 templates, but the joomla modal should work here.

Doesn't the Joomla modal use Bootstrap?

avatar Bakual Bakual - change - 25 Feb 2017
Labels Added: ? ?
avatar Bakual
Bakual - comment - 25 Feb 2017

I removed the maxWidth and maxHeight settings and related codde as they indeed are useless now as you said.
The only resizing that is done here is for the thumbnails.
As for equal height, currently the code makes it equal width. We could make it optional do it equal height, but imho width will work better (Bootstrap woudl shrink the image if it's to wide otherwise).
Your example screenshot probably was a bit a theoretical case as usually in galleries you will have most likely pictures of similar formats, not banner and photos mixed. You may get landscape and portrait formats mixed thought.

avatar zero-24
zero-24 - comment - 25 Feb 2017

@Bakual please add the new strings also to the frontend en-GB ini file ;)

avatar Bakual
Bakual - comment - 25 Feb 2017

?

avatar infograf768
infograf768 - comment - 28 Feb 2017

Works here, but we indeed need a modal to not be forced to use browser back in history.

avatar infograf768
infograf768 - comment - 28 Feb 2017

Also, maybe add .jpeg here
$filter = '\.jpg$|\.png$|\.bmp$|\.gif$';

avatar Bakual
Bakual - comment - 28 Feb 2017

Added jpeg to file filter.
As for the modal I agree, but need some guidance. If we have a modal with URL injection already somewhere in core just point me to it and I'll figure it out.

avatar Bakual
Bakual - comment - 28 Feb 2017

Changed so image opens in a modal. However I think that has to be done in a better way.

  • I had to create a modal for each image which is ugly when looking at the HTML code. The full image is only loaded when the modal is openend, but still. Imho there must be a way where the URL is part of the modal call itself (using data attributes) and the modal needs to be specified only once.
  • While I was able to dynamically specify the height of the modal based on the image properties, the modalWidth can't be set in pixels, only in vh to my knowledge. Not sure what the best approach is. Currently the image will be left aligned in the modal with a big white empty space to the right, which looks bad.
  • Having a title and footer for the modal is a bit pointless for an image. But at least the title part is always there even if no title is specified. I haven't tried yet to omit the footer as it was my least concern ?

I'm thinking the modal approach isn't the best choice here. Anyone has a better idea or knows how the modal has to be used properly here?

avatar Bakual
Bakual - comment - 1 Mar 2017

Please disregard the previous comment. Due to the issues I wrote I changed it to a popover approach.
Now the original image will open in a popover when hovered.

I will leave it like that until someone can provide a better way.

avatar infograf768
infograf768 - comment - 1 Mar 2017

will test asap as changes in lang strings

avatar franz-wohlkoenig franz-wohlkoenig - test_item - 1 Mar 2017 - Tested successfully
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 1 Mar 2017

I have tested this item successfully on 2d218a8

@Bakual the original Size isn't openend:


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/14238.

avatar Bakual
Bakual - comment - 1 Mar 2017

I see, apparently the popover does some resizing using CSS. Which imho actually is a good thing as big pictures will be resized.
For me it is fine as it is. If someone has a better idea I'm open for code suggestions ?

avatar infograf768
infograf768 - comment - 1 Mar 2017

Honestly, this is no good. It makes the gallery quite useless.
What we need is a lightbox. It exists for bootsrap, but needs BS >=3.10

avatar infograf768
infograf768 - comment - 1 Mar 2017

I added in Protostar CSS:

.popover{
    max-width: 600px; 
}

and I can get

screen shot 2017-03-01 at 17 55 32

screen shot 2017-03-01 at 17 57 31

avatar zero-24
zero-24 - comment - 1 Mar 2017

@bakual drone is ailing on a missing space ;)

avatar Bakual
Bakual - comment - 1 Mar 2017

@zero-24 fixed ?

avatar Bakual
Bakual - comment - 1 Mar 2017

Honestly, this is no good. It makes the gallery quite useless.
What we need is a lightbox. It exists for bootsrap, but needs BS >=3.10

Yep, there is no lightbox in core, and I don't want to add one.
Keep also in mind that the existing gallery also has no lightbox. It just shows a bigger image above the thumbnails. So we don't really need one.

As for the CSS, I would leave that to the site integrators / template designers. I don't want to add CSS in this custom form field.
It depends a lot on the usecase of that gallery plugin. For some cases this proposal is fine, for others they need a bigger one or even a lightbox. The nice thing is that it is completely overrideable and customisable.

avatar infograf768
infograf768 - comment - 2 Mar 2017

It does not cost much to add the max-width param.
if no figure is entered in the field or if figure == 270px, no css would be added and anyone can do whatever they like.
For Protostar and similar templates (many users do NOT use complex "integrators" templates), the max-width makes a lot of sense.
We just have to explain in the tip for that field what it would do.

The existing state of the gallery as well as this proposal, without at least the choice for the users who need this max-width is totally useless.
Basically, as the code would be in the tmpl, it will remain overrideable and customisable.

In that case, let's get rid of this plugin and let people create specific plugins who will really be useful.

avatar dgt41
dgt41 - comment - 2 Mar 2017

In that case, let's get rid of this plugin and let people create specific plugins who will really be useful.

Excellent idea! :)

avatar infograf768
infograf768 - comment - 2 Mar 2017

I tested this:
(BTW, in this PR, there are obsolete fields in /plugins/fields/gallery/gallery.xml i.e. not equal to //plugins/fields/gallery/params/gallery.xml)

Adding a field

                       <field
				name="popover_maxwidth"
				type="integer"
				label="PLG_FIELDS_GALLERY_PARAMS_POPOVER_MAXWIDTH_LABEL"
				description="PLG_FIELDS_GALLERY_PARAMS_POPOVER_MAXWIDTH_WIDTH_DESC"
				first="270"
				last="2000"
				step="10"
			/>

then modified the tmpl /plugins/fields/gallery/tmpl/gallery.php by adding

$popoverMaxWidth = $fieldParams->get('popover_maxwidth');
$thumbWidth      = $fieldParams->get('thumbnail_width', '64');
$thumbsRow       = $fieldParams->get('thumbs_row', 6);
$spanClass       = 'span' . 12 / $thumbsRow;

if ($popoverMaxWidth && $popoverMaxWidth !== 270)
{
	$doc->addStyleDeclaration('
		.popover {
			max-width: ' . $popoverMaxWidth . 'px;
		}
	');
}

whch does the job.

avatar Bakual
Bakual - comment - 2 Mar 2017

Your proposal would change the max-width of each popovr used in core when that field is active.
Also you can't add CSS to the head like that with a custom field that may be present multiple times. You'd end up with multiple such declarations..
Both are things I don't want to do in a custom field. Sorry.

avatar infograf768
infograf768 - comment - 2 Mar 2017

OK, then let's kill this field and be over with.

avatar laoneo
laoneo - comment - 2 Mar 2017

Joomla comes with Squeezebox, something like that should work:

var width = jQuery(window).width();
var height = jQuery(window).height();
SqueezeBox.open(url, {
	handler: 'iframe',
	size: { x: width < 650 ? width - (width * 0.10) : 650, y: height < 650 ? height - (height * 0.10) : 650 }
});

Just when you guys still wanne use a modal. But like it is now, I would also skip it honestly.

avatar infograf768
infograf768 - comment - 2 Mar 2017

Made a PR to remove this plugin from core
#14309

avatar dgt41
dgt41 - comment - 2 Mar 2017

@laoneo that's a huge no from me as SqueezeBox will bring back Mootools on the front end

avatar laoneo
laoneo - comment - 3 Mar 2017

@dgt41 you will see in a few years, mootools will be again state of the art and "The" javascript library you want to use in your project ;-)

avatar dgt41
dgt41 - comment - 3 Mar 2017

That's a reason that I don't want to use any of the frameworks out there. Their lifespan is given (jQuery included)

avatar zero-24
zero-24 - comment - 4 Mar 2017

Field is removed now from the core

avatar zero-24 zero-24 - change - 4 Mar 2017
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2017-03-04 08:57:10
Closed_By zero-24
avatar zero-24 zero-24 - close - 4 Mar 2017
avatar coolcat-creations
coolcat-creations - comment - 4 Mar 2017

Sorry i somehow missed this topic... Suggestion: Can we create somewhere a small library of plugins or extensions that never made it in the core but are still useful or a good base? My heart is bleeding when work that is done is thrown away.

avatar zero-24
zero-24 - comment - 4 Mar 2017

What about joomla-extensions ?

avatar Bakual
Bakual - comment - 4 Mar 2017

I'm quite sure the JED will be filled up with such plugins fast. They probably need to create a new category thought.
I can save my work and put it to my repo if that helps you.

avatar infograf768
infograf768 - comment - 4 Mar 2017

if we get boostrap 3.x in j 4, this plugin can easily be used again with little change

avatar dgt41
dgt41 - comment - 4 Mar 2017

@infograf768 it should be bootstrap 4, but the changes are still an easy task

avatar Bakual
Bakual - comment - 4 Mar 2017

@coolcat-creations See https://github.com/Bakual/CustomFieldGallery
Download it as zipfile and you can directly install it. Should be same code.

avatar coolcat-creations
coolcat-creations - comment - 5 Mar 2017

@Bakual thank you!!

Add a Comment

Login with GitHub to post a comment