Add width and height directives to Edit attachment iframe via front end

[secarica]

Under some circumstances, specifically when using some old Joomla templates on Joomla version 5 or 6 (probably on 4 too), when editing an existing attachment via front end, the modal window displays very small horizontally (~25% by comparing to the browser window). This does not happen on native Cassiopeia template and nor when adding an attachment.

Solution: please add the width and height directives on the iframe displaying the edit dialog.

On version 4.2.1 just released this means line 466 on file /components/com_attachments/tmpl/attachments/default.php (in server installed instance; in .zip package I think this corresponds to /packages/attachments_component/site/tmpl/attachments/default.php)

Old existing line:
'body' => "<iframe src=\"$update_url\" scrolling=\"yes\" loading=\"lazy\"></iframe>",
should then become
'body' => "<iframe width=\"100%\" height=\"600\" src=\"$update_url\" scrolling=\"yes\" loading=\"lazy\"></iframe>",

I followed the values from Add attachment option (as opposed to Edit attachment), where the dialog was displayed correctly from the start anyway.

Than you,
Cristi

[parapente]

@secarica I understand that this is a problem with some templates but what you are describing is creating a problem in all templates (the height is always 600px). For people with high resolution monitors this makes the iframe height quite small. Usually it is easier to apply a template modification that sets the height via css if needed.

[JLTRY]

@parapente perhaps should we use % for the width and height like here at line 257 of file site\tmpl\attachments\default.php

'body' => "<iframe src=\"$url\" scrolling=\"auto\" loading=\"lazy\" width='95%' height='95%'>
                            </iframe>",

[parapente]

@JLTRY although it is 95% it never really is that big the dialog. I don't think they really work with both sizes using percentage. If it works for @secarica I would not be against it.

[secarica]

@secarica I understand that this is a problem with some templates but what you are describing is creating a problem in all templates (the height is always 600px).

@parapente I understand that, but those values are not my invention, I took them as is from the Add attachment code. If those values are already acceptable for the existing Add attachment dialog, then why are they wrong for Edit attachment dialog ?

Same values are already existing in line 2031 in /components/com_attachments/src/Helper/AttachmentsHelper.php (in server installed instance; in .zip package I think this corresponds to /packages/attachments_component/site/src/Helper/AttachmentsHelper.php)

[JLTRY]

@secarica Can you please check this modification at line 466 of same file
'body' => "<iframe src=\"$update_url\" scrolling=\"yes\" loading=\"lazy\" width=\"80%\"></iframe>",

[secarica]

@JLTRY Sorry, but the only acceptable solution is the one stated in my first post, i.e. to apply the same syntax that is already implemented for Add attachment. See for yourself by looking at the snapshots (I tried to enter the description in the 'alt' images tag). I don't understand the need for reinventing the wheel.

[secarica]

I tried to enter the description in the 'alt' images tag

Meaning in this order: 'wrong_original' / 'wrong_80_percent_width' / 'good_as_in_original_code_for_add_attachment'

[JLTRY]

@secarica PErhaps the height is wrong so you could use
'body' => "<iframe src=\"$update_url\" scrolling=\"yes\" loading=\"lazy\" width=\"80%\" height=\"80%\"></iframe>",

The difficulty is that that with my template I do not reproduce the problem

[secarica]

@JLTRY Somewhat better, but still not the same as for Add attachment. I still don't get it: why keep 100% for Add attachment code (second snapshot below) but reduce to 80% for Edit attachment code (first snapshot below) ?

[parapente]

@secarica I see, I still think that it is wrong to use 600px on the height. I will have a look at it. It should be better off using vh and vw instead of pixels as it would take into account the actual size of the screen.

[secarica]

JLTRY > [...] The difficulty is that that with my template I do not reproduce the problem

The template I used for my above snapshots is just an example, but take note that this particular template is widely used, being powerful and free. For developing an extension like this one here, I think it would be advisable to have it available in a test environment:
https://www.joomshaper.com/joomla-templates/helixultimate

[parapente]

@secarica you can understand that it is impossible to test every free template there is for joomla. I already have 4 templates that I use regularly to test various things about the extension and in all 4 templates the extension appear correctly as it is right now. We cannot predict what styles will be used in every template that will be used but it should be really easy for someone who sets up a site to create a child template and override every style he wants in his site.

That being said, I will have a look if we can use vh for setting the height of the dialog. It will be handly later on if we try to make it responsive.

[JLTRY]

@parapente I tried to install the helixultimate template and reproduced the problem
The modal has the good size due to the class jviewport-width80 that is defined in attachments_list.css and in templates/shaper_helixultimate/css/template.css (same value: width: 80vw;)
The problem comes from the iframe size that is somehow bad computed
The best solution I found (without using the 600px) is that one (line 466 of file attachments_component\site\tmpl\attachments\default.php)
'body' => "<iframe src=\"$update_url\" scrolling=\"yes\" loading=\"lazy\" style=\"width: 100%; height: 60vh; resize: both; overflow: auto;\"></iframe>",
If it works for you @secarica I propose @parapente to deploy it for all iframe calls inside modals for our codes

[secarica]

@JLTRY Yes, it works fine for my use case, meaning including on two web sites with totally different templates than Helix Ultimate (and where the problem occurred before).

More than that, for testing purpose I replaced also the old method used for Add attachment on line 2031 in /components/com_attachments/src/Helper/AttachmentsHelper.php with this version (line becomes the same, except for src value and the closing iframe tag that can be put on same line) and it also works fine, with the added bonus that the system debug bar – if enabled – is now somehow floating in relative position instead of absolute position.

So, thank you :)