Forum Discussion

Kev_B's avatar
Kev_B
Advisor
9 years ago

Editing image dimensions within a component

Firstly, I apologise if this is a very basic question, I'm quite new to Studio!

 

I'm trying to fix an image resolution issue that has sprouted up on our community's blog. For some reason, the image files that are being pulled into the blog list are being resized to 200 x 200 (despite being uploaded at 500 x 300), the container for the image is wider, therefore these images are then enlarged and become pixelated. Example of the URL is community.com/image/image-id/dimensions/200x200.

 

Looking at the layout of the components, we're using a Custom Component for the blog list, which in turn is using Freemarker to include 2 .ftl files, common_utils.ftl and blog_list_utils.ftl - my question is, where can I find the files that the component is referencing? I believe they will point where I can reconfigure the image dimensions being applied when the image is pulled from the server. I'm 99.9% certain this is a CMS function rather than something in the CSS, due to the URL.

 

Secondary question, if the 2 utils files don't contain a way to resize, then is it possible that a core component is setting these dimensions? If so, how can I go about editing, or even creating a new component to specifically overwrite the image dimension settings.

 

Any help appreciated :smileyhappy: I'm quite au fait with HTML / CSS but Studio and CMS systems in general are quite new, so go easy on me!

  • Hi Kev_B

     

    have you tried looking in the Endpoints tab of your Studio page? There are two sub-sections in there (Endpoints and Macros), it is likely that the code you are referencing to is defined in the macro section. This is a common place for general utilities and libraries to be saved.

     

    Components can include macros from there in the way you have described.

     

    If the image is being pulled in a custom component, then it is highly likely that the image is being pulled via one of our REST APIs. The API normally allow to fetch the image in different sizes so you should be able to adjust it to the desired outcome. Read more about our APIs here

     

    I hope it helps!

2 Replies

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    9 years ago

    Hi Kev_B

     

    have you tried looking in the Endpoints tab of your Studio page? There are two sub-sections in there (Endpoints and Macros), it is likely that the code you are referencing to is defined in the macro section. This is a common place for general utilities and libraries to be saved.

     

    Components can include macros from there in the way you have described.

     

    If the image is being pulled in a custom component, then it is highly likely that the image is being pulled via one of our REST APIs. The API normally allow to fetch the image in different sizes so you should be able to adjust it to the desired outcome. Read more about our APIs here

     

    I hope it helps!

  • Kev_B's avatar
    Kev_B
    Advisor
    9 years ago

    Hey PaoloT,

     

    Indeed it was an Endpoint and the issue is now resolved. Thank you so much for your help, I've spent far longer than I care to admit scratching my head over this!

     

    Kev