Blog image resizing to outer divs

Ideas! We love to hear them. Your ideas are the features we add next.
Post Reply
Cthomas3487
AllPro Expert
AllPro Expert
Posts: 35
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue May 14, 2019 7:26 am
Website: www.socialreachagency.com

Blog image resizing to outer divs

Post 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%.
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 107
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: Blog image resizing to outer divs

Post 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%.
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 107
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: Blog image resizing to outer divs

Post 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%;
}
Post Reply