CODEWITHSUNDEEP
tumblr
user1377298
user1377298

Reputation: 79

Change default photoset size on tumblr

I know tumblr has the defualt photoset sizes {photoset-500},{photoset-400},{photoset-250}, but I want to change the width, so that the width could be either 420, or 350. i have looked everywhere and cannot find a code to help me do this.

Upvotes: 1

Views: 25352

Answers (3)

guest
guest

Reputation: 21

You can use {Photoset} which just resizes the photoset to fit the container (max size 700px).

https://www.tumblr.com/docs/en/custom_themes

Upvotes: 2

George D. Frăţilă
George D. Frăţilă

Reputation: 51

Add this script before the ending body tag. This will increase or decrease the size of the photoset

<script type="text/javascript">
    //This will change the source address and display the correct size.
                $(".photoset").each(function() { 
            var newSrc = $(this).attr("src").replace('700','860');
            $(this).attr("src", newSrc);       
        });
    //This will get the new size of the iframe and resize the iframe holder accordingly.
        $(function(){
        var iFrames = $('.photoset');
        function iResize() {
            for (var i = 0, j = iFrames.length; i < j; i++) {
                iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) { 
                iFrames.load(function(){
                    setTimeout(iResize, 0); 
                });

                for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
                }
            } else {
                iFrames.load(function() {
                    this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                });
            }
        });
</script>

Upvotes: 1

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

You cannot change default sizes of images with Tumblr markup, but you can visually change size with CSS.

Tumblr markup:

{block:Photoset}
    {block:Photos}
        <img src="{PhotoURL-500}" class="photoset-img" />
    {/block:Photos}
{/block:Photoset}

CSS:

.photoset-img { width: 420px; /* can be any value you want */ }

Upvotes: 1

Related Questions