I have been able to find no combination of alignment settings that caused a pass-through image of fixed height to crop to center as its container shrinks laterally. It’s always pegged to the left. It’s such an obviously desirable behavior option it really seems like it should be simple, but I’ve tried inserting the image as an inflow graphic item and as a child layer item, and no matter how I set things, the result is always the same. It’s like it should be a combination of left % settings and left margin settings, but you never have access to both at once.
An hour and a half spent on this this morning alone-any help would be appreciated.
Thanks, David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
It’s hard to imagine your particular construction-- which is needed to know how to solve your problem. In the absence of an example, here is an article and example file of how an inflow constructionist like myself solves that problem.
If you are simply putting an image in the flow of text content (with the insert cursor in an html box, insert a graphic item) then you must remember that image inherits the alignment of the text flow it finds itself in. You may see no text, but trust me as Freeway wraps images in at least paragraph tags (heading tags depending where you put your image). Centering that apparently empty line of text centers the image as well.
I’ve also covered centering inflow containers as well, as they do not behave the same way as images do.
Hope it works out for you.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Thanks for the response. Centering the image is not a problem as long as the container is as large/larger than the image. What I want is, at a certain screen size, for the image size to be static and remain centered as the container gets narrower, cropping from both sides in order to keep the important part of the image visible. I just put up a page that doesn’t work properly:
I want the jewelry to remain centered from 768px wide downward. Putting the image in as centered text doesn’t work, nor does adding the image into the responsive container as a layer.
Thanks, David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Thanks. That was my fallback position, but I was hoping to avoid having to make smaller images to use in the BG for every instance. (Obviously if BG images scaled, that would solve a few things.) Certainly won’t work for something like a carousel. It just seems very strange to me that to right- or left-align something works fine, but centering is beyond the realm of the possible. Anyway, back to Photoshop…
Thanks again, David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
What I want is, at a certain screen size, for the image size to be static and remain centered as the container gets narrower, cropping from both sides in order to keep the important part of the image visible.
Hi David,
These links may offer a solution if you are willing to push Freeway about a bit and extend a few elements with your own markup;
This is more about cropping to the top (or bottom) of an image but the solutions are worth noting none the less;
I’ve tended to use background images in the past which work but aren’t great as they tend not to print and don’t behave like a regular image to the user (they just can’t grab it and copy it). I’ve also seen JavaScript solutions where JS heavyweights like jQuery are rolled out to specify which part of an image always need to be in view and to adjust the crop every time the page is resized.
Regards,
Tim.
On 17 Mar 2016, at 22:53, David email@hidden wrote:
Thanks. That was my fallback position, but I was hoping to avoid having to make smaller images to use in the BG for every instance. (Obviously if BG images scaled, that would solve a few things.) Certainly won’t work for something like a carousel. It just seems very strange to me that to right- or left-align something works fine, but centering is beyond the realm of the possible. Anyway, back to Photoshop…
Thanks for all the pointers. Looks like my best option is scale to a certain point, then to use an alternative BG image when it gets to the point I want it to crop instead of scale.
Thanks, David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Easy for you to say. What you say I could have figurede out myself . Thanks a lot for nothing!
To be fair, you threw a whole page at us without saying which part of it you wondered how it was done. That is like saying “moon rockets-- how are they done?”
Just be more specific when you ask such a question. No one here who actually answers questions enjoys guessing what the question actually is.
This example http://riabacke.se/ contains a centered image, not a gallery. I can’t figure out how the image gets centered when the page is narrowed, and where to implement the code.
Hope this is clear enough.
Kind regards / Ulf
freewaytalk mailing list
email@hidden
Update your subscriptions at:
if you mean the hero-image, it’s a background image in a container which is 100% wide and 600px high. To this container you’d add the image as background, center it both and set it to background-size cover.
This is stupid simple trying things out and all this can be set within inspector.
freewaytalk mailing list
email@hidden
Update your subscriptions at: