Setting up a lightbox

(Ian) #1

hello
I have just taken over a site using v3.20 and the client wants a lightbox installed, and says it is easy to do. But i can not find any instructions on setting up a gallery or lightbox. (i have not used matrix for over 3 years so am a bit fuzzy at present)



Normally i would use a 3rd party script, add code to the page header and upload the images and drop the lightbox details into the page. But I can not see how to add code to the page header, and uploading images 1 x 1 is a slow process for a 30 image lightbox.

Is there a way to do a lightbox within Mysource matrix 3.20.



Any assistance would be apprieciated



thanks

ian

(Nic Hubbard) #2

First, to upload a large amount of files, just use the Bulk File Import Tool, which is under the "Tools" icon in the Matrix admin interface. That way, you can just use FTP to upload a whole folder, then import that into Matrix.


Next, you would use an asset listing you list out your images, probably with thumbnails or image varieties.



If you are wanting to add the script to your header, this would need to be done in your design parse file. Or probably a better idea, in a design customization that is applied to just the part of your site that you want the lightbox to work in.

(Ian) #3

thanks for that


[indent]

First, to upload a large amount of files, just use the Bulk File Import Tool, which is under the "Tools" icon in the Matrix admin interface[/indent]

in Tools i get the following message but i have no list or ability to add a file - seems i do not have permissions to do this function would that be the case?



[indent]"Select a directory to import into the system"[/indent]





Also in the design customisation area it shows the list of customisations that "exist" but i can not actually edit any of them. Again would this be a permissions issue with the user given to me?



thanks

ian

(Anthony Barnes) #4

It sounds like you don't have write permission to the designs. These designs will be global and much has changed in matrix in 3 years so be sure to check the design manual before hand.


Bulk file import requires configuration of the import manager asset, so probably best to read the chapter on bulk file import as well.



The key to setting up an image gallery, at least the large number we have implemented for clients in the past, is to configure a trigger to automatically create an image variety of the uploaded image assets:


  • Create trigger
    [*]Set event to Asset Created
    [*]Set condition to Asset Type Image
    [*]Set condition to restrict the trigger to operate only on your images folder
    [*]Set action to create image variety with your specific width/height requirements


When an image variety is created you will get access to some keywords via asset listing to show the resized 'thumbnails'.

Like Nic mentioned, the best place to put the JavaScript is in the head of your page, which will require access to the design. I'd highly recommend using jQuery (rapid deployment), and there are a ton of pre-baked lightbox scripts out there. As a side note, our MySource Mini does this [url=http://mini.squiz.net/features/image-galleries]out of the box[/url].
(Ian) #5

thanks for that so it seems i need write permissions to designs before i can implement the lightbox - off to find more passwords :slight_smile:


cheers

ian

(Warwick Barnes) #6

I'm interested in how people deal with images of different aspect ratios, portrait/landscape, etc. Our current image system automatically crops thumbnails of a consistent size out of the original image (the crop is designed to include a 'main point of interest' chosen when the image is first uploaded). I'm trying to work out how to do something similar in Matrix.


I can see we're going to have problems with web authors uploading images in ratios of 16:9, 3:2, 4:3 and then we can't make consistently-sized thumbnails automatically out of them in Matrix.



Can anyone tell me how they've handled this? (eg padded out different shaped thumbnails with black borders, uploaded an identically-sized image variety for each image, cropped all the original images to the same size to start with, etc…)



It's particularly noticeable when you want thumbnails of the same size on the home page for example … I'm not sure how best to go about 'enforcing' that these are all uploaded with the same aspect ratio.



Thanks,



Warwick

(Nic Hubbard) #7

[quote]
I'm interested in how people deal with images of different aspect ratios, portrait/landscape, etc. Our current image system automatically crops thumbnails of a consistent size out of the original image (the crop is designed to include a 'main point of interest' chosen when the image is first uploaded). I'm trying to work out how to do something similar in Matrix.



I can see we're going to have problems with web authors uploading images in ratios of 16:9, 3:2, 4:3 and then we can't make consistently-sized thumbnails automatically out of them in Matrix.



Can anyone tell me how they've handled this? (eg padded out different shaped thumbnails with black borders, uploaded an identically-sized image variety for each image, cropped all the original images to the same size to start with, etc…)



It's particularly noticeable when you want thumbnails of the same size on the home page for example … I'm not sure how best to go about 'enforcing' that these are all uploaded with the same aspect ratio.



Thanks,



Warwick

[/quote]



We just always make sure to upload images of the same exact size (for news which shows on the homepage) so that our thumbnails are consistent.



My question is, why would you ever want a system to crop for you?!

(Warwick Barnes) #8

[quote]
We just always make sure to upload images of the same exact size (for news which shows on the homepage) so that our thumbnails are consistent.



My question is, why would you ever want a system to crop for you?!

[/quote]



I guess we just decided on the 'auto-cropping' for efficiency. Various people in our organisation can upload large original images - and the system outputs them on demand as, for example, an 86x86 pixel version for the home page, a 160x120 pixel version for the page body, an 800x600 version for the popup image window, a 1280x1024 version to use as desktop 'wallpaper', a 512x288 version to use as the poster frame for a movie, etc… Depending on the size of image, these versions may be imprinted with photographer copyright details. Eg,



http://images.aad.gov.au/img.py/39c9.jpg?width=86&height=86

http://images.aad.gov.au/img.py/39c9.jpg?width=160&height=120

http://images.aad.gov.au/img.py/39c9.jpg?width=512&height=288

http://images.aad.gov.au/img.py/39c9.jpg?width=800&height=600



We've uploaded 27,000 images in the past 5 years, which have been automatically cropped into 77,000 image varieties. Sometimes the auto-cropping produces strange results, but mostly it's been ok.



In Matrix, I'm trying to use triggers that make image varieties, to achieve the same sort of result. We were happy enough with our existing image system, but it does seem better to have the images as actual assets in Matrix, rather than stored in a separate system. (Unless they could be 'shadow assets' in some way … I haven't really looked into that…)



Matrix doesn't do auto-cropping, but it will do 'auto distort' (if you choose an image variety constrained by "neither" and set a width and height of a different aspect ratio from your original image. I think cropping-and-rescaling would have been a more useful action for the "neither" constraint, rather than distortion. ie If someone requests an 86x86 pixel version of a 640x480 image, then first crop to the same aspect ratio - 480x480 - then rescale to 86x86. This would lead to quite arbitrary results, but would often be ok, and would on-balance be better than simply distorting a 4:3 aspect ratio image into a 1:1 aspect ratio. I've never seen a place where a distorted image was useful.

(Nic Hubbard) #9

[quote]
(Unless they could be 'shadow assets' in some way … I haven't really looked into that…)



[/quote]



If those images are stored on the same server, you could always use the new File Bridge asset, which lets you show system files as shadow assets.