[dsm_wpParticipant]

Hi there!

As I said, I’m trying to center elements that utilize Isotope within my container, and the developer told me to add this bit of code to make that possible.

<!-- centered layout extension http://isotope.metafizzy.co/ --> 

<script type="text/javascript">
$.Isotope.prototype._getCenteredMasonryColumns = function() {

    this.width = this.element.width();

    var parentWidth = this.element.parent().width();

    var colW = this.options.masonry && this.options.masonry.columnWidth || // i.e. options.masonry && options.masonry.columnWidth

    this.$filteredAtoms.outerWidth(true) || // or use the size of the first item

    parentWidth; // if there's no items, use size of container

    var cols = Math.floor(parentWidth / colW);

    cols = Math.max(cols, 1);

    this.masonry.cols = cols; // i.e. this.masonry.cols = ....
    this.masonry.columnWidth = colW; // i.e. this.masonry.columnWidth = ...
};

$.Isotope.prototype._masonryReset = function() {

    this.masonry = {}; // layout-specific props
    this._getCenteredMasonryColumns(); // FIXME shouldn't have to call this again

    var i = this.masonry.cols;

    this.masonry.colYs = [];
        while (i--) {
        this.masonry.colYs.push(0);
    }
};

$.Isotope.prototype._masonryResizeChanged = function() {

    var prevColCount = this.masonry.cols;

    this._getCenteredMasonryColumns(); // get updated colCount
    return (this.masonry.cols !== prevColCount);
};

$.Isotope.prototype._masonryGetContainerSize = function() {

    var unusedCols = 0,

    i = this.masonry.cols;
        while (--i) { // count unused columns
        if (this.masonry.colYs[i] !== 0) {
            break;
        }
        unusedCols++;
    }

    return {
        height: Math.max.apply(Math, this.masonry.colYs),
        width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth // fit container to columns that have been used;
    };
};
</script>

I’m not exactly sure how Isotope is utilized in Xtheme (or even where the source code is kept), but would this work if I add it to child theme’s function.php file? Or do I need to beautify the minified Isotope files with Xtheme and add it there?

[John EzraMember]

Hi there,

Thanks for writing in! You are referring to a script provided by a third party dev. We are a bit limited in this area as it is beyond our scope of support. You will need to test this out on your own to see. You could get your dev to do this for you as well.

We advise that you back up your site before testing scripts in the functions.php file. Make sure you have FTP access so you can revert the changes in case it crashes your site.

Thank you for understanding. Take Care!

[dsm_wpParticipant]

That’s what I figured, just thought I’d ask to see if you knew off hand more or less what I had to do. Thanks anyway!

[JadeModerator]

You’re welcome!

[Author]

Posts