#221 – Small IMage for Article Intro, Large for Full Article

 I have Content - Econa and Content - Econa Article Images enabled.

Under the "Plugin" tab for Content - Econa, I have responsive Article view options -> Images and Article list views -> Images set as well as "Size attributes" set for both.


Under the "Content images" tab for Content - Econa, Resize content images is set to "Responsive images method," Convert to JPEG is set to yes, Simple Method options -> Maximum width is set to 560, Quality 80, Responsive images method options - > Image sizes is set from XX-Small to X-Large, Default size attributes is set to: (max-wwidth: 320px) 160px,(max-width: 480px) 240px,(max-width: 768px) 320px,(max-width:1024px) 400px,(max-width: 1280px) 480px,(min-width: 1440px) 560px

Under "Plugin" -> "Content - Econa Article Images" I have Resize Images -> Yes, Convert to JPEG format -> Yes, Intro image width -> 240, Intro Image Quality -> 80, Full image width -> 560, Full image quality -> 80.

However when I view an article on the front end, neither the Intro image nor the Full image has any width or height attribute set.

What am I doing wrong??

Hi,

Econa integrates with Joomla in several ways. You may not need all of the integrations for your site.

The "Content - Econa" plugin adds an image tab in the article form. This plugin was created before Joomla introduced the custom fields.

Now the recommended way of using Econa is through custom fields. You can create as many custom fields you want, add as many sizes for each of them and select the views that each field will be displayed.

The "Content - Econa Article Images" adds the Econa image editor to the default Joomla intro and full images in case you want to use them.

In order to see the resized images, you have to save the articles. Resizing is performed in backend to make sure it will not break your site.

Finally, keep in mind that Econa creates several image sizes and is serving automatically the most appropriate image size to your site visitors depending on their device. Intro and full images are an exception to this. It's just one size per image.

In case your site is responsive, you may not see any difference since the images will get the available space they have. However, the source image is resized, which means that the user gets the image size that fits best for his screen.

This was an overview of the extension. If you want to learn more you can always check the documentation at https://www.firecoders.com/documentation/econa .

If you need more help with your site, please create a new private ticket with administrator credentials so I can have a look.

Regards

So I should use Joomla Custom fields and chose the Econa field type. If I create a Field Group called, say "Econa Images" and then create a field called "Small Image" and configure that for the image sizes for different breakpoints I should then be able to access the "Econa Images" tab in the editor and then select "Small Image" from the drop-down, and I should be able to select or upload an image and all the qualities will be created for that image so that it displays optimally on all devices.

But I am a little confused, because there are no "Sizes attribute" text boxes for Econa custom fields except for "Display Options for Login View," "Display Options for Profile View," "Display Options for Registration View," "Display Options for Remind View," and "Display Options for Reset View." While these are all useful for user profile applications, I don't see where I can set the "Sizes attribute" for images that would be added to articles.

Also you are saying that if I use custom fields, then I should disable the Content - Econa plugin, but leave the Content - Econa Article Images plugin enabled and use it to set the size of the Article Intro and Full Article banner images and then use CSS to adjust for the most popular viewport sizes. For article images I should use custom fields.

I need just a little bit more to help me out of the shadows here.

This is how I handled sizing Intro Images and Full Text Images

.items-leading .item-image {
	width: calc(12vw + 80px);
}
.item-page .item-image {
	width: calc(18vw + 200px);
}

Gives me a size I am comfortable with regardless of view-port size.

It's normal to get confused when you have many options. Let's try to make things more clear.

First, the display of the images is something that has to do with your template's CSS. Most templates are responsive and make the images get all the available space they have in their container. Econa has nothing to do with this.

What Econa does (among many things) is resize the images you upload. This means that the actual image size is changed resulting to faster loading time for the page.

In addition to this, if you set more than one image size, Econa will make the image "adaptive" by using the HTML5 srcset attribute. You can learn more about this at https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images .
In short, this tells the browser that instead of a single image file, we have multiple variations of the same image available. The srcset attribute includes also information about each image variation so the browser knows the actual image size of each variation. Now, the browser will pick the most appropriate one depending on the visitor's device viewport.
But how is the browser supposed to know which one variation should choose? This is where the sizes attribute comes in. Actually the sizes attribute informs the browser about the available space the image will fill under several breakpoints. Now the browser has all it needs to choose the right image size.
For example, let's assume that browser has two image variations to choose. One of 300 pixels width and a second one of 600 pixels width. It the sizes attribute requires a 300 pixels wide image, the browser will choose the first variation. If the device has a retina display, browser will choose the second variation.

Regarding the Joomla integration, if you created a custom field make sure that you created a custom field for Articles. There you have complete control of which image size to load for each view.

If you prefer to use the intro and full images, that's fine also. You are only missing the "adaptive" images feature. Plus you have the bonus that if you uninstall Econa at the future your images will keep working as before.

I hope things are more clear now. If still have questions please let me know. Or if you need help with your site's CSS.

Regards

Thanks, I read the entire W3C documentation on srcset and sizes attributes for the <img /> tag. So I understand how this works.

I also understand that the CSS controls how the images actually get displayed and that your plugin resizes the images on upload to conform with the images sizes I set in Images sizes -> Configure.

