#328 – Resize to be the same as browser selected image

 The only thing I can think of here is to create media queries in the temaplate.css to match the breakpoints I set in econa image

In /plugins/content/econa/tmpl/list.php there is a small amount of code that handles the display of image intros

<?php
/**
 * @author      Lefteris Kavadas
 * @copyright   Copyright (c) 2016 - 2018 Lefteris Kavadas / firecoders.com
 * @license     GNU General Public License version 3 or later
 */
defined('_JEXEC') or die; ?>

<?php if ($this->params->get('list_image', 1) && $image->src): ?>
<div class="econaListImageBlock">

  <div class="econaImage">
    <a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($article->slug, $article->catid, $article->language)); ?>" itemprop="url">
      <img src="/<?php echo $image->src; ?>" alt="<?php echo htmlspecialchars($alt, ENT_QUOTES, 'UTF-8'); ?>" <?php if($image->srcset): ?> srcset="/<?php /echo /$image->srcset; /?>" <?php endif; ?> <?php if($image->srcset): ?> sizes="<?php echo $image->sizes; ?>" <?php endif; ?> />
    </a>
  </div>

  <?php if ($this->params->get('list_caption', 0) && $caption): ?>
  <span class="econaImageCaption"><?php echo $caption; ?></span>
  <?php endif; ?>

  <?php if ($this->params->get('list_credits', 0) && $credits): ?>
  <span class="econaImageCredits"><?php echo $credits; ?></span>
  <?php endif; ?>

</div>
<?php endif; ?>

You use

<?php if($image->srcset): ?> srcset="/<?php /echo /$image->srcset; /?>" <?php endif; ?> <?php if($image->srcset): ?> sizes="<?php echo $image->sizes; ?>" <?php endif; ?>

to create the list of srcset images sizes available and what I was wondering, is there was a way to set the size of the container div

<div class="econaImage" style="width:>

in the same way.

Right now the way I am handling this is through media queries, but it would be nice if this was set as a function of choosing the sizes in the interface. Frankly I can't think of a way this can be done other than media queries because we are providing a list of sizes that the browser can choose from. How would we know that in advance?

Between MY ISP dropping signal and session timeouts I got the extensive edits to the above post scrapped. I will not repeat them, I am out of time for this task.

I will just post the images I had added before without comment.

This is what I want the page to look like.


Without media queries and viewing it on a smaller screen this is what it looks like. I plan to add the media queries, but I wanted you to see why I wanted those sizes added to the container div.

Hi,

This has to do with your template, not Econa. Here is a simple CSS code you need to add to your site:

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

This will make all your site images responsive.
Let me know if that solves your issue.

Regards

Yes I already did that for some breakpoints, but not for others,

.content .items-row div[itemprop="blogPost"] .econaArticleImageBlock {
    float: left;
    margin-right: 1.0rem;
    width: 460px;
}
.content .items-row .econaImage img {
    width: auto;
}

And then sizes are as follows

sizes="(max-width: 320px)280px,(max-width:480px)460px,(max-width:768px)740px,(max-width:980px)320px,(max-width:1200px)400px,(max-width:1366px)360px,(max-width:1680px)400px,(min-width: 1681px)460px, 460px"

I set a media query break-point for .econaArticleImageBlock for each of the sizes listed and this give me a nice display, and when the .content goes full width, then .econaArticleImageBlock {width: 100%;} as well.

This still isn't optimal. I need to completely rewrite both the Protostar and Cassiopeia templates in a much more structure way to take full advantage of CSS Grids, but that is a big project and I will have to finish this before diving into that.

This will work for now.

What I was looking for was something like

<div class="econaImage" style="width:<?php if($image->srcset): ?> size="<?php echo $image->browser-selected-size; ?>" <?php endif; ?>>;

in list.php

I realize this is not possible, so the media query break points will work fine in conjunction with the sizes field that populates srcset="" image attribute. JavaScript could accomplish this after page load, but that is getting kind of hacky.

This is a great plugin Lefteris and something that Joomla really should have provided out of the box, fortunately you hare here to provide this.

Actually I am sorry for the post Lefteris, I wrote before I had collected my thoughts so I wasn't at all clear what it was I was asking for. Hope this explanation helps.

Here is what the categories page looks like at 768px width:


Here is what the categories page looks like at 1200px width:


Like I said, this will work for now.

Also like I said, great plugin Lefteris.

That php should have been:

<div class="econaImage" style="<?php if($image->srcset); ?>width: <?php echo $image->browser-selected-size; ?>" <?php endif; ?>>;

But I can't know what size the browser will choose in advance.

Just want to make sure that things are clear. The sizes attribute has nothing to do with the display of the image. The display of the image is controlled by your site's CSS. What sizes attribute does is inform the browser about how much space the image is going to take so the browser knows which one of the available images it should load. There is no point on changing this with javascript. The point is to let browser know the display dimensions of the image before it downloads it. This way the browser can load the smaller image for mobile devices.
This also means that you could provide a more generic sizes attribute instead of defining all the available variations. For example:

