Number of items per line ( or equivalently number of columns) in Mobile devices view

[starmilo]

Hi 🙂

I can't figure out which line of the source I could modify in order to force 4 pictures per line on mobile devices. Just like instagram does in their rendering. To my usage, 1 large picture + scrolling turns out unpratical due to the number of pics.

Could anyone point me out to the modification to do ? 2 3 or 4 pictures per line would improve significantly the browsing 😀

Many thanks for clues

Vincent

 

[Rodolfo]

I don't think that in such small screens 4 columns will look nice. Anyway, lib/Peafowl/peafowl.js

find this:

var device_to_columns = {

 

[starmilo]

I agree. I may have got carried away 🙂 . However 2 may do the trick for me.

Your coding style is very neat and nice.

 

[starmilo]

I have changed the default values for "phone" to no avail.
I have been trying to understand what

PF.fn.listing.columnizer = function(forced, animation_time, hard_forced) {

but the function is long and I get lost. Even though I amended

var device_to_columns = { // default
            phone: 3,
            phablet: 2,
            tablet: 4,
            laptop: 5,
            desktop: 6
        };

It doesn't work on the few samsung phone I tested on.

I tried to put some boolean values to true (forced, and hard_forced) . Did't work.
I kind of understand that there is a lot of resizing, scaling, and box dimensioning for the picture flow however the default configuration is override somewhere in the code.

If this is due to a layout constraint could you explain me where I should toggle with the function ?

 

[Rodolfo]

Remember to flush the browser cache.

 

[Rodolfo]

Seems that the function needs more tweaks, this is the final result:

PF.fn.listing.columnizer = function(forced, animation_time, hard_forced) {
   
    var device_to_columns = { // default
            phone: 2,
            phablet: 2,
            tablet: 4,
            laptop: 5,
            desktop: 6
        };
   
    if(typeof forced !== "boolean") var forced = false;
    if(typeof PF.obj.listing.mode == "undefined") forced = true;
    if(typeof hard_forced !== "boolean") {
        var hard_forced = false,
            default_hard_forced = true;
    } else {
        var default_hard_forced = false;
    }
    if(!hard_forced && default_hard_forced) {
        if(width !== $(window).width() || forced) {
            hard_forced = true;
        }
    }
   
    if(typeof animation_time == "undefined") var animation_time = 600;       
   
    var $container = $("#content-listing-tabs").exists() ? $(PF.obj.listing.selectors.content_listing_visible, "#content-listing-tabs") : $(PF.obj.listing.selectors.content_listing),
        $pad_content_listing = $(PF.obj.listing.selectors.pad_content, $container),
        list_mode = "responsive",
        $list_item = $(forced || hard_forced ? PF.obj.listing.selectors.list_item : PF.obj.listing.selectors.list_item+":not(.jsly)", $container);
   
    $container.addClass("jsly");
   
    // Get the device colums from global config
    if(typeof PF.obj.config.device_to_columns !== "undefined") {
        device_to_columns = $.extend({}, device_to_columns, PF.obj.config.device_to_columns);
    }
   
    // Get the device columns from the dom
    if($container.data("device-columns")) {
        device_to_columns = $.extend({}, device_to_columns, $container.data("device-columns"));
    }
   
    console.log(device_to_columns);
   
    PF.obj.listing.mode = list_mode;
    PF.obj.listing.device = PF.fn.getDeviceName();

    if(!$list_item.exists()) return;

    if(typeof $container.data("columns") !== "undefined" && !forced && !hard_forced){
        PF.obj.listing.columns = $container.data("columns");
        PF.obj.listing.columns_number = $container.data("columns").length - 1;
        PF.obj.listing.current_column = $container.data("current_column");
    } else {
   
        var $list_item_1st =  $list_item.first();
        $list_item_1st.css("width", "");
       
        PF.obj.listing.columns = new Array();
        PF.obj.listing.columns_number = device_to_columns[PF.fn.getDeviceName()];
       
        for(i=0; i<PF.obj.listing.columns_number; i++){
            PF.obj.listing.columns[i+1] = 0;
        }
        PF.obj.listing.current_column = 1;
    }
   
    $pad_content_listing.css("width", "100%");
   
    $list_item.each(function(index){
       
        $(this).addClass("jsly");
       
        var $list_item_img = $(".list-item-image", this),
            $list_item_src = $(".list-item-image img", this),
            $list_item_thumbs = $(".list-item-thumbs", this),
            isJslyLoaded = $list_item_src.hasClass("jsly-loaded");
       
        $list_item_src.show();
       
        if(hard_forced) {
            $(this).css({top: "", left: "", height: "", position: ""});
            $list_item_img.css({maxHeight: "", height: ""});
            $list_item_src.removeClass("jsly").css({width: "", height: ""}).parent().css({
                marginLeft: "",
                marginTop: ""
            });
            $("li", $list_item_thumbs).css({width: "", height: ""});
        }

        var width_responsive = PF.obj.listing.columns_number == 1 ? "100%" : parseInt((1/PF.obj.listing.columns_number)*($container.width() - (10 * (PF.obj.listing.columns_number - 1))) + "px");
        $(this).css("width", width_responsive);
       
        if(PF.obj.listing.current_column > PF.obj.listing.columns_number){
            PF.obj.listing.current_column = 1
        }
       
        $(this).attr("data-col", PF.obj.listing.current_column);
       
        if(!$list_item_src.exists()){
            var empty = true;
            $list_item_src = $(".image-container .empty", this);
        }
       
        var already_shown = $(this).is(":visible");
       
        $list_item.show();
       
        var image = {
                w: parseInt($list_item_src.attr("width")),
                h: parseInt($list_item_src.attr("height"))
            };
            image.ratio = image.w / image.h;
       
        //$list_item_src.removeAttr("width height"); // para fixed
       
        if(hard_forced && PF.obj.listing.columns_number > 1) {
            $list_item_src.css({width: "auto", height: "auto"});
            $(".image-container", this).css({width: ""});
        } else {
            if(PF.obj.listing.columns_number == 1) {
                $(".image-container:not(.list-item-avatar-cover)", this).css($list_item_img.hasClass("fixed-size") ? (image.ratio < 1 ? {width: "100%"} : {height: "100%"}) : {width: "100%"});
                $list_item_src.css($list_item_img.hasClass("fixed-size") ? (image.ratio < 1 ? {width: "100%", height: "auto"} : {height: "100%", width: "auto"}) : {width: "100%", height: "auto"});
            }
        }
       
        // Meet the minHeight?
       
        if(empty || ($list_item_img.css("min-height") && !$list_item_src.hasClass("jsly"))) {
           
            var isFixed = $list_item_img.hasClass("fixed-size"),
                list_item_img_min_height = parseInt($(".list-item-image", this).css("height")),
                col = {
                    w: $(this).width(),
                    h: isFixed ? $(this).width() : null
                },
                magicWidth = Math.min(image.w, image.w < col.w ? image.w : col.w);
           
            if(PF.obj.listing.columns_number !== 1) {
                if(isFixed){   
                    $list_item_img.css({height: col.w}); // Sets the item container height
                    if(image.ratio <= 3 && (image.ratio > 1 || image.ratio==1)) { // Landscape or square
                        image.h = Math.min(image.h, image.w < col.w ? image.w : col.w);
                        image.w = image.h * image.ratio;
                    } else { // Portrait
                        image.w = magicWidth;
                        image.h = image.w / image.ratio;
                    }
                } else { // Fluid height
                    image.w = magicWidth;
                    if(image.ratio >= 3 || image.ratio < 1 || image.ratio==1){ // Portrait or square
                        image.h = image.w / image.ratio;
                    } else { // Landscape
                        image.h = Math.min(image.h, image.w);
                        image.w = image.h * image.ratio;
                    }
                }
                $list_item_src.css({width: image.w, height: image.h});
            }

            if($(".image-container", this).is(".list-item-avatar-cover")) {
                $list_item_src.css(isFixed ? {width: "auto", height: "100%"} : {width: "100%", height: "auto"});
            }
            if($list_item_src.height() != 0 && ($list_item_src.height() !== "0" && $list_item_img.height() > $list_item_src.height() || $list_item_img.hasClass("fixed-size"))){
                $list_item_src.parent().css({
                    "marginTop": ($list_item_img.outerHeight() - $list_item_src.height())/2
                });
            }
            if($list_item_img.width() < $list_item_src.width()){
                $list_item_src.parent().css({
                    "marginLeft": - (($list_item_src.outerWidth()-$list_item_img.width())/2)
                });
            }       
           
            var list_item_src_pitfall_x = Math.max($list_item_src.position().left * 2, 0),
                list_item_src_pitfall_y = Math.max($list_item_src.position().top * 2, 0);
           
            // Do we need upscale and is safe to upscale the image?
            /*if(list_item_src_pitfall_x > 0 || list_item_src_pitfall_y > 0){
           
                var pitfall_ratio_x = list_item_src_pitfall_x/$list_item_img.width(),
                    pitfall_ratio_y = list_item_src_pitfall_y/$list_item_img.height(),
                    pitfall = {};
               
                if(pitfall_ratio_x <= .25 && pitfall_ratio_y <= .25){
                    if(pitfall_ratio_x > pitfall_ratio_y){
                        pitfall.width = list_item_src_pitfall_x + $list_item_img.width();
                        pitfall.height = pitfall.width / image.ratio;
                    } else {
                        pitfall.height = list_item_src_pitfall_y + $list_item_src.height();
                        pitfall.width = pitfall.height * image.ratio;
                    }
                    $list_item_src.css(pitfall);
                    $list_item_src.parent().css({
                        "marginLeft": -(($list_item_src.width()-$list_item_img.width())/2),
                        "marginTop": 0
                    });
                }
            }*/
           
            if($list_item_thumbs.exists()) {
                $("li", $list_item_thumbs).css({width: 100/$("li", $list_item_thumbs).length + "%"}).css({height: $("li", $list_item_thumbs).width()});
            }
           
            if(!already_shown) {
                $list_item.hide();
            }
           
        }

        $pad_content_listing.css("visibility", "visible");
       
        if(!$list_item_src.hasClass("jsly") && $(this).is(":hidden")) {
            $(this).css('top', "100%");
        }
       
        PF.obj.listing.columns[PF.obj.listing.current_column] += $(this).outerHeight(true);
       
        if(PF.obj.listing.columns_number == 1) {
            $(this).removeClass("position-absolute");
        } else {
            if($(this).is(":animated")) {
                animation_time = 0;
            }
            $(this).addClass("position-absolute").animate({
                left: $(this).outerWidth(true)*(PF.obj.listing.current_column - 1)
            }, animation_time);
            $(this).animate({
                top: PF.obj.listing.columns[PF.obj.listing.current_column] - $(this).outerHeight(true)
            }, animation_time);
        }
       
        if(already_shown) {
            $list_item.show();
        }
       
        if(!isJslyLoaded) {
            $list_item_src.addClass("jsly").hide().imagesLoaded(function(){
                $(this).fadeIn(250).addClass("jsly-loaded");
            });
        }
       
        PF.obj.listing.current_column++
       
    });
   
    $container.data({"columns": PF.obj.listing.columns, "current_column": PF.obj.listing.current_column});
   
    var content_listing_height = 0;
   
    if(PF.obj.listing.columns_number == 1) {
        content_listing_height = "auto";
    } else {
        content_listing_height = 0;
        $.each(PF.obj.listing.columns, function(i, v){
            if(v>content_listing_height) {
                content_listing_height = v;
            }
        });
    }

    $pad_content_listing.height(content_listing_height);
    PF.obj.listing.width = $container.width();
    PF.fn.list_fluid_width();
   
    $container.data("list-mode", PF.obj.listing.mode);
   
    $(PF.obj.listing.selectors.content_listing_visible).data("queued", false);
}

I've changed that function for the next release so the columns setting will work.