How to Increase Image size in Feature Gadgets

Recently Blogger Team introduce new tools called Featured Widget to show their valuable content. But there is problem with this widget, it take first image from the post, so there is four possible choice you can Edit Image in post Editor

• Small- 200 x 133 pixels
• Medium- 320 x 213 pixels
• Large- 400 x 267 pixels
• X-Large- 640 x 427 pixels
• Original Size- Default Size

If you install Feature Widget in Sidebar it not create the problem but if you install it in the Main and want to be show wide image it may create problem, In this tutorial we solve increasing image size using JavaScript, so it didn't depend upon image setting in post editor.

Step 1: Go to Blogger Dashboard >> Layout >> Add a Gadgets. Choose "Featured Post" (If you already Installed skip to next step)

Step 2: Now Click on Template >> Edit HTML, in the code find for "FeaturedPost1" and you will get code like this

<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
    <b:includable id='main'>
        <!-- Only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
        </b:if>
        <b:include name='content' />

        <b:include name='quickedit' />
    </b:includable>
    <b:includable id='content'>
        <div class='post-summary'>
            <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
                <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
            </b:if>
            <p>
                <data:postSummary/>
            </p>
            <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                <img class='image' expr:src='data:postFirstImage' />
            </b:if>
        </div>

        <style type='text/css'>
            .image {
                width: 100%;
            }

        </style>
    </b:includable>
</b:widget>

Step 3: Just replace above code from <b:widget...</b:widget> to below code

<b:widget id='FeaturedPost1' locked='false' title='Featured post' type='FeaturedPost'>
    <b:includable id='main'>
        <!-- Only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
        </b:if>
        <b:include name='content' />

        <b:include name='quickedit' />
    </b:includable>
    <b:includable id='content'>
        <div class='post-summary'>
            <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
                <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
            </b:if>
            <p>
                <data:postSummary/>
            </p>
            <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
                <img class='image' expr:src='data:postFirstImage' />
                <script>
                    // path: The image url
                    // replacement: The replacement string
                    function replaceSize(path, replacement) {
                        var parts = path.split('/'); // break the string to an array
                        parts[7] = replacement; // this is the path segment to replace
                        return parts.join('/'); // glue the array back into a string
                    }
                    document.getElementById("FeaturedPost1").getElementsByTagName("img")[0].src = replaceSize('<data:postFirstImage/>', 's1600');
                </script>
            </b:if>
        </div>

        <style type='text/css'>
            .image {
                width: 100%;
            }

        </style>
    </b:includable>
</b:widget>

If want to add this Featured Gadget in Main(Above of Blog Post), Go to Template >> Edit HTML, find for id='main' and you will get snippet like this below

<b:section class='main' id='main' name='Main' showaddelement='no'>

In this snippet you can see showaddelement set to no change to showaddelement='yes' like below and hit "Save Template"

<b:section class='main' id='main' name='Main' showaddelement='yes'>

If you liked this article, then please subscribe to our blog for more Blogger tutorials