Change Image Size on Post?

[WHairstonLOI]

Is there (or can there be added) an easy way to scale down the image size on the actual post? See the page on my web site at http://www.logicaloperators.com/Community/Blogs/Post/3440/Logical-Operators-Turns-25 for an example.

I specified a downloaded image of size 800x632 for the post. This image seems to scale down appropriately for the post summary on the main Blogs page at http://www.logicaloperators.com/Community/Blogs, but on the actual post page, the image is increased in size (and it appears, ratio also, since the new image is 1140x400) to fill the entire screen width, causing it to spill over into other content.

The images for other posts on the same blog also have the same issue, although I don't think we had those issues before upgrading to Blog v6.4.0 and moving from the v6 skin to the new Default skin.

Ideally, I'd like to see the image scale down (keeping aspect ratio) to fit within the same width that the text of the post uses.

Currently using a Bootstrap3 compatible skin, DNN 8.0.4, Blog Module v6.4.1, Blog Default skin.

Thanks in advance for any help!

[WHairstonLOI]

After spending a couple of hours reading about the template section, then finding the appropriate files on the site, then experimenting with changes, I think I've developed a workaround for this issue. I'm documenting the changes here in case someone else encounters the same problem.

However, the process brought up several suggestions I'd like to make for future releases of the template.

I ended up making a new template by copying the _default template folder under DesktopModules\Blog\Templates, then editing the PostBanner.html file in my copy.

Item 1: In examining the old v6 Template, there is a hard-coded max image size of 820x300 with cropping enabled. In the new Default Template, that max image size has been increased to 1140x400, with cropping still enabled. Apparently, the new, larger settings are meant to display a larger image on wider/higher-resolution screens. However, the cropping of the image causes the image to be distorted if the original image size doesn't match the maximum image width/height specified. This can cause important information in the image to simply be omitted from the full post.

Item 2: On a Bootstrap skin (upon which many popular DNN skins are based), this resizing/cropping can allow the image to overflow the Bootstrap column where the Blog module resides. In my case, the right-side of the image was appearing behind other text in other Bootstrap columns to the right of the post, causing readability issues.

Item 3: This resizing/cropping of the image breaks the "responsiveness" desired in using a Bootstrap skin. Even when disabling the cropping to allow the full image to be displayed at a size no larger than the maximum width/height specified, the resulting image does not necessarily scale to fit the screen on a mobile device (my Lumia 950 Windows Mobile, for example). This results in only the leftmost part of the image being displayed on a mobile device, while the rest of the image simply flows off- screen.

I resolved these issues by making 2 simple changes to the PostBanner.html file as shown below. The first change was to disable cropping by setting c=0 in the img src attribute. The second was to specify the Bootstrap class "img-responsive" for the image. Taken together, these allow the image to be loaded with full content (no clipping) at a size not to exceed the maximum width/height specified, then the Bootstrap class scales that image based upon the Bootstrap column in which the image appears. This has the added benefit of resizing the image dynamically should the user change the browser window size or rotate a mobile device between horizontal/vertical orientations.

<figure>
    <picture>
        <img class="img-responsive" title="[post:localizedtitle]" 
             src="[settings:imagehandlerpath]?TabId=[module:tabid]&ModuleId=[module:moduleid]&Blog=[Post:blogid]&Post=[Post:contentitemid]&w=1140&h=400&c=0&key=[Post:image]"
        />
    </picture>
</figure>

I'd really like to suggest that these settings somehow be added into the future versions of the templates shipped with the Blog module, as the cropping seems to work against maintaining a consistent image between the post listings and the full post. Moreover, the Bootstrap class "img-responsive" will simply be ignored if the CSS class does not exist (such as in a non-Bootstrap skin). However, I'll respectively leave the decisions on whether/how to best implement these issues to someone here who better understands the overall template system and its effect on the shipping Blog module.

I suspect there are further changes I'll need to make to my "Default Bootstrap" Blog template as I experiment with its rendering on various browsers/devices, and there may be more elegant ways of implementing those changes than I've demonstrated here for speed of implementation. At some point, assuming there is a "Blog template exchange" available, I can always upload my final revision of my Default Bootstrap template.

Any feedback on the issues I've raised here would be much appreciated, as I'm fairly new to using the Blog module and would like to understand more about using it appropriately on a responsive web site. Thanks!

[valadas]

Different people will want different ways of handling images, the base template should be basic enough to not rely on css frameworks, but as you discovered you can easily copy and modify the template.

This being said I will keep this issue as an enhancement to at least add max-width:100% on some images just to prevent images overflowing the containers in the base template.

[WHairstonLOI]

Many thanks!

[chadwixk]

@WHairstonLOI thanks for the work around. I have a bootstrap theme and was having this issue.