How to Increase Image size in Feature Gadgets Blogger Team introduce new tools called Featured Widget to show their valuable content. But there is problem with this widget, it take first...
2018-07-31T07:44:58Z

How to Increase Image size in Feature Gadgets

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,

Increase Image size in Feature Gadgets

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'>
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: