diff --git a/src/cloudinary.js b/src/cloudinary.js index 08f06bd5..eedddede 100644 --- a/src/cloudinary.js +++ b/src/cloudinary.js @@ -279,11 +279,12 @@ class Cloudinary { * @function Cloudinary#PictureTag * @param {string} publicId - the public ID of the resource * @param {Object} options - additional options to pass to the new ImageTag instance + * @param {Array} sources - the sources definitions * @return {PictureTag} A PictureTag that is attached (chained) to this Cloudinary instance */ - pictureTag(publicId, options) { + pictureTag(publicId, options, sources) { var tag; - tag = new PictureTag(publicId, this.config()); + tag = new PictureTag(publicId, this.config(), sources); tag.transformation().fromOptions(options); return tag; } diff --git a/src/tags/picturetag.js b/src/tags/picturetag.js index dceafe86..75e48849 100644 --- a/src/tags/picturetag.js +++ b/src/tags/picturetag.js @@ -5,7 +5,7 @@ import SourceTag from './sourcetag'; import {extractUrlParams} from "../util"; class PictureTag extends HtmlTag { - constructor(publicId, options = {}, sources) { + constructor(publicId, options = {}, sources = []) { super('picture', publicId, options); this.widthList = sources; } diff --git a/test/spec/automatic/tagspec.js b/test/spec/automatic/tagspec.js index 8fabf30b..7d9a4f75 100644 --- a/test/spec/automatic/tagspec.js +++ b/test/spec/automatic/tagspec.js @@ -519,4 +519,51 @@ describe("PictureTag", function(){ ""; expect(tag.toHtml()).toBe(exp_tag); }); + + describe("pictureTag", function(){ + let defaultUploadPath, config, cl; + config = {'cloud_name': 'test123'}; + defaultUploadPath = `${protocol}//res.cloudinary.com/${config.cloud_name}/image/upload/`; + + beforeEach(function () { + cl = new Cloudinary(config); + }); + + it("should generate a picture tag", function () { + let tag = cl.pictureTag('image_id').toHtml(); + return expect(tag).toBe(``); + }); + + it("should generate a picture tag with options", function () { + let tag = cl.pictureTag('image_id', {width: 150, crop: "fill"}).toHtml(); + return expect(tag).toBe(``); + }); + + it("should generate a picture tag with options and sources", function () { + let tag = cl.pictureTag( + 'image_id', + { + width: 150, + crop: "fill" + }, + [ + { + "max_width": 200, + "transformation": { + "crop": "scale", + "effect": "sepia", + "angle": 17, + "width": 100 + } + } + ] + ).toHtml(); + return expect(tag).toBe( + `` + + `` + + `` + + `` + ); + }); + }); }); diff --git a/types/cloudinary-core-tests.ts b/types/cloudinary-core-tests.ts index 8bfaf14a..a655f14a 100644 --- a/types/cloudinary-core-tests.ts +++ b/types/cloudinary-core-tests.ts @@ -74,6 +74,42 @@ const publicId = 'imagePublicId'; cld.image(publicId); // image.src == http://res.cloudinary.com/demo/image/upload/${publicId} +cld.pictureTag(publicId, { + cloud_name: "test123", + width: 100, + height: 100, + crop: "fill", +}); + + +cld.pictureTag(publicId, { + cloud_name: "test123", + width: 100, + height: 100, + crop: "fill", +}, [ + { + "max_width": 200, + "transformation": { + "crop": "scale", + "effect": "sepia", + "angle": 17, + "width": 100 + } + } +]); + + +cld.sourceTag(publicId); + + +cld.sourceTag(publicId, { + width: 100, + height: 100, + crop: "fill", +}); + + cld.video(publicId); // video == diff --git a/types/cloudinary-core.d.ts b/types/cloudinary-core.d.ts index 9273daa5..15ff6018 100644 --- a/types/cloudinary-core.d.ts +++ b/types/cloudinary-core.d.ts @@ -451,12 +451,25 @@ export class ImageTag extends HtmlTag { * @extends HtmlTag * @param {string} [publicId] * @param {Object} [options] + * @param {Array} [widthList] */ export class PictureTag extends HtmlTag { - static "new"(publicId: string, options?: Transformation.Options, widthList?: Array<[number, number, Transformation]>): PictureTag; + static "new"(publicId: string, options?: Transformation.Options, widthList?: Array): PictureTag; static "new"(name: string, publicId: string, options?: Transformation.Options): PictureTag; } +/** + * Creates an HTML (DOM) Source tag using Cloudinary as the source. + * @constructor SourceTag + * @extends HtmlTag + * @param {string} [publicId] + * @param {Object} [options] + */ +export class SourceTag extends HtmlTag { + static "new"(publicId: string, options?: Transformation.Options): SourceTag; + static "new"(name: string, publicId: string, options?: Transformation.Options): SourceTag; +} + /** * Creates an HTML (DOM) Video tag using Cloudinary as the source. * @constructor VideoTag @@ -735,6 +748,25 @@ export class Cloudinary { */ imageTag(publicId: string, options?: Transformation | Transformation.Options): ImageTag; + /** + * Creates a new PictureTag instance, configured using this own's configuration. + * @function Cloudinary#pictureTag + * @param {string} publicId - the public ID of the resource + * @param {Object} options - additional options to pass to the new PictureTag instance + * @param {Array} sources - the sources definitions + * @return {PictureTag} An PictureTag that is attached (chained) to this Cloudinary instance + */ + pictureTag(publicId: string, options?: Transformation | Transformation.Options, sources?: Array): PictureTag; + + /** + * Creates a new SourceTag instance, configured using this own's configuration. + * @function Cloudinary#sourceTag + * @param {string} publicId - the public ID of the resource + * @param {Object} options - additional options to pass to the new SourceTag instance + * @return {SourceTag} An SourceTag that is attached (chained) to this Cloudinary instance + */ + sourceTag(publicId: string, options?: Transformation | Transformation.Options): SourceTag; + /** * Generate an image tag for the video thumbnail. * @function Cloudinary#video_thumbnail @@ -877,6 +909,7 @@ declare let _default: { Layer: Layer, Param: Param, PictureTag: PictureTag, + SourceTag: SourceTag, SubtitlesLayer: SubtitlesLayer, TextLayer: TextLayer, Transformation: Transformation,