New guide layout

[clsk]

Hey guys,

I'm currently running an update all modified content script but would like to add to it, or possibly run another script on document open. Essentially I'd love to be able to select a different guide layout based on the filename. So if I open a file that has "desktop" in the name, it would select desktop guide layout, whereas when I open a file that has "mobile" in the name it selects mobile. Any suggestions on how to go about it?

Cheers

[JJMack]

There are desktops and there other desktops.  It depends on you machine and how you run it and how many displays you have and the sizes are resolutions of your displays.  If you want to create wall paper. Do you want to have an image the spans your display or different image on each display.  I use templates scripts and action to create wallpapers for my different configurations

Having different image on eacj display is very easy a simple Collage template and a script is all the is needed.   The spanning of an image across you displays is quite tricky if displays had different ppi resolution.  You need an image the size as if all your display had the resolution of your highest ppi resolution display then scale the parts that will be on lower resolution to the lower resolution,

For example one of my machine that has three displays two have a 4:3 aspect ratio 100ppi 1600x1200pc the third middle display has a 16:9 aspect ratio a 185ppi resolution and 3840x2160px.

screen capture so you can see the actual wallpaper and how Photoshop and bridge nay be captured.

[JavierAroche]

Hey clsk ​, you can totally do that in scripting!

If you want to set it as an event whenever you open a document, you can use notifiers. Here's how I would do it.

First, save this script in your local system (I called mine "newGuideLayout.jsx").

As you can see, I analyze the name of the document and I set the guide layout parameters for both "desktop" and "mobile". You can modify these params as you wish. Pretty much all of the params are optional, but some of them depend on other ones. I added notes below so it's easier to understand.

You can also add more cases, and set guide layout parameters for each one. You just need to add another "else if" looking for the string in the file name, like I did below.

// Javier Aroche - 2016
#target photoshop
if(app.documents.length < 1) {
    alert('No active document found.\nSkipping guide layout');
    throw new Error('No active document found. Skipping guide layout');
}
var doc = app.activeDocument;
var docName = doc.name.toString();
var guideLayoutParams = {};
if(docName.indexOf('desktop') !== -1) {
    guideLayoutParams = {
        columnCount : 20,
        columnWidth : 4,
        columnGutter : 3,
        rowCount : 10,
        rowHeight : 4,
        rowGutter : 2,
        marginTop : 1,
        marginLeft : 2,
        marginBottom : 3,
        marginRight : 4,
        centerColumns : true,
        clearExistingGuides : true
    };
    newGuideLayout(guideLayoutParams);
} else if(docName.indexOf('mobile') !== -1) {
    guideLayoutParams = {
        columnCount : 10,
        columnWidth : 2,
        columnGutter : 2,
        rowCount : 2,
        rowHeight : 2,
        rowGutter : 2,
        marginTop : 2,
        marginLeft : 2,
        marginBottom : 2,
        marginRight : 2,
        centerColumns : false,
        clearExistingGuides : true
    };
    newGuideLayout(guideLayoutParams);
}
/*
 * New Guide Layout
 * @param {Object} guideLayout
 *      @flag {Number} columnCount > 0 to add columns
 *      @flag {Number} columnWidth <-- Dependent on columnCount
 *      @flag {Number} columnGutter <-- Dependent on columnCount
 *      @flag {Number} rowCount > 0 to add rows
 *      @flag {Number} rowHeight <-- Dependent on rowCount
 *      @flag {Number} rowGutter <-- Dependent on rowCount
 *      @flag {Number} marginTop
 *      @flag {Number} marginLeft
 *      @flag {Number} marginBottom
 *      @flag {Number} marginRight
 *      @flag {Boolean} centerColumns
 *      @flag {Boolean} clearExistingGuides
 *
 */