This means that the browsers is just deciding what image size to load and then the template CSS determines how to display that image that the browser decides to load.

As far as the Intro and Full Article images, I will just use the CSS method I referred to above for resizing the images using the calc(); function. If there is a better way of adding Intro and Full Article images using your plugins, I would like to know.

I was creating custom fields under "User" instead of under "Content." That is why I was confused. I now see the difference and will exploit both. I now see that I can create display Options for Archive View, Article View, Category View, and Featured View. Yes this is preferable because I can set size attributes for each.

There for sure better ways than using calc. However, this depends on your site and it's design. If you provide a link to your site and tell me what exactly you are trying to achieve I would be more than happy to help you.

In case you don't want to share the site in public, just create a new private ticket.

Regards

I currently have the site off line and it is currently just the default Protostar template, with a couple small changes I made to CSS.

What I want to do is take full advantage of flexbox methods and let the browser make most of the display decisions.

I also wanted to experiment with rem, vh, vw, vmin and vmax.

I would gladly provide you with login credentials if you want to take a look.

Since I am just beginning to develop this site, what method of element sizing would you recommend?

I wanted to get comfortable with your plugin before I committed myself to any design method.

OK, I will create a new private ticket, same name.

The sizing method depends on your needs. If you want to save some time you can try a third-party template. There are many decent Joomla template providers out there. Hint: I would choose a simple one, without a page builder extension.

I have a specific design in mind and I don't think off the shelf templates will get me there..

Besides off the shelf template are one size fits all affairs and there is so much unnecessary duplication of CSS styles to handle light/dark, red/green/blue/violet/orange schemes that I really want to avoid that. I used Maximenu in the past, but I want to avoid that as well. I just want to add the JDocs:: elements necessary to generate the just the HTML necessary to produce the look of the website and just the minimum CSS to achieve the desired display of the HTML.

You can see a mock-up of the site here: http://webdev.911truthoutreach.org/images/temp/lc-remake-mockup.jpg

I cant create an account for you unless you can provide me an email address.

How is Fotis and Krikor, do you still talk to them?

Building the template on your own is always a better option but it requires skills and time. That's why I suggested a template.

The guys at Joomlaworks are fine as far as I know. We do not talk as much as we used to when I was part of the team, but we do talk and I know they are fine.

Both of them are good guys and excellent professionals.

Understood. I am going to take your suggestion and purchase a template that is at least similar to what I am looking for and then modify it to look like my mock-up. That is because I am really short on time. After September 1, when I want this to go live, I will then work on a custom solution to takes advantage of display:flex and all hte properties that go with this.

I also want to set up the default text as follows, even though Chrome still isn't up to speed with this:

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
text-align: justify;
-webkit-text-justify: inter-character;
text-justify: inter-character;
word-wrap: break-word;
overflow-wrap: break-word;

This produces the cleanest text I have ever seen.

I don't even think there is a need for @media queries any more, because the browsers know how to display elements within a container really well now. Using your plugin to serve up the actual sizes that the browsers would likely assign to a particular view-port size I think will be really optimal.

I use CSS like:

.flex-container {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

And

.large-item {
    max-width: 240px;
    flex-basis: 240px;
}
.flex-item {
    align-self: flex-start;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    flex-basis: 0%;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: 14px;
    line-height: 16px;
    margin: 0.5em 0.25em;
    order: 0;
    overflow-wrap: break-word;
    text-align: justify;
    text-justify: inter-character;
    word-wrap: break-word;
}

See https://www.911tap.org/557-news-releases/736-lawyers-file-doj-petition-demanding-9-11-grand-jury-investigation to see how this works in practice. scroll toward the bottom of the page and look at how the bios are displayed. Reduce the size of your browser window and see how the elements arrange themselves as the view-port becomes smaller.

Oh yes, look at this in Firefox, because Chrome doesn't support all of this yet. The great Google falling down on the job.

I want to build the entire site to take advantage of this. Reduces the need for JavaScript, since the browser knows how to handle this natively. It also makes @media queries and bootstrap unnecessary because the browser arranges the page pretty nicely. I know I can't get away from Bootstrap entirely on a Joomla website because so many components and plugins rely on it, but I can reduce my own reliance on it.

I am also a fan of Flexbox. And since you like to work with modern CSS you might want to take a look at CSS grid.

In any case, CSS has evolved and there are indeed many ways to build a layout. It all depends on your taste and the browser support.

If you have any questions or need help regarding your project, please let me know.

Regards

Yes I agree. Looks like I am stuck with building this custom layout, as the client will not accept anything less than the mock-up I presented them. I showed them a really mice legal template and they wouldn't go for it, even for just the short term until I got the custom template finished.

I have a week to get the Home Page functional and looking like the mock-up.

And thanks for the heads up on the CSS Grid. I am sure that Mozilla supports this, the question is does the all mighty Google support it. I checked, as of 14, March 2017 Chrome and Safari as of 27, March 2017 support it, though Firefox additionally provides a grid inspector in their development tools. I wish I could get everyone to support Mozilla and dump Google. Microsoft, like usual, does things their own way, and we will have to make exceptions for IE.

Coding the fall backs, for older browsers, is always the difficult part.