[re]sizing images to fit browser page size (img tag?)
-
Not a web guy, but have generated Doxygen pages that do this & know it’s been a common feature forever.
I’ve imported my content from another site (SquareSpace) & those images are huge – fixed size is too big.
I also added a logo for my page header — fixed size is usually small.The image sizes render very differently in the editor vs. preview page. (editor looks better, but looks like always fixed size)
I didn’t see a way to “auto size” in the Site Logo properties in the header template.
My imported images (all content?) are classic block & I see even fewer options on the imported images.
https://pwcborg.wordpress.com/ if that helps.
Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hello there,
Happy to help you with this.
I’ve imported my content from another site (SquareSpace) & those images are huge – fixed size is too big.
As you’ve mentioned, the content is being displayed in a content block. Have you considered converting these elements to blocks?
The reason why I ask is because, you may have access to more options with regards to the content.
With regards to the logo and the header, I think theme selection may be the key to solving the woes you’re having.
Is there a theme out there that you like of, via Appearance > Themes? This may help to get things into shape for you.
-
I assume that by “converting these elements to blocks” you mean “convert to block.” I experimented with this on a couple pages.
In one case the I got an image block (likely what I want), but I only see fixed size options for image dimension (25% etc). And I have to preview to see the actual size/behavior (different than design view).
I tried creating a new image block – the only extra size option was a large/med/etc pull-down.
Is there a magic CSS that’ll do what I want?
Our default theme (Zoologist) seems reasonable. I made a couple minor tweaks to the header already. The image size thing is less important there, but would be nice to work out.
-
Hi there,
Though image dimensions may seem a bit limited, you have the option to crop images to the size you’re looking for:
https://wordpress.com/go/tutorials/how-to-resize-an-image/
You can also go to Settings > Media to adjust the default image sizes for the images that you upload:
For general information on editing an image, please visit:
https://wordpress.com/support/images/editing-an-image/
Is there a magic CSS that’ll do what I want?
CSS would help, but that feature requires the purchase of the Premium or Business Plans:
Hope this helps.
-
That’s very disappointing. Not being able to resize images to fit is a show stopper for us.
-
Gonna take one more crack at this. Our plan is to try & port our old site here (proving things out with the free plan), then go with premium once everyone is happy.
Assuming we jump to premium now (I can do that for just 1 mo, right?), is there a pre-canned CSS I can use to accomplish what I want (size to fit)?
Thanks,
-
Hi there,
To clarify, the issue with image seem to be related to the difficulty in translating the way images are set up on your Squarespace site with how they are set up in WordPress
After a closer look I do see that most images will need to be replaced (re-added, to be more specific) but this is something you can do under the free plan, no upgrade needed.
Essentially what you will want to do is convert your content to block, which fill allow you to edit the content in the WordPress editor. You will when you do this that the image are converted to some HTML code (something about the way they are set in Squarespace seems to be doing this. But what you can do instead is delete that block and replace it with an image block with the correct image instead.
This is difficult to explain in words, so I recorded a quick video to show you how to remove the HTML code blocks, and replace them with images instead.
You can view the at this link: https://d.pr/v/bTuj2h
Hope that helps. Please let us know if you have any more questions.
-
Thank you, especially for taking the time to make the video. I was going to experiment with blocks more, but I caught a couple things in the video that would have taken some trail & error.
Getting closer!
-
Hi again,
I forgot to add that it may help if you attend this webinar we have on compelling homepages: https://wordpress.com/webinars/wordpress-webinars-compelling-homepages/
The content of the webinar focuses on creating a homepage entirely in the block editor, so there are a lot of tips, tricks, and advice on effective homepages that I think will benefit you.
You can also catch the recording here on YouTube: https://www.youtube.com/watch?v=fQRkzwVPIVI&t=38s
Hope that helps!
- The topic ‘[re]sizing images to fit browser page size (img tag?)’ is closed to new replies.
WordPress.com Forums 