Is it possible to turn off Tumblr photosets or adjust their dimensions?

I've successfully managed to enlarge my individual photos for posts on my blog, . However, Tumblr restricts the width of photosets to 500px.

Is there a way to increase the size of the photoset layout or disable the feature altogether so I can showcase my photos in high resolution one by one? Below is the code for the photoset:


{block:Photoset}
    <article>
        <span class="break" style="padding-bottom: 19px;"></span>
        {Photoset-500}
        {block:Caption}
            <p>{Caption}</p>
        {/block:Caption}
        <p></p>
        <time>{TimeAgo}</time>
    </article>
{/block:Photoset}

And here's the code for single photos where I've managed to make them larger:


{block:Photo}
    <article>
        <span class="break"></span>
        <img src="{PhotoURL-HighRes}" class="highres">
        <p>{Caption}</p>
        <time>{TimeAgo}</time>
    </article>
{/block:Photo}

Thank you!

javascripthtmlcsstumblr

Answer №1

There's no need to rely on Javascript and the Tumblr API for this task.

You can easily loop through each photo in a photoset using the {block:Photos} tag.

For example:

{block:Photoset}
     <article>
        <span class="break" style="padding-bottom: 19px;"></span>

        <!-- Iterate over each Photo in the Photoset -->
        {block:Photos}
            <img src="{PhotoURL-HighRes}" class="highres">
        {/block:Photos}

        {block:Caption}
            <p>{Caption}</p>
        {/block:Caption}
        <p></p>
        <time>{TimeAgo}</time>
    </article>
{/block:Photoset}

Don't forget to check out the Documentation for more guidance :)

Answer №2

To optimize the size of the photoset, include this script right before the closing body tag.

<script type="text/javascript>
    // Adjusts the source address to ensure correct sizing.
                $(".photoset").each(function() { 
            var newSrc = $(this).attr("src").replace('700','860');
            $(this).attr("src", newSrc);       
        });
    // Resizes iframe holder based on new iframe size.
        $(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>

Answer №3

If you're looking to maintain Tumblr's unique photoset grid style, a useful jQuery plugin worth checking out is available here: https://github.com/PixelUnion/Extended-Tumblr-Photoset

This plugin enhances Tumblr's default photoset feature by adding EXIF data, rounded corners, customizable gutter sizes, and more.

Full disclosure: I played a small role in its creation ;)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

modifying the source of an Ajax POST request

Is it possible to modify the referrer in an HTTP Ajax call using jQuery or JavaScript? I'm looking to send a request from my page but have the referrer appear as though it came from another page. Any insights would be appreciated. ...

javascriptajaxjqueryhttp-headers

`How can you effectively simulate class modules in Jest?`

Working with the amplitude module requires me to start by creating an instance of a class and then use its methods. Here's the initial code snippet: var Amplitude = require('amplitude'); const amplitude = new Amplitude(process.env.amplitude ...

javascripttypescriptjestjsts-jest

Accessing data from a JSON file within a JavaScript program

Here's the scenario: I have created a function that reads my JSON file and returns the value found at the end. This is how my files are organized: https://i.sstatic.net/TMeXVHNJ.png Below is my script.js file: async function readJSONFile(path) { ...

javascriptjsonfetch-api

Tips for creating a non-blocking sleep function in JavaScript/jQuery

What is the best way to create a non-blocking sleep function in JavaScript or jQuery? ...

javascriptjquerysleep

jQuery's conditional always evaluates the first condition

One of the elements in my jQuery code is a conditional function designed to display a specific message with its own style when necessary: function msg(type, text) { if (type="success"){ $('.messageDisplay').attr('class', &a ...

javascriptjquery

Utilizing jQuery to Trigger a JavaScript Function in a Separate File

Here is my question: I currently have 2 files: //File1.js function TaskA() { //do something here } //File2.js function TaskB() { //do something here } $(function() { TaskA(); }); The issue I am facing is that the TaskB function in File2.js ...

javascriptjqueryajaxfunctioncallback

The dropdown feature within a bootstrap button group is malfunctioning

As part of the web track in cs50, I am working on creating a webpage. My goal is to include options for navigating to the next or previous pages, as well as a dropdown menu with all the pages in between. However, when using Bootstrap's code, the dropd ...

htmlcssbootstrap-4cs50

section element is not receiving styles from the specified class

Whenever I want to ensure that a class is only used on specific elements, I usually prefix it with the element name. For example, using div.className limits the className styling to just div elements. However, when I tried the same approach with a section ...

htmlcss

Broken Mui Input - Full width with attributes for minimum and maximum values

I've created a sandbox to demonstrate an issue I came across that seems unbelievable, but it's happening. Here's the link: https://codesandbox.io/s/nifty-swanson-yxj4n2?file=/NumberField.js:1075-1097 The problem is simple - when both the ht ...

javascriptreactjsmaterial-ui

Align divs both vertically and horizontally within a wrap to eliminate unnecessary spacing

I am facing an issue centered horizontally and vertically within wrapping divs (blue frame) in a large div (green frame with a height of 100%). I was recommended to use the flex display, but there were significant gaps between the lines and I want the elem ...

htmlcssflexboxresponsive-design

The dynamically inserted nested division within a bootstrap grid does not occupy the entire width of the parent division

I am working with a parent div where I am dynamically adding smaller divs with content to achieve a specific layout. Here's how the structure looks: https://i.sstatic.net/tN1s1.png The code for the parent div is shown below: <div class="row" sty ...

jqueryhtmlcssbootstrap-4

Generating a tag next to an entry field using material-ui's TextField and getInputProps

In my project, I am utilizing a material-ui TextField to design an input alongside a label for a typeahead picker component using downshift. After exploring the demos, I have implemented the following code snippet: <FormControl fullWidth className={cl ...

javascriptreactjsmaterial-uidownshift

Is it possible to implement custom classes in @apply within a SCSS file in a Tailwind Next.js project?

Having trouble implementing a custom class overflow:inherit as @apply overflow-inherit in my next.js project with tailwind. It seems to be causing an error. Strangely, I can successfully use pre-built tailwind classes like @apply flex flex-col md:h-full h- ...

csssassnext.jstailwind-css

How can I create a sidebar that becomes fixed at the bottom of the page once it reaches that point?

I'm looking to make my sidebar scrollable along with the rest of my page until it reaches the bottom of the content in the sidebar, at which point I want it to become fixed. A great example of this functionality can be seen on Facebook's right si ...

javascriptjqueryhtmlcss

jade, express, as well as findings from mysql

My goal is to display the results of an SQL query in Jade, which pulls data from a table of banners. Each banner has a unique id and falls under one of three types. Here is my current code : express : connection.query("SELECT * FROM banner_idx ORDER BY ...

javascriptmysqlnode.jsexpresspug

Transform Vue.js into static HTML output

Is there a way to convert a Vue.js component into static html without the need for javascript? I am specifically interested in retaining styles. I am searching for a library where I can execute code similar to this: SomeNestedComponent.vue <template> ...

javascripthtmlcssvue.jsnuxt.js

Is there a way to modify the text within a hyperlink using jQuery?

Here is the link HTML code snippet: <a href="#" onclick="run(1); return false;" class="link" title="Remove item">[x]</a> I am looking to modify this using jQuery to display like this: <a href="#" onclick="run(1); return false;" class= ...

jqueryhtmlhyperlink

What is the best way to replace HttpClient in Aurelia?

I am completely new to Aurelia. How can I modify the code below in order to implement a dummy HttpClient, such as a json reader, that will provide a static set of json data without the need for a server during development? import {inject} from 'aure ...

javascriptjsonaurelia

How can I configure the Google Chrome script debugger to pause on exceptions?

Is there a way to automatically interrupt the program when an exception is encountered? ...

javascriptgoogle-chrome

Switching the positions of the date and month in VueJS Datepicker

Recently, I have been utilizing the datepicker component from vuejs-datepicker. However, I encountered an issue where upon form submission, the date and month switch places. For instance, 10/08/2018 (dd/MM/yyyy) eventually displays as 08/10/2018, leading ...

javascriptvue.jsdatepicker