? ? Pending

User tests: Successful: 2 davidsteltz, twister65 Unsuccessful: 1 brianteeman

avatar twister65
twister65
23 Aug 2017

Pull Request for Issue # .

Summary of Changes

Random Image module.
If Responsive is enabled, the image is automatically resized to fit the position container.
responsive enabled
If Responsive is disabled (set to No), we have the previous behavior (without modification).
responsive disabled

Testing Instructions

Create a new Random Image module.
Set path to image folder (images/banners, for example).
Select Position (Banner, for example).
Enable/disable Responsive parameter.

Expected result

If set to yes, the image/picture is scaled to the window.
Otherwise, the image/picture is static (this depends on the width and height parameters)

Actual result

As expected.

Documentation Changes Required

avatar joomla-cms-bot joomla-cms-bot - change - 23 Aug 2017
Category Language & Strings Modules Front End
avatar twister65 twister65 - open - 23 Aug 2017
avatar twister65 twister65 - change - 23 Aug 2017
Status New Pending
avatar twister65 twister65 - change - 23 Aug 2017
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2017-08-23 14:28:51
Closed_By twister65
Labels Added: ? ?
avatar twister65 twister65 - close - 23 Aug 2017
avatar twister65 twister65 - change - 23 Aug 2017
Status Closed New
Closed_Date 2017-08-23 14:28:51
Closed_By twister65
avatar twister65 twister65 - change - 23 Aug 2017
Status New Pending
avatar twister65 twister65 - reopen - 23 Aug 2017
avatar twister65
twister65 - comment - 23 Aug 2017

Please,only take into consideration the last commit:
cd95648

avatar C-Lodder
C-Lodder - comment - 23 Aug 2017

I really don't see the need for this at all.

Bootstrap already applies the following styling to images:

max-width: 100%;
height: auto;

So if no values are defined for the width and height parameters, the image is already repsonsive.

Therefore why do we need to add a paremeter for it?

avatar brianteeman
brianteeman - comment - 23 Aug 2017

Agree with @C-Lodder

avatar ggppdk
ggppdk - comment - 23 Aug 2017

best is:
max-width: 'real_image_width' px;
max-height: 'real_image_height' px;

otherwise small images will get stretched and look ugly

avatar twister65
twister65 - comment - 23 Aug 2017

Responsive disabled result (with blank parameters, banner position) :
disabled result

Responsive enabled result (banner position) :
enabled result

avatar C-Lodder
C-Lodder - comment - 23 Aug 2017

IMO there really doesn't need to be a parameter. Just remove all the stupid code in the helper.php and use the necessary CSS.

Images should by default, be responsive unless stated otherwise.

avatar C-Lodder
C-Lodder - comment - 23 Aug 2017

helper.php

public static function getRandomImage(&$params, $images)
{
	$width   = $params->get('width') !== null ? $params->get('width') : '';
	$height  = $params->get('height') !== null ? $params->get('height') : '';

	$i      = count($images);
	$random = mt_rand(0, $i - 1);
	$image  = $images[$random];

	$image->width  = $width;
	$image->height = $height;
	$image->folder = str_replace('\\', '/', $image->folder);

	return $image;
}

CSS:

img {
   display: block;
   width: 100%;
   height: auto;
}

done

avatar brianteeman brianteeman - test_item - 23 Aug 2017 - Tested unsuccessfully
avatar brianteeman
brianteeman - comment - 23 Aug 2017

I have tested this item ? unsuccessfully on 059b53d


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

avatar brianteeman
brianteeman - comment - 23 Aug 2017

tested with protostar in position 8 and position 7

Responsive setting

screen shot 2017-08-23 at 21 56 12

Not reponnsive with no width set

screen shot 2017-08-23 at 21 56 14

Not responsive with width set

screen shot 2017-08-23 at 21 56 16


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

avatar C-Lodder
C-Lodder - comment - 23 Aug 2017

Cause you need to set the width, not just max-width

avatar twister65
twister65 - comment - 24 Aug 2017

@brianteeman , to test you need these commits :

  1. cd95648

  2. 059b53d

  3. f23cdc3

avatar Bakual
Bakual - comment - 24 Aug 2017

@twister65 We don't test single commits, we always test the complete PR.

avatar twister65
twister65 - comment - 24 Aug 2017

Okay, could you explain your testing instructions because I have not the same results.
Test with Protostar in position 7 and position 8.
Image Folder : images/banners

Responsive setting

responsive screenshot

Not responsive with no width test

capture du 2017-08-24 08-01-48

Not responsive with width test

width 150

avatar brianteeman
brianteeman - comment - 24 Aug 2017

I applied the PR
Cleared the caches
Then setup the module as described above

avatar twister65
twister65 - comment - 24 Aug 2017

