Page 1 of 1

Blog image resizing to outer divs

Posted: Tue Dec 03, 2019 10:31 am
by Cthomas3487
When creating a blog post, we typically add images throughout the blog
example https://www.socialreachagency.com/impor ... usinesses/

By using TinyMCE (the given APWT text editor for blog posts), I'm able to add images to the blog post, however the default image size is set to whatever the height and width of the original image is. This can be great if the blog layout is super minimal however our layout is more complicated, the images don't default resize to the nearest outer div and can go out of bounds in that given column.

Example:
<p><span><img> is the div structure but the image overflows the <span> and <p> widths/heights creating conflict with nearby columns.

My temporary solution is to, every time I add an image, is to set the height and width to 100% so that it aligns with it's nearest outer div element. This works, however I would have to do this every time and I'd have to go back to past blog posts and manually change this...Another previous temporary solution was to make the image size smaller, however this creates a less coherent and less professional layout.

It would be great if, when adding an image to a blog post and without needing to go into the image properties, that by default it would have height and width set to 100%.

Re: Blog image resizing to outer divs

Posted: Thu Dec 19, 2019 10:37 am
by NoahBaldwin
Thanks for this suggestion. This creates an issue when using small images. It will cause the images to become distorted once they are blown up to 100% width and height. The recommended way to solve this is to edit the photo to the proper size before uploading it to your website. Alternatively, you could either set the width and height on each image you upload to be 100% or add a class to each image you upload and add CSS to your webpage to set the width and height of images with these classes to 100%.

Re: Blog image resizing to outer divs

Posted: Thu Jan 16, 2020 11:55 am
by NoahBaldwin
Here's another solution:
In your AllProWebTools account, navigate to: Settings->Administrator->Blog Template(Inside Theme Editor).
Put a div around your blog content with a class on that div. In your stylesheet, you can add styles to force all images inside that div to the exact width and height you want.
Ex:

Code: Select all

.blog-container img {
    width: 100%;
    height: 100%;
}