Dev Diary: Updating image path

This morning I decided to skip past an unresolved problem and make progress elsewhere. Now to allow custom Scene7 parameters on images.

Previously, I created a set of default parameters.

var scene7 = {
...
jpg : '?scl=1&fmt=pjpeg&qlt=25,1',
gif : '?scl=1&fmt=gif-alpha&quantize=adaptive,off,256',
png : '?scl=1&fmt=png-alpha'
};

Backstory: The images are sent along with the HTML and Production uploads them to the server at the same time. It’s not possible to test these parameters beforehand. All images are exported from Photoshop at 100% quality and at twice the size they will appear on the page. The parameters above provide the best quality but there are times a developer may want to add custom parameters.


It’s possible to get an idea of the settings needed by playing around with the compression settings in Photoshop. Then the developer can add the scene7 parameter after the file extension while slicing PSD to HTML.

<img src="images/myimage.jpg?scl=1&qlt=88" alt="">

The moment images and html are due to Production, the gulp command will automatically update the local image paths and parameters to Scene7 specs. An absolute path will be added, file extension removed, and parameters kept in place.

<img src="http://media.dev.com.edgesuite.net/is/image/myimage?scl=1&qlt=88" alt="">

Compared to all the troubles I’ve previously been through this was created in a snap. The first variable, scene7RegEx, will look for any images that have a question mark and a few common Scene7 parameters I picked specifically from our workflow. This is so it doesn’t interfere with any cache busting plugins we might need to install in the future. I hope.

function replaceImageType( value ) {
 var scene7RegEx = /\?(scl|qlt|pjpeg|fmt|png8|quantize).*\b/gm;
var imgQualitySrc = value.match(scene7RegEx);
var updateToScene7Path = /[\/]|[\.\w\/].*[\/]/gm;
 if ( imgQualitySrc ) {
    return value.replace(/\.(png|jpg|jpeg|gif)/, '')
.replace( updateToScene7Path, scene7.path );
 } else {
    return value.replace( /\.(jpg|jpeg)/, scene7.jpg )
.replace( /\.png/, scene7.png )
.replace( /\.gif/, scene7.gif )
.replace( updateToScene7Path, scene7.path );
}
}

The if statement executes when a Scene7 parameter is found and removes the file extension.

if ( imgQualitySrc ) {
    return value.replace(/\.(png|jpg|jpeg|gif)/, '')
....

If false, the rest of the images are updated to the default Scene7 parameters.

Further testing has proved this function to be successful. With all the trouble experienced in the past, I won’t be surprised if a glitch is found. For now, I’m good.


Now onto updating images in the HTML to Scene7. Research:

gulp-assets
((<\s*){0,1}\bimg)(.*?)\bsrc\s*=\s*((["{0,1}|'{0,1}]).*?\5)

gulp-inline-image-path uses jQuery and loops through the images? Hmm, that would be cool if I can look through the image tags instead of using regular expressions. I’m going to give this a try tomorrow, but with vanilla JS.

That is it for today!

Disclaimer: The Dev Diary is written every day and previous articles are not updated. Code may work today but glitches will be found tomorrow. Do your due diligence and thoroughly test any code authored here before implementing into your own project. Good luck!
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.