sizes="(min-width: 768px) 460px, 100vw"

The above code tells the browser that for screens larger than 768px the image is supposed to displayed at 460 pixels. For other screens the image is supposed to take the 100% of the viewport width. Depending on this information the browser will load the most appropriate image of those defined in the scrset attribute.

I hope it's more clear now. Please let me know if you have more questions.

Regards

Yes, I understand that.

I am sorry, I referenced the wrong class.

I meant, I wish the following could be done:

<div class="econaListImageBlock" <?php if($image->srcset); ?>style="width: <?php echo $image->browser-selected-size; ?>" <?php endif; ?>>;

What I am doing now is setting "width:" in <div class="econaListImageBlock"> to the values I want for particular screen sizes via @media rules and then I set .econaImage > img {width: 100%} like you originally suggested I do for all images via the template img tag CSS.

The reason I am asking this, is that I want everything to be automatic for the people that actually end up putting content on this site. I also wanted to make it so that anyone else working on the site only needs to change the breakpoints and image sizes in "Sizes" in the "Econa" "Custom Fields" user interface and everything else will get adjusted automatically.

I don't think this can be done in PHP as we have no absolute way of knowing what the browser will choose from the "srcset=" list at run time; we can have a good idea, but no absolute certainty.

I am thinking you are a genius and can pull a rabbit out of your hat which is why I am asking the question.

Having said all this, everything is working quite nicely as it is, I just want frosting on my cake. The people who do actual editing or maintain the site get nervous whenever they see code and need a graphical interface for everything.

All you need to do is define the sizes attribute once at the "Sizes attribute" option that Econa custom field provides. Then everything else is done automatically for you. You only need to:

1. Define the actual image sizes that you are going to use. This is a matter of strategy and has to do with your site design. If for example the main image on your desktop design is 900 pixels wide you need to add such a size at the "Image sizes" options of the field. This option defines the actual size of the resized image. No CSS or width attributes. It's like resizing an image on Photoshop.
2. Use the "Sizes attribute" option of Econa custom field to tell the browser how it should handle this image on various viewports.

This is really a bit complicated but this is how the srcset and sizes attributes work. You can always go the simple way and ignore the sizes attribute completely. It is set by default at 100vw.

Regards

Right, I understand that. The srcset attribute only selects what quality of image will be uploaded to the browser, has nothing to do with how that image is ultimately displayed, that would depend on CSS. On mobile this is very important because loading a large image on mobile would make the page load time prohibitively long. This is why we only want to deliver the minimum acceptable image quality on a per view-port size basis. I think this is the whole point of this plugin.

I also understand that I only need to define the sizes once. Now that I have .econaImage > img {width: 100%;), perhaps this is a moot point, because regardless what images sizes they choose it will always fill the .econaListImageBlock container. What I was wanting to happen is that the .econaListImageBlock {width:xxx} change when the Sizes attribute changes in Display Options in Content Custom Fields.

But really, I don't want to belabor this point any more. Your plugin is brilliant as is, and if others that come after me want to change the layout of the images on the site, well, then they will just have to read your documentation.

On mobile and tablet I have the images cleared so that they sit on top of the text, on anything larger than tablet such as tablet landscape or notebook and larger, the images are floated left. The .econaListImageBlock container determines how much screen real-estate each image will occupy.

Really I want to rewrite this using CSS Grids and CSS Flex, where the browser will make the decision of how much screen real estate these images will occupy. That way using your plugin, the browser will choose not only what image quality to display but also what size the container should be that displays that image based on the grid layout when fractional units are used for defining the size of grid container element.

Well I wrote a detail of how CSS Grids would work, but the session timed out. I don't know how you have your session timer set up, but I had just decided to edit the post thinking the session timer would be reset when I chose to edit, and I just finished writing and went to post, when I got the 403 access denied. Usually I will select and copy the text before posting, just in case the session has timed out, but this time I was typing for such a short time I didn't see the need, and then about 10 minutes of thoughtful comment was lost.

Don't have time to re-write, it had to do with grid-template-columns, grid-template-rows, grid-area, .row-fluid and .econaListImageBlock.

Session time is set to 30 minutes. I will increase it. I thought that the ticket system we are using is renewing the session before it expires.

Thanks. I did the following for the Protostar Template. Looks like it will work. Someone from JoomlaTools cautioned me that by doing this I might introduce incompatibilities. I accept that risk and will deal with incompatibilities as they arise. I will do something similar for the new Cassiopeia template. I am reading another tutorial on CSS Grids that explores some of the more esoteric features of the specification. Notice I got rid of all those 10 digit precision widths and margins needed for Bootstrap.

