I would do this using XSLT and the fantastic ImageGen plugin.
There's two apporachs I'd be thinking of initially, they depend on how you/your users use Umbraco.
Content/Media Split Apporach
With this approach the images are stored in the Media section and referenced on the Gallery document using a textstring containing the nodeID of the folder in the media section containing the gallery images.
I think a split apporach is generally the most conventional way of doing this. We create a new document type for our gallery, this can contain all the parameters the user needs to set and also content, etc. So maybe one tab containing the content data (such as the gallery teaser and header) and another tab containing settings, e.g. size of thumbnails, and more importantly the location of the media folder containing the images.
Using XSLT we can then get all of the image files and using ImageGen resize the images to create thumbnails and also the control the size of the lightbox image as well. With some simple logic you can also make ImageGen act in a sensible fashion when it comes to landscape/portrait images. (e.g otherwise they both have the same width, which may not be ideal in some cases).
Content Approach
For some of our clients this is how I would consider building it, as they find the media section a little clumsy to work in. However I would imagine in most cases the above solution is preferred.
Content Node for the Gallery, again contains teaser, etc
However this time we make an additional document type for the Gallery Images, and allow this is a child of the Gallery. This means the images are stored as content in the Content section of this site.
-
Both these solutions essentially use the same quite simple XSLT. If you need some help putting some XSLT together let me know,
Sorry I missed the bit where you said you want to embed the images into the content.
Is it going to be the case that all images embedded on that piece of content are going to want lightbox treatment, or not?
If so you can again just use XSLT to catch all of those images, set the path as a variable and then push it through an XSLT template to create the lightbox. If you want control over which images get the lightbox treatment, why not create an editor style tag, which if applied to the image it will get processed. (if class='x').
Suggestions for enabling lightbox popups in the content area
In the html area of our pages, we want to enable lightbox for some of the images that are used in a page.
This requires thumbs and larger versions of the images (say 600px wide & 250px wide)
I've got two questions, where i'm looking for the most userfriendly solution for the enduser (content manager)...
* Is there a way that we can automatically get these sizes if people upload the image only once in the media folder?
* how would you go about adding the required html in the content area without going into the html code of the page during editing in the backend?
All help is very much appreciated!
Kind regards,
Rik
ps. I've found this solution: http://www.quartex.co.za/blog/2008/6/19/umbraco-lightbox-gallery-reading-from-a-folder.aspx
but this is focussed on creating an album at the bottom of a page, where we would like to have the lightbox images embedded in the content itself.
I've also found this solution, but it's only for adding gallery blocks outside the content area:
http://packages.maliciousthinktank.com/gallerydemo/pics.aspx
I would do this using XSLT and the fantastic ImageGen plugin.
There's two apporachs I'd be thinking of initially, they depend on how you/your users use Umbraco.
Content/Media Split Apporach
With this approach the images are stored in the Media section and referenced on the Gallery document using a textstring containing the nodeID of the folder in the media section containing the gallery images.
I think a split apporach is generally the most conventional way of doing this. We create a new document type for our gallery, this can contain all the parameters the user needs to set and also content, etc. So maybe one tab containing the content data (such as the gallery teaser and header) and another tab containing settings, e.g. size of thumbnails, and more importantly the location of the media folder containing the images.
Using XSLT we can then get all of the image files and using ImageGen resize the images to create thumbnails and also the control the size of the lightbox image as well. With some simple logic you can also make ImageGen act in a sensible fashion when it comes to landscape/portrait images. (e.g otherwise they both have the same width, which may not be ideal in some cases).
Content Approach
For some of our clients this is how I would consider building it, as they find the media section a little clumsy to work in. However I would imagine in most cases the above solution is preferred.
Content Node for the Gallery, again contains teaser, etc
However this time we make an additional document type for the Gallery Images, and allow this is a child of the Gallery. This means the images are stored as content in the Content section of this site.
-
Both these solutions essentially use the same quite simple XSLT. If you need some help putting some XSLT together let me know,
/Laurie
P.s the idea of the above solution, is the user never has to load different size images, etc. Its simple to manage and understand.
Sorry I missed the bit where you said you want to embed the images into the content.
Is it going to be the case that all images embedded on that piece of content are going to want lightbox treatment, or not?
If so you can again just use XSLT to catch all of those images, set the path as a variable and then push it through an XSLT template to create the lightbox. If you want control over which images get the lightbox treatment, why not create an editor style tag, which if applied to the image it will get processed. (if class='x').
Hope that helps, Lau
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.