10 years ago
Topic
Has anyone tried creating a gallery in their template using widegetkit from yootheme?
I'm about to start looking at creating one using images/captions stored in a group x - I'll certainly post my code here if/when I succeed but if anyone has any tips/example code I'd be grateful of the help.
I'm about to start looking at creating one using images/captions stored in a group x - I'll certainly post my code here if/when I succeed but if anyone has any tips/example code I'd be grateful of the help.
175 Posts
10 years ago
0
Level 1
Good luck with that.
Widgetkit, like ZOO, is using JSON storage, which is a little bit tricky for Seblod to manage.
By default, Seblod stores JSON value in a second level attribute, using the first level for just field name attribute, which would be the first thing to overcome, since Widgetkit has a lot of first level attributes (name, id, type etc.). Second level attributes are images in "captions","links" and "settings" attribute, which can be accessed easily (storage JSON, field name[attribute]). Also, you might have to escape the image paths (it occurred to me that escaping might be managed by Seblod JSON store). Another thing is that you have to do it in BeforeStore event, since technically you are storing it in #__widgetkit_widget table, and you have to obtain new widget ID, so that you can use the plugin content during store of the content. Unless, of course, if you plan to have 2 distinct steps - creation of widget and creation of content that will contain the widget.
An alternative, if you want to stick with Widgetkit is to use plugin in content - [widgetkit id=25], that could be feasible if someone manages image upload + gallery creations.
Another way to create gallery would be to use "vanilla" images in FieldX and use typography Image on the field.
Widgetkit, like ZOO, is using JSON storage, which is a little bit tricky for Seblod to manage.
By default, Seblod stores JSON value in a second level attribute, using the first level for just field name attribute, which would be the first thing to overcome, since Widgetkit has a lot of first level attributes (name, id, type etc.). Second level attributes are images in "captions","links" and "settings" attribute, which can be accessed easily (storage JSON, field name[attribute]). Also, you might have to escape the image paths (it occurred to me that escaping might be managed by Seblod JSON store). Another thing is that you have to do it in BeforeStore event, since technically you are storing it in #__widgetkit_widget table, and you have to obtain new widget ID, so that you can use the plugin content during store of the content. Unless, of course, if you plan to have 2 distinct steps - creation of widget and creation of content that will contain the widget.
An alternative, if you want to stick with Widgetkit is to use plugin in content - [widgetkit id=25], that could be feasible if someone manages image upload + gallery creations.
Another way to create gallery would be to use "vanilla" images in FieldX and use typography Image on the field.
{"type":"gallery",
"id":25,
"name":"Demo Wall Polaroid",
"settings":{
"style":"wall",
"width":200,
"height":150,
"order":"default",
"effect":"polaroid",
"margin":"",
"corners":"",
"lightbox":1,
"lightbox_caption":1,
"spotlight_effect":""},
"style":"wall",
"paths":["\/yootheme\/widgetkit\/gallery\/polaroid"],
"captions":{
"\/yootheme\/widgetkit\/gallery\/polaroid\/image1.jpg":"Tony",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image2.jpg":"Susan",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image3.jpg":"Jennifer",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image4.jpg":"Kim",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image5.jpg":"Vanessa",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image6.jpg":"Clark"},
"links":{
"\/yootheme\/widgetkit\/gallery\/polaroid\/image1.jpg":"",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image2.jpg":"",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image3.jpg":"",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image4.jpg":"",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image5.jpg":"",
"\/yootheme\/widgetkit\/gallery\/polaroid\/image6.jpg":""}}
10 years ago
0
Level 1
Wow, thanks for your input... I wasn't expecting it to be so involved... I was expecting to be able to copy the basic code from the appropriate widgetkit template and re-format it in the seblod template with a 'for each' using the appropriate fields from a group x.
How important is the widgetkit ID? I've had a fiddle with firebug and changed the div ID (which contains the widgetkit ID) and it didn't seem to make any difference - although not sure if it was throwing up any errors. I've only had a quick look at the code but the widgetkit ID only seems to be used in the div id.
How important is the widgetkit ID? I've had a fiddle with firebug and changed the div ID (which contains the widgetkit ID) and it didn't seem to make any difference - although not sure if it was throwing up any errors. I've only had a quick look at the code but the widgetkit ID only seems to be used in the div id.
175 Posts
10 years ago
1
Level 1
Actually, your approach reflects MVC way of thinking more than mine. I think your idea could be done.
Inside the leading <div> you can set all the gallery settings, and images are inside a <li> (as background) with links to lightbox image. Just try to avoid $cck->renderField inside the override :)
Inside the leading <div> you can set all the gallery settings, and images are inside a <li> (as background) with links to lightbox image. Just try to avoid $cck->renderField inside the override :)
10 years ago
0
Level 2
I'll let you know my results a
118 Posts
10 years ago
0
Level 1
Hi,
I would better try to use a specific "slide" content type that would store the image, title, description, etc...well all you need for each slide and a custom search template that would implement the widgetkit slideshow code. In the index.php of the template, you would get infos from all your slides in a loop.
The good thing is you can use the published/unpublished status to hid/show a slide and the cck template options to store your slideshow options as width, height, effects, etc...
Olivier
I would better try to use a specific "slide" content type that would store the image, title, description, etc...well all you need for each slide and a custom search template that would implement the widgetkit slideshow code. In the index.php of the template, you would get infos from all your slides in a loop.
The good thing is you can use the published/unpublished status to hid/show a slide and the cck template options to store your slideshow options as width, height, effects, etc...
Olivier
175 Posts
10 years ago
0
Level 1
I think it is safe to consider a similar approach in the case of FieldX in a single content layout (or GroupX), instead of a 1-item-1-picture list as it is shown in this solution, in which case similar <li> generation code could be used inside a position override. After all, I think recedo was talking about in-content gallery, not the articles gallery. Unless there is another reason why zwergo suggested this approach, which by the way is very nice and elaborate.
10 years ago
0
Level 1
Thanks for all your input! I've not had a chance to try it out yet but I'm sure with all this info I'll be able to do it.
I will have a look at the Rok Gallery but as I'm using a yootheme template with widgetkit 'built in' I thought I'd use that.
I will have a look at the Rok Gallery but as I'm using a yootheme template with widgetkit 'built in' I thought I'd use that.
10 years ago
0
Level 1
Hi Guys,
Just to let you know I managed to set this up pretty easily - I want an 'in content' gallery - I am building a recipe site and wanted a main recipe image but also wanted an optional gallery that is formatted nicely with other images (for example step by step pictures or alternatives).
I opted for the simple 'polaroid' style from the widgetkit - http://www.yootheme.com/widgetkit/examples/gallery and this was what I ended up with http://s27.postimg.org/r03exctjl/Gallery.jpg. It would be very easy to change to one of the other 'image wall' styles, and imagine it would be simple enough to setup to one of the list styles too (i.e. the ones with thumbnails). It is also setup to show a larger image in a lightbox with navigation between images too.
I took the following steps to create the gallery;
<?php if (!empty($cck->get( 'recipe_gallery_groupx' )->value)): ?>
<div class="wk-gallery wk-gallery-wall clearfix polaroid ">
<?php foreach($cck->get( 'recipe_gallery_groupx' )->value as $gx){ ?>
<a title="<?php echo $gx['gallery_group_title']->value; ?>" data-lightbox="group:<?php echo $cck->getvalue('art_title'); ?>" href="/<?php echo $gx['gallery_group_image']->thumb2; ?>"><div><img height="150" width="200" alt="<?php echo $gx['gallery_group_title']->value; ?>" src="/<?php echo $gx['gallery_group_image']->thumb1; ?>"><p><?php echo $gx['gallery_group_title']->value; ?></p></div></a>
<?php } ?>
</div>
<?php endif; ?>
<!--End of Recipe Gallery -->
I need to do a little bit more formatting to neaten it up a bit (i.e. edges of polaroids get cut off when zooming in) but overall I'm pretty happy and hope this code can help others who are using the widgetkit!
Take it easy
Just to let you know I managed to set this up pretty easily - I want an 'in content' gallery - I am building a recipe site and wanted a main recipe image but also wanted an optional gallery that is formatted nicely with other images (for example step by step pictures or alternatives).
I opted for the simple 'polaroid' style from the widgetkit - http://www.yootheme.com/widgetkit/examples/gallery and this was what I ended up with http://s27.postimg.org/r03exctjl/Gallery.jpg. It would be very easy to change to one of the other 'image wall' styles, and imagine it would be simple enough to setup to one of the list styles too (i.e. the ones with thumbnails). It is also setup to show a larger image in a lightbox with navigation between images too.
I took the following steps to create the gallery;
- Created a new Group X with an image upload field and an image title field. The image field was setup with 2 thumbnails, thumb1 is resized for the polaroid (150 x 200) and thumb2 is resized to fit in the lightbox 600x400 I think.
- Added the group x to the main content type
- Added the following code to my custom template;
<?php if (!empty($cck->get( 'recipe_gallery_groupx' )->value)): ?>
<div class="wk-gallery wk-gallery-wall clearfix polaroid ">
<?php foreach($cck->get( 'recipe_gallery_groupx' )->value as $gx){ ?>
<a title="<?php echo $gx['gallery_group_title']->value; ?>" data-lightbox="group:<?php echo $cck->getvalue('art_title'); ?>" href="/<?php echo $gx['gallery_group_image']->thumb2; ?>"><div><img height="150" width="200" alt="<?php echo $gx['gallery_group_title']->value; ?>" src="/<?php echo $gx['gallery_group_image']->thumb1; ?>"><p><?php echo $gx['gallery_group_title']->value; ?></p></div></a>
<?php } ?>
</div>
<?php endif; ?>
<!--End of Recipe Gallery -->
I need to do a little bit more formatting to neaten it up a bit (i.e. edges of polaroids get cut off when zooming in) but overall I'm pretty happy and hope this code can help others who are using the widgetkit!
Take it easy