.row-fluid {
	display: grid;
	grid: auto auto / repeat(12, 1fr);
	grid-gap: 20px;
	*zoom: 1;
}
.row-fluid [class*="span"] {
	display: block;
	min-height: 28px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.row-fluid .span12 {
	grid-column: span 12;
}
.row-fluid .span11 {
	grid-column: span 11;
}
.row-fluid .span10 {
	grid-column: span 10;
}
.row-fluid .span9 {
	grid-column: span 9;
}
.row-fluid .span8 {
	grid-column: span 8;
}
.row-fluid .span7 {
	grid-column: span 7;
}
.row-fluid .span6 {
	grid-column: span 6;
}
.row-fluid .span5 {
	grid-column: span 5;
}
.row-fluid .span4 {
	grid-column: span 4;
}
.row-fluid .span3 {
	grid-column: span 3;
}
.row-fluid .span2 {
	grid-column: span 2;
}
.row-fluid .span1 {
	grid-column: span 1;
}
.row-fluid .offset12 {
	grid-area: 1 / 11 / 3 / 13;
}
.row-fluid .offset11 {
	grid-area: 1 / 10 / 3 / 13;
}
.row-fluid .offset10 {
	grid-area: 1 / 9 / 3 / 13;
}
.row-fluid .offset9 {
	grid-area: 1 / 8 / 3 / 13;
}
.row-fluid .offset8 {
	grid-area: 1 / 7 / 3 / 13;
}
.row-fluid .offset7 {
	grid-area: 1 / 6 / 3 / 13;
}
.row-fluid .offset6 {
	grid-area: 1 / 5 / 3 / 13;
}
.row-fluid .offset5 {
	grid-area: 1 / 4 / 3 / 13;
}
.row-fluid .offset4 {
	grid-area: 1 / 3 / 3 / 13;
}
.row-fluid .offset3 {
	grid-area: 1 / 2 / 3 / 13;
}
.row-fluid .offset2 {
	grid-area: 1 / 1 / 3 / 13;
}
.row-fluid .offset1 {
	grid-area: 1 / 0 / 3 / 13;
}

Here are some breakpoints I thought relevant to the internet device landscape today. What do you think? Do these appear usable?

$wearables "{min-width: 270px)"
$phones "{min-width: 360px)"
$tablets-portrait "{min-width: 600px)"
$tablets-landscape-pro-portrait "{min-width: 960px)"
$tab-pro-landscape-old-laptop "{min-width: 1300px)"
$HD-screens "{min-width: 1680px)"
$QHD-screens "{min-width: 2300px)"
$4K-5K-UHD-screens "{min-width: 3000px)"

// universal styles

@media #{$wearables} {
	…
}

@media #{$phones} {
	…
}

@media #{$tablet-portrait} {
	…
}

@media #{$tablet-landscape-pro-portrait} {
	…
}

@media #{$tab-pro-landscape-old-laptop} {
	…
}

@media #{$HD-screens} {
	…
}

@media #{$QHD-screens} {
	…
}

@media #{$4K-5K-UHD-screens} {
	…
}

I realized that I made a mistake with the offsets, they should be on more that the spans. In other words, .row-fluid.offset5 {1 / 6 / 3 / 13} corresponds to .row-fluid .span5 {grid-column: span 5;}. The shorthand method of declaring these properties require adding one to the column number, such that to reference columns 5 and 12, it is necessary to declare those to be 6 and 13.

Oh yes, I had to add a grid-row: span 2; to each of the spans. I will have three rows, because there is the left column, main content, and right column, and when it is viewed on mobile these need to stack, so I will change the grid-area: k / l / m / n; and the grid-row span m-1; attributes to make that happen.

I am not a front-end expert so I cannot tell. Most of the times, and depending on the project I use a CSS framework for grid.
In terms of technology, I do like CSS grid, it will replace flex and floats in a couple of years.

Regards

I find CSS Grids so compelling that I will be replacing the frameworks with CSS Grids in the present. Like I said, optimizing the layout for different devices is just a matter of twiddling with numbers like grid-area: 1 / 9 / 7 / 13; on desktop, to grid-area: 5 / 1 / 7 / 13; for the iPhone stacking the columns in rows in a single column the full width of the device on top of each other, in any order that seems appropriate for that particular device. The browser takes care of making sure everything is sized correctly. No need for margin-left: 256.0128987693487453px; or some other absurdity.

I just want to take this opportunity to say thanks again for a superb plugin, CSS Grid does not obviate the need to econa, because we still need to send the image with the smallest number of bytes possible, while preserving the maximum image quality, to the browser which will display it on screen at the appropriate size, because we want all of our pages to load lightning fast, and econa accomplishes this for us.

I am really glad that you like this extension. I am thinking of adding lazyload functionality. What do you think?
Since you like the extension it would be great if you post a quick review at the Joomla extensions directory.
Thank you for the great feedback you provided.

Regards

OK, gave you a stellar review.

I think lazyload is important because page load times are critical for Google page rank and if there are a lot of images on the page, then those page load times could cause page rank to suffer if lazyload isn't employed.

I think that people expect things to happen instantly on their mobile devices and if it takes time for a page to load, they quickly moved on to something else, kind of like global ADHD. If they get something to look at, even if the images aren't yet rendered, they will more likely wait for the images as they can see something is happening.

So yes, go for it.

Nice to hear that. We will mark this as a new feature for future release.
Thank you for your feedback once again.

Regards

I will look forward to the release.