Screenshots on my mobile device (phone).
Position : banner.
With responsive :
screenshot_2017-08-24-11-30-09
Without responsive (and no size) :
screenshot_2017-08-24-11-33-29

avatar twister65 twister65 - test_item - 24 Aug 2017 - Tested successfully
avatar twister65
twister65 - comment - 24 Aug 2017

I have tested this item successfully on 059b53d

Patch applied with the latest version of joomla-cms-staging and Pull ID #17688.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/17688.
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 24 Aug 2017

@twister65 testing own PR doesn't count cause its expected that a PR is tested by Dev.

avatar twister65 twister65 - change - 24 Aug 2017
The description was changed
avatar twister65 twister65 - edited - 24 Aug 2017
avatar davidsteltz davidsteltz - test_item - 25 Aug 2017 - Tested successfully
avatar davidsteltz
davidsteltz - comment - 25 Aug 2017

I have tested this item successfully on 059b53d

Without responsive:
Without
With responsive:
with

I agree with others that this should be default behavior rather than a parameter.


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

avatar twister65
twister65 - comment - 25 Aug 2017

It may be useful to choose, when you want to display random images as thumbnails (with link).

avatar davidsteltz
davidsteltz - comment - 25 Aug 2017

True, perhaps the toggle should be Full Width vs. Thumbnail instead of Responsive vs. Static?

avatar twister65
twister65 - comment - 25 Aug 2017

The size is adjusted according to your device (responsive), or not (static).

avatar dgt41
dgt41 - comment - 25 Aug 2017

Please don't add more options. The easiest way to achieve this or anything similar is:

  • Create a layout override
  • add whatever classes or logic in there
  • select between the default or the override you just created
avatar C-Lodder
C-Lodder - comment - 25 Aug 2017

No need for view overrides at all.

Can be done completely just using the current parameters and a CSS/PHP tweak

avatar matrikular
matrikular - comment - 31 Aug 2017

Disregarding any successful tests, this is just wrong. The code, the method, even the referenced discussion is almost three and a half years old.

avatar C-Lodder
C-Lodder - comment - 31 Aug 2017

@matrikular - so explain what you'd do then

avatar dgt41
dgt41 - comment - 31 Aug 2017

I agree with @matrikular here. The discussion should be on images srcset if we are talking about responsive, adaptive whatever you wanna call it

avatar C-Lodder
C-Lodder - comment - 31 Aug 2017

@dgt41 - That would require the media manager to generate separate image files when uploading. But doesn't solve the actual issue here

If your largest image of the srcset is 1200px, you're using a fluid container, and your viewport is 1920px, it won't be 100$ width unless specified in the CSS

avatar matrikular
matrikular - comment - 1 Sep 2017

@C-Lodder I'm not sure what you're asking for exactly. You yourself gave some valid answers / examples to that question.

<bla>
There are many different techniques, approaches and caveats to the topic of responsible and / or adaptive images that need to be thoroughly thought through and addressed for the whole site and not seldom, treated differently for different parts and / or content types within a site.

I believe that we can all agree on the fact that changing some inline style attributes for "one" image in "one" module does not accomplish much. The rendered markup, whereever it comes from (CMS / Framework), should be as generic as possible, allowing the site owner / template developer to implement any solution he / she sees fit.

Since the early days, we make use of class suffixes to customise the output and while we added more and more parameters over the years to allow non-developers to change the look and / or behavior of say modules, there is just so much of what can be accomplished (as in limitation) with this approach.

Personally, I'm questioning the module and its implementation. Be it the entry point, the helper or the output.
</bla>

TL/DR
As to the responsiveness; just make sure that width and height are added as an attribute instead of a style declaration. That way, if no container acts as a placeholder, the browser knows how much space the image will use, preventing any ominous flickering / jumping (not that I would have seen such behavior lately). In doing so, you allow "external" style declarations to "take over".

avatar C-Lodder
C-Lodder - comment - 1 Sep 2017

@matrikular All Im asking for is for this parameter to be removed and images be responsive by default unless specified by the width and height parameter.

By your initial comment, I assumed you may have had a different approach.

avatar franz-wohlkoenig franz-wohlkoenig - change - 27 Oct 2017
Status Pending Needs Review
avatar joomla-cms-bot joomla-cms-bot - change - 23 May 2018
Closed_Date 2018-05-23 11:51:46 2018-05-23 11:51:47
Closed_By Quy joomla-cms-bot
avatar joomla-cms-bot joomla-cms-bot - close - 23 May 2018
avatar Quy Quy - change - 23 May 2018
Status Needs Review Closed
Closed_Date 0000-00-00 00:00:00 2018-05-23 11:51:46
Closed_By Quy
avatar joomla-cms-bot
joomla-cms-bot - comment - 23 May 2018

Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/17688

avatar Quy
Quy - comment - 23 May 2018

Closing for reasons stated above.


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

Add a Comment

Login with GitHub to post a comment