function newGuideLayout(guideLayout) {
    try {
        var desc = new ActionDescriptor();
            if(guideLayout.clearExistingGuides) desc.putBoolean( stringIDToTypeID( "replace" ), guideLayout.clearExistingGuides );
            desc.putEnumerated( stringIDToTypeID( "presetKind" ), stringIDToTypeID( "presetKindType" ), stringIDToTypeID( "presetKindCustom" ) );
        var guideLayoutDesc = new ActionDescriptor();
        if(guideLayout.columnCount && guideLayout.columnCount > 0) {
            guideLayoutDesc.putInteger( stringIDToTypeID( "colCount" ), guideLayout.columnCount );
             if(guideLayout.columnWidth) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "colWidth" ), charIDToTypeID( "#Pxl" ), guideLayout.columnWidth );
             if(guideLayout.columnGutter) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "colGutter" ), charIDToTypeID( "#Pxl" ), guideLayout.columnGutter );
        }
        if(guideLayout.rowCount && guideLayout.rowCount > 0) {
            guideLayoutDesc.putInteger( stringIDToTypeID( "rowCount" ), guideLayout.rowCount );
            if(guideLayout.rowHeight) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "rowHeight" ), charIDToTypeID( "#Pxl" ), guideLayout.rowHeight );
            if(guideLayout.rowGutter) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "rowGutter" ), charIDToTypeID( "#Pxl" ), guideLayout.rowGutter );
        }
        if(guideLayout.marginTop) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "marginTop" ), charIDToTypeID( "#Pxl" ), guideLayout.marginTop );
        if(guideLayout.marginLeft) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "marginLeft" ), charIDToTypeID( "#Pxl" ), guideLayout.marginLeft );
        if(guideLayout.marginBottom) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "marginBottom" ), charIDToTypeID( "#Pxl" ), guideLayout.marginBottom );
        if(guideLayout.marginRight) guideLayoutDesc.putUnitDouble( stringIDToTypeID( "marginRight" ), charIDToTypeID( "#Pxl" ), guideLayout.marginRight );
        if(guideLayout.centerColumns) guideLayoutDesc.putBoolean( charIDToTypeID( "Cntr" ), guideLayout.centerColumns );
            desc.putObject( stringIDToTypeID( "guideLayout" ), stringIDToTypeID( "guideLayout" ), guideLayoutDesc );
        executeAction( stringIDToTypeID( "newGuideLayout" ), desc, DialogModes.NO );
    } catch(err) {
        alert('Guides Layout failed: ' + err );
    }
}

You can run that script separately every time you open a document, or you can assign it to a notifier event.

To do that, modify the script below and replace the path to your local JSX file path that you just saved ("newGuideLayout.jsx"). Then run this script from ExtendScript, or from my brackets-to-photoshop extension

app.notifiersEnabled = true;
// Add notifier. Execute script every time you open a new document
app.notifiers.add("Opn ", new File("~/Desktop/Delete/2016_11_13/newGuideLayout.jsx")); // <-- Replace this path with your JSX script's path

After that, every time you open ANY file, the "newGuideLayout.jsx" script will be executed on the current document. It will analyze the file name and set the guide layout you specified in the script.

If you no longer need this notifier, you can edit/delete it from the Scripts Events Manager (File > Scripts > Scripts Events Manager...).

Simply select the notifier and hit "Remove". Or you can remove it in code like this:

var appNotifiers = app.notifiers;
for(var i = 0; i < appNotifiers.length; i++) {
    if(appNotifiers.event == "Opn " && appNotifiers.eventFile == "~/Desktop/Delete/2016_11_13/newGuideLayout.jsx") { // <-- Replace this path with your JSX script's path
        appNotifiers.remove();
    }
}

Hope it helps!

[clsk]

Hey Javier, thanks so much, this is great, gonna try your suggestions today! Will post my result/questions back here.

Cheers!

[clsk]

Quick question; in the script you're actually creating the guide layout through code. I'd like to utilize the recent "new guide layout" that can be found under view, as I already have guide presets there for each breakpoint. Is there a way to call these presets instead? I just find it will be easier for maintenance purposes.

[JavierAroche · Accepted solution]

Hey clsk​, I made the script so you're actually building the layout in code. That makes it more flexible and doesn't depend on local files.

But it is possible to load a preset! Here's the function. Just replace the path with your local file. In the if / else code I listed before, just replace the "newGuideLayout" function (lines #33 and #50)  with the "loadNewGuideLayout" function below, linking to their correct local path.

var guidePath = "/Users/javier/Library/Application Support/Adobe/Adobe Photoshop CC 2015/Presets/Guides/mobileGuides.gds"; // <-- Replace this path with your .gds path
loadNewGuideLayout(guidePath);
function loadNewGuideLayout(guidePath) {
    var desc = new ActionDescriptor();
        desc.putEnumerated( stringIDToTypeID( "presetKind" ), stringIDToTypeID( "presetKindType" ), stringIDToTypeID( "presetKindUserDefined" ) );
        desc.putPath( charIDToTypeID( "Usng" ), new File( guidePath ) );
    executeAction( stringIDToTypeID( "newGuideLayout" ), desc, DialogModes.NO );
}

[clsk]

Thanks Javier!