Take a question?

[bdadev]

I have not seen anything so perfect for working with images responsive.

This exceeded my espectatvia. Very good.

Just do not quite understand how to call the images correctly, for I perceive that you call a name pattern image.jpg.

I have to have standards images?

In case if the site has pictures of 80px, 140px, 220px, 480px, 640px, 768px, 1024px among others, have to use also the definition in variable with all these tamnhos?

This:

RimgBreakpoint var = '-tiny 1x 80w, 80w retina-tiny-2x,-1x 140w tiny, tiny-retina-2x 140w, 220w small-1x,-2x 220w small-retinal, medium-1x 480w, 480w retina-medium-2x,-1x medium 640W, 640W retina-medium-2x,-1x regular 768w, 768w-regulate retinal 2x, -large 1x 1024w, 1024w-large-retinal 2x, 1x w-huge ';

That's what I understood, the base is the width of the image?

Thanks?

[joeyvandijk]

image.jpg is the base filename to discover easily on your webserver which file you let the page (JS) download.

So if you use

var RimgBreakpoint = '-tiny 320w 1x, -tiny-retina 320w 2x, -small 480w 1x, -small-retina 480w 2x,
-medium 600w 1x, -medium-retina 600w 2x, -regular 768w 1x, -regular-retina 768w 2x, 
-large 1024w 1x, -large-retina 1024w 2x, -huge w 1x';
...
<img data-src="image.jpg"/>

RIMG knows that it has to look for images that have the following structure: imageXXXXX.jpg where `XXXXXX`` is the filename-strategy you choose yourself. This means the following images needs to be on your webserver:

• image-tiny.jpg
• image-tiny-retina.jpg
• image-small.jpg
• image-small-retina.jpg
• image-medium.jpg
• image-medium-retina.jpg
• image-regular.jpg
• image-regular-retina.jpg
• image-large.jpg
• image-large-retina.jpg

but NO image.jpg exist! It is just a filename to use as the basis on which you will add the strings you define in the RimgBreakpoint as identifiers for your breakpoints.

To answer your question I have some remarks:

• I don't understand why you switch the position of the keywords like RimgBreakpoint var, so far I know that is not Javascript, right? ;)
• -large 1x 1024w as you define is not in the right order, please use the following setup filename-extension width devicePixelRatio like -large 1024w 1x
• your RimgBreakpoint is not valid. Have a look in your browsers console where you will find a Javascript error.

My advice would be to start easy and not test with a multitude of different definitions, while you cannot test what is going well or wrong. So follow my above explanation and start with just 2 breakpoints, open your browser and adjust the width of your browser screen to see the changes.

Did this help?

:)

[bdadev]

On the part of image.jpg I had understood that there was, so I understand.

My question is if the name of the original images must contain these names:

image-tiny.jpg image-tiny-retina.jpg image-small.jpg image-small-retina.jpg image-medium.jpg image-medium-retina.jpg image-regular.jpg image-regular-retina.jpg image-large.jpg image-large-retina.jpg

But I will follow your advice and try again, I think I did something wrong!

Thanks for now!

[joeyvandijk]

You can add whatever setup you wish behind the name you give in the data-src-attribute.

So I used -tiny, -small, etc.. but you do for example -s,-m,-l,-xl,-xxl like this

var RimgBreakpoint = '-s 320w 1x, -m 480w 1x, -l 600w 1x, -xl 768 1x, -xxl 1024 1x';
...
<img data-src="image.jpg"/>

which will try to find:

• image-s.jpg
• image-m.jpg
• image-l.jpg
• image-xl.jpg
• image-xxl.jpg

does that help? ;)

[bdadev]

OK, this help!

I'll have to generate the image using your nemo always end the attribute to use in var RimgBreakpoint.

Note: Only pair you entnda my doubt.

My system generates 3 ​​sizes of images with 320px, 640px and 800px, and with random names 5151ef5ef1515s1f.jpg type, then just generate so:

5151ef5ef1515s1f-s.jpg 5151ef5ef1515s1f-m.jpg 5151ef5ef1515s1f-l.jpg

And voila, everything is ok!

Thanks!

[joeyvandijk]

Yups ;) I will close this issue, but open it up when you get stuck!

[bdadev]

Perfect