Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Max width or max height for images #19

Open
ghost opened this issue Apr 6, 2017 · 6 comments
Open

Max width or max height for images #19

ghost opened this issue Apr 6, 2017 · 6 comments

Comments

@ghost
Copy link

ghost commented Apr 6, 2017

Hello,

I need to resize image that way :

  • It should never have a width more than 180px
  • It should never have a height more than 100px
  • Is should keep aspect ratio and not crop

I tested all provided modes but can't find a way to do that. I exclude "exact" and "crop" mode because of the third point, so there is "auto", "portrait" and "landscape"

The problem with landscape/portrait mode is that they resize picture just by looking the width/height value. So I can have picture of 2000x100px or 180x2000px.

I don't find any mode that can do what I need, could you please point me the right direction if a solution actually exist ?

here is my code :

image.jpg|media|resize(180, 100, { mode: '???' })
@matt-pawley
Copy link
Owner

Hey,

I would possibly use CSS to solve this, something along the lines of:

.image {
    height: 100px;
    width: 180px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
<div class="image" style="background-image: url('{{ 'image.jpg' | media | resize(180, false, { mode: 'auto' }) }}');"></div>

@ghost
Copy link
Author

ghost commented Apr 6, 2017

Hello,

Thank you for the answer.

Yes I have no problem to solve this using CSS.

The problem with CSS solution is that it load a bigger image and then, resize it. This is a bad practice that is penalized by tools like dareboost for example.

That's why I need a "pre-processing" solution. I think an additionnal mode to do that could be added to the plugin (will try to investigate, but I have no experience at all with git so I'm not sure to be able to make a pull request) as it's a quite common feature when you deal with something like logo list that can have very different formats and can't be cropped.

@vdomah
Copy link

vdomah commented Apr 19, 2017

Hi! Looking for exactly the same feature. Is there any progress in this question? I can make a contribution in coding the solution if there is no progress yet.

@matt-pawley
Copy link
Owner

@vdomah - Sorry, no progress from my end. I'm just in the process of moving house and without internet for a while so unlikely to be progressed any time soon. Feel free to submit a PR if you have the time.

@yapsr
Copy link
Contributor

yapsr commented Jul 11, 2018

+1
This probably needs an update of the Resizer.php file of the octobercms/library.
I have created a pull request in that project: octobercms/library#334

@matteotrubini
Copy link
Collaborator

This plugin is being migrated to core (see #55), so we are trying to figure out what issues are still relevant to invite to reopen them in core.

Issues that will remain inactive in next 30 days will be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants