How to get different images sizes for multiple images?

Let’s say I have a collection, with image fields, galleries, repeaters with images etc. How can I in some straight forward way get different sizes of these? How can I do srcset? How do I resize and so on?

Have you tried using gatsbyjs most is out of the box

https://getcockpit.com/documentation/api/cockpit

-> /api/cockpit/image

<img src="/api/cockpit/image?token=xxtokenxx&src=path&w=200&h=200&o=true">

Thanks,

But seems Im doing something wrong?
Img:

src output:
http://example.com/cockpit/api/image?token=mytoken&src=/cockpit/storage/uploads/2018/07/17/5b4e2c4d0879cP1220061.JPG&w=200&h=200&o=true

Any idea?

I did not make any use of the image resize feature yet but I investiated the code for you and found out that the documentation is lacking again.

Use the api endpoint like this:

http://cockpit.local/api/cockpit/image?token=YOUR_TOKEN&src=http://cockpit.local/storage/uploads/2018/07/22/5b5462d3e131f10931400_833978596676894_7356783290903386938_n.png&w=200&h=200&o=1

So whats different here is:

  • don’t use &o=true but instead use &o=1
  • prepend the FQDN to the image path. In my case its “http://cockpit.local/” (and in yours its example.com). So src should look like &src=http://cockpit.local/storage/uplo... instead of &src=/storage/uplo...

FURTHER READING (if you are interested in “under the hood”):

this is the most recent image function within cockpit:

public function image() {

    $options = [
        'src' => $this->param('src', false),
        'mode' => $this->param('m', 'thumbnail'),
        'fp' => $this->param('fp', null),
        'width' => intval($this->param('w', null)),
        'height' => intval($this->param('h', null)),
        'quality' => intval($this->param('q', 100)),
        'rebuild' => intval($this->param('r', false)),
        'base64' => intval($this->param('b64', false)),
        'output' => intval($this->param('o', false))
    ];

    foreach ([
        'blur', 'brighten',
        'colorize', 'contrast',
        'darken', 'desaturate',
        'edge detect', 'emboss',
        'flip', 'invert', 'opacity', 'pixelate', 'sepia', 'sharpen', 'sketch'
    ] as $f) {
        if ($this->param($f)) $options[$f] = $this->param($f);
    }

    return $this->module('cockpit')->thumbnail($options);
}

So for example
d: (boolean) // include full domain path
from the official documentation can be ignored for it does not exist…

Also &r=1 how ever seems to cause problems every now and then. Looks like you better do not use that param.

Futher more the thumbnails generation uses these options which partially may be passed by the function posted above (image()):

'thumbnail' => function($options) {

    $options = array_merge(array(
        'cachefolder' => 'thumbs://',
        'src' => '',
        'mode' => 'thumbnail',
        'fp' => null,
        'filter' => '',
        'width' => false,
        'height' => false,
        'quality' => 100,
        'rebuild' => false,
        'base64' => false,
        'output' => false
    ), $options);
1 Like

hmm… so this:

http://example.com/cockpit/api/image?token=mytoken&src=http://example.com/cockpit/storage/uploads/2018/07/20/5b518c8609d9dthales.jpg&w=200&h=200&o=1

Still returns path not found=/

Any ideas?

is your cockpit installation up to the very date?

the way you are trying to resize the image works for me pretty well

if you are not able to find the mistake go for 'thumbnail' => function($options) { within https://github.com/agentejo/cockpit/blob/next/modules/Cockpit/bootstrap.php#L78 and add some exception handlers or some echos to the else branches which could help you find the mistake.

I did so and found out that the api call wont tell you if the path you are passing to the api point does not exist.

Note that the file has been updated by aheinze just a few hours ago - maybe he made some changes that cause my solution to not work anymore. Perhaps - I don’t actually know

Hi, got it working, I forgot to add cockpit/ after /api/.
But btw… I’m doing it this way, but then the api token shows in the actual src when inspecting, is that intended?

					<img 
						:src="`${cockpit.apiUrl}/cockpit/image?token=${cockpit.apiToken}&src=${baseUrl}${image.value.image.path}&w=1440&o=1`"
						alt=""
					>

Outputs:

<img src="http://example.com/cockpit/api/cockpit/image?token=MYTOKENISVISIBLEHERE&src=http://example.com/cockpit/storage/uploads/2018/07/20/5b518c8609d9dthales.jpg&w=200&h=200&o=1">

The API token can also be seen y the visitor when you fetch the data using XHR (which is the most common way I guess). At last its not recommended to fetch your data using PHP (as long as you are not also fetching that php file output via XHR) because this may slow down page loading times massively when the API server takes a longer time to answer your request.

All data that is accessable with the token should be data that even is completely insensitive for public view. Never use the admin account’s api token to fetch data. Always create a dedicated account with some one token in order to fetch data. This dedicated account should not have enough previlegs to modify, create or delete complete collections, regions or form (as long as you dont want him to explicit have this privs in a spcecial case)

Another way to prevent the visitor from seeing your api token within the image reference is to use a proxy PHP script that returns a native image stream (you are able to load a PHP file as image, when the header of the PHP script is set to some image type).