Hi,
Does anyone know how I can get full image paths, not related to the root?. I don’t host cockpit on the same server as my front-end. This is one of my biggest headaches right now. Also would be nice to see some examples of stuff like srcset. Image handling seems pretty complicated in general, would be great to just have different image sizes in the json output.
I created a litte helper class for this:
so you can do like so:
@php
$news = CockpitHelper::getCollectionEntries('News', "[published]=1", 3);
@endphp
@foreach($news as $i => $ne)
<img src="{{CockpitHelper::getFullAssetPath($ne['image']['path'])}}">
@endforeach
(note that this @foreach and {{ and }} is blade stuff…)
I am also interested in this issue, but would like to set this without additional helpers, rather in core. I have my site and Cockpit on different server as well.
note that having cockpit and the webpage/app on different servers may result in the clients browser showing cross-site warnings as long as your app does not fetch the image as base64 and then prints it its self.
Besides: you already got the solution within another thread? Whats wrong with the solutions you were presented?
Hey @imigas, one of the biggest advantages of cockpit is to be so small and fast, there are plenty of features that we all like to have… believe with time they will be there, we need more people involved and extending the missing features with addons, so everyone can install them as per needs, as any other opensource project we are all contributors.
I got an answer how to deal with thumbnails and their urls inside api response, thanks to pauloamgomes’s add-on, and it works. The question in this topic is how to change relative paths of (generic) images/assets to absolute. Of course I can inject my cockpit host in my webpage in front of each url, but i would prefer to have it done on backend side. Thought maybe there is some kind of parameter I can use in JSON options to make it happen.
@pauloamgomes, I understand it. I find Cockpit small, fast (like you said) and very useful for my projects, that’s why I would like to know it better. I did not mean to ask anybody about adding this or that feature, rather a hint where to look for so I could change it in my local Cockpit. Then I could get to know it better and maybe also contribute in the future.
If you could give me a hint which file is directly responsible for preparing the api response in this case I would be really glad and could make my own tests and small tweaks.
(@serjoscha87, to be precise, I have it all on the same server, but I use different subdomain for api request. Also I use Axios with React to fetch the data. Correct me if I wrong, but no matter what I do in this case, it will be a kind of external request - from client browser to my server and the cockpit api.)
Hey @imigas, understand your issue, I usually prefer to have the URL using react environment variables (e.g. .env.local, .env.production) as it provides better flexibility and can have different staging environments.
However, if you still need to have it in the output, for the api requests (https://getcockpit.com/documentation/api/cockpit) you can pass the parameter d=true
/api/cockpit/image?token=xxxxxxxxxxx&w=800&src=storage/image.jpg&d=true
you also need to set the site_url in the config/config.yaml
site_url: http://your-cockpit-url
Please also note if using the ImageStyles addon you just need to set the option output domain in the image style configuration:
guess thats right, but you might set CORS header on the source (cockpit):
this allows you to omit cors browser warnings even if requests fetch resources from other servers. But if you want to do so you might have to struggle with enabling CORS for api requests (if this is not already implemented somehow). If not I am quite sure one could write an addon that enables CORS api calls
@serjoscha87, that will make sense only when using the /api/cockpit/image endpoint, but direct request to assets will not be handled by cockpit and instead are handled directly by the webserver, any CORS headers required to be set there.
Regarding the CORS sounds interesting to have, but don’t see a way to be done as an addon (its required to alter the response headers), maybe instead it should be in the cockpit core based on a configuration in the config.yaml like:
# Set cors settings
cors:
# Set CORS enabled or disabled.
enabled: false
# Specify allowed headers, e.g. 'x-allowed-header'.
allowedHeaders: ['x-csrf-token', 'authorization', 'content-type', 'accept', 'origin', 'x-requested-with']
# Specify allowed request methods, use ['*'] to allow all.
allowedMethods: ['POST', 'GET', 'OPTIONS']
# Configure requests allowed from specific origins, use ['*'] to allow all.
allowedOrigins: ['*']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: true
Unless there is another way that I’m not aware think above could be a good solution, what you think @artur ?
I think having a cors configuration possibilty would be beneficial regarding security concerns.
so, what we would need is a configuration definition (like you did provide) and adjust the following part in the code: https://github.com/agentejo/cockpit/blob/next/index.php#L22-L33