[5.2] [Guided tours] Increase the width and adjust the height of the popup

[obuisard]

Summary of Changes

When creating tours, media content is very limited with the size of the popup.
Shepherd forces a popup width to be 400px max.
This PR proposes to increase the width to 600px and a popup that resizes according to its content.
In the case of a popup positioned a the center of the window, the max width could be increased even more (up to 1200px).

Testing Instructions

Run a few tours and see if the popups resize properly with different window sizes.
Add an image to a tour, run the tour and look at the result, either in a central position or at a bottom position.

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

The content dictates the width of the popups, up to 600px, except for the center popups, up to 1200px.

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[brianteeman]

How do you add an image. Every time I insert an image into the description and then save it is removed

[obuisard]

How do you add an image. Every time I insert an image into the description and then save it is removed

Hi Brian, I use

I have not seen the behavior you are experiencing so far.
I think the removal of the image tag could be an editor setting issue.

[brianteeman]

tried on two different installs on different servers and the image is removed on save
Even tried without any editor and still no luck

[obuisard]

tried on two different installs on different servers and the image is removed on save Even tried without any editor and still no luck

Thanks for the gif.
I believe that is because you left the language key in the content. Have you tried without it? The language key takes precedence over the rest.

[brianteeman]

yes that was it. strange that you can add text to the language key but not an image

[obuisard]

yes that was it. strange that you can add text to the language key but not an image

Yes, it has to be improved...

[brianteeman]

I have tested this item 🔴 unsuccessfully on 3a99243

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43810.}

[brianteeman]

It works fine when using a landscape image as shown in your instructions. However if you have a large portrait image it causes problems. Not least of which is that you can not exit the tour as you cannot reach the buttons.

Before PR

After PR

[obuisard]

It works fine when using a landscape image as shown in your instructions. However if you have a large portrait image it causes problems. Not least of which is that you can not exit the tour as you cannot reach the buttons.

Yes, we had the problem before, even before this PR. The PR increases the width, so it makes the behavior even worse.
So I have added a fix for the height, so every tall popup shows more 'elegantly'.

[brianteeman]

I have tested this item ✅ successfully on ed67f8d

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43810.}

[Kostelano]

It is not entirely clear what the width of the window depends on. I just used the basic greeting tour and the blocks with roughly the same amount of text were very different in width. In addition, the buttons also “stretched out”.

There is no indentation below from the main block to the buttons. Previously he was.

[obuisard]

It is not entirely clear what the width of the window depends on. I just used the basic greeting tour and the blocks with roughly the same amount of text were very different in width. In addition, the buttons also “stretched out”.

The popup resizes according to its content with this PR.
When targeting an element on the page, the popup resizes and is not allowed to be bigger than 600px (going over 600px is problematic when the popup needs to show on the left or the right of an element, it can go out of space really fast).
When NOT targeting any element on the page (the popup is showing in the center of the page), the popup can resize up to 1200px (depending also on how large the viewport is).

This is meant to allow more verbose content, images and videos ('what's new' tours -coming soon - will be more verbose).

People creating tours can visually tweak the tours to show 'elegantly' with this new behavior. It really depends on how the step content is formatted.
All core tours show 'nicely' out of the box with this new change, except for the welcome tour which could use a couple <br /> tags in the content of the 1st and 3rd steps to avoid a long line and expand to full width.

As far as button stretch, we left the default behavior where buttons adapt to the popup width.

[obuisard]

There is no indentation below from the main block to the buttons. Previously he was.

I put the padding back, even though it was fixed in PR #43809. Padding needs to be set in both PRs so that content shows as intended when PRs are run separately.

[webiedesign]

I have tested this item ✅ successfully on 479d165

I added images to 2 guided tours and they adapted to my screen resolution up to aprox 1200. Mobile display resized appropriately and the targets remained where they should have.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43810.}

[AboutTimeIT]

I have tested this item ✅ successfully on 4906557

Tested it in ‎5.2.0-alpha3 with a 1280x683 image and a 1070x4182.
The landscape image is resized within the instructionswindow. The portrait image eil get scrollbars on the side of the main window so that the buttons stay available.
The Guided Tours windows stay on their positions when the images are inserted.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43810.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43810.}

[pe7er]

Thanks @obuisard !