Request option to include gallery slideshow with one thumbnail.

fotonut

Joined: 2009-02-21
Posts: 74
Posted: Wed, 2011-10-26 21:28

Question:
I have WPG2 working well on a Wordpress site. I am wondering if there is a shortcut to do what I now have to go to a great deal of effort to produce? That would be the ability to post just one image which will produce a Lightbox slideshow of the previously selected WPG2 photos.

Background:
I have discovered how to make this work but it talks a lot of editing and global changes. It would be nice if it were automatic. To demo what I am doing now to make this happen, it begins by clicking the WPG2 option on the HTML tab of the new post text editor. First after pressing WPG2 I initially select the photos I want to include in the slideshow, then click "Thumbnail with Lightbox link to Full Sized Image (HTML)", then click "Insert" but this option provides all the images I have selected for a slideshow via multiple thumbnails that fill up the bottom of the page with all the thumbnails and links to them. What if you don't want a thumbnail for every slide in the show but you do want the slideshow from just clicking only one image on a page?

I find that deleting any of the HTML linking any of the images included in the "block of HTML" that WPG2 inserts at the end of the HTML, well that eliminates the thumbnails but also removes the photo from the slideshow. I finally accomplished what I wanted by cutting and pasting the mass block of WPG2. The first step was to seperate the thumbnails I did want to include so I clipped out the <a........ to ...../a> blocks and moved them up into the text section. This isolated one or more thumbnails I wanted in the text. With the rest of the HTML that WPG2 had inserted, I did a global change to make all values for width and height equal to "0". Then I replaced the block of thumbnails to the bottom of my HTML. Since the size of the photo displayed is 0 pixels, the slideshow still showes each photo associated with the link but the thumbnail for it is not displayed. As a final step, I wrapped each Lightbox link that I wanted to include in the text in the same wrapper used for inserting photos into the text, using a div tag wrapper with a call to the same class used by the frame when the normal Insert Picture option is chosen in the editor.


<div class="wp-caption alignleft" style="width: 230px">
<a title="The title that will appear at the top of the Lightbox slideshow that appears here automatically as a result of WPG2 button" href="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&amp;g2_itemId=6129&amp;g2_GALLERYSID=a02af234b2c2a97ba6392629aacbbbff" rel="lightbox[g2image]">
<img title="The same title, automatically created in this block of code from a WPG2 action" src="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&amp;g2_itemId=6130&amp;g2_GALLERYSID=a02af234b2c2a97ba6392629aacbbbff" alt="" width="200" height="150"/></a>
<p class="wp-caption-text">This text appears as a caption, the same if you uploaded a photo using WP's HTML editor to upload an image to your narrative.  Click on the photo above to see a slide show.</p></div>


<-- stuff that WP2 adds to your HTML after you select WPG2, select desired album and photos, select "Thumbnail with Lightbox link to full size image".  Once the block of code is appended here, remove a single image definition as we did above and with the remainder of thumbnails, use replace all function of editor to change the width and height parms to a value of zero (i.e. from "200" to "0"). 

Other caveats using the Lightbox slideshow:
I had to go into Gallery admin panel and disable the Lightbox plug-in on Gallery 2.3 because I was actually getting one slide show on top of another when I clicked on the WPG2 thumbnail that had been created using the option "Thumbnail with Lightbox link ....".
(Scroll right to see the width and height changes.)

<a href="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=5300&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" >
<img src="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=5301&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="0"  height="0"  alt="" title="" /></a>
<a href="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=5304&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" >
<img src="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=5305&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="0"  height="0"  alt="" title="" /></a>
............ etc. .............
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2011-10-27 00:03

You're referring to G2Image chooser.

You are likely missing a css style or something. the extra images would simply need display:none.
you may be able to do this by simply adding your own:

<style>
    a[rel="lightbox[g2image]"] img {
        display: none;
    }
    
    a[rel="lightbox[g2image]"]:first-child img {
        display: block;
    }
</style>

tested

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

 
fotonut

Joined: 2009-02-21
Posts: 74
Posted: Thu, 2011-10-27 04:24

OK, I added your block of code to the top of the post I am composing and all of the thumbnail images referred to by the "G2Image picker" with all the HTML it inserted at the bottom of the HTML input area, all of the images that were displaying from this before at the bottom of the screen now disappeared from the preview. I then cut and pasted the one single thumbnail and link I did want to display (and provide a slideshow link) by moving it up into the body of the post's text. I finally added display="block" to the attribute tag options of that single thumbnail I did want to display as in the example below.


<style>
    a[rel="lightbox[g2image]"] img {
        display: none;
    }    
    a[rel="lightbox[g2image]"]:first-child img {
        display: block;
    }
</style>

<p>The narrative of my post exists here.  Paragraphs of text follow this.

<p>Here I choose to incorporate the following thumbnail and clickable link to a slideshow into my text:</p>
<div class="wp-caption alignleft" style="width: 230px">
<a display="block" title="The title that will appear at the top of the Lightbox slideshow that appears here automatically as a result of WPG2 button" href="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&amp;g2_itemId=6129&amp;g2_GALLERYSID=a02af234b2c2a97ba6392629aacbbbff" rel="lightbox[g2image]">
<img title="The same title, automatically created in this block of code from a WPG2 action" src="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&amp;g2_itemId=6130&amp;g2_GALLERYSID=a02af234b2c2a97ba6392629aacbbbff" alt="" width="200" height="150"/></a>
<p class="wp-caption-text">This text appears as a caption, the same if you uploaded a photo using WP's HTML editor to upload an image to your narrative.  Click on the photo above to see a slide show.</p></div>


<p>We close out our post here, ending the narrative.   Even though HTML follows this post in our editor, it will not display due to the style definition.</p>

This caused the single thumbnail and link to full slideshow that I wanted to appear inside the narrative of the post, while all of the HTML code for the other thumbnails was rendered invisible (no stray images at the bottom of the screen). So, this is exactly what I asked for and it works. Thank you.

However, I encountered a problem when I try to expand on this idea and include more than a single thumbnail and link to the same slide show within the narrative. As I begin to add more visible links with the display="block" attribute command, more of the hidden thumbnails from the G2Image picker start to appear at the bottom of the display when previewing.

Perhaps the answer is that I just need to add display="none" to each one I do not want to display and forget the style definition entirely when I have more than one thumbnail and link I want to display?

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2011-10-27 11:57

This is how this lightbox works:
It searches the page for links with the attribute rel="lightbox[g2image]" and adds those to its slideshow list.
It will see these links whether their thumbnail is visible or not.
So hide all that you want.
My <style /> sample hides all but the first like you asked.
What you do with this knowledge is up to you.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

 
fotonut

Joined: 2009-02-21
Posts: 74
Posted: Thu, 2011-10-27 15:15

Thanks! I wonder if this selectable customization might be added the WPG2 menu? Would it be possible to add check boxes on each photo for "include thumbnail" whenever the lightbox option is checked? If that would require too much coding, how about an option "hide thumbnails" when the lightbox option was selected - that could add attribute control display="none" to all the HTML links inside the block of code generated and inserted by the WPG2 lightbox selection? Then the post author could change the entries that were to display on an individual basis to display="block". If this was implemented, it might also be nice to have line breaks added between the individual images within the WPG2 added HTML so they could more easily be cut and pasted out of the block and inline with the text post.

Regardless, it's good to know all this customization is possible now. In a perfect world it would be nice to have an option from a menu to streamline all of this, i.e. add a slideshow from a single image, pointing to a gallery group of photos that displayed as a lightbox slideshow on click, without having to do all the manual coding. I believe there is a facility somewhat like this in the free blogs provided by wordpress.com (notice not .net) but I don't know the details. From what I have heard there is a button "add slideshow" along with "add image" but all that "add slideshow" provides is simply a link to another of the google-like free but not really online picture repositories. (Just what I read, I have not used this facility.) I found via searches on the subject that others have posted questions about the wordpress.com "add slideshow" option, querying if it was available as a plug-in but no one responded. Gallery2 as a replacement for that does make sense.

 
fotonut

Joined: 2009-02-21
Posts: 74
Posted: Thu, 2011-10-27 20:38

I guess I don't understand how using the this example style works. For example I can't seem to make it work adding display="none" or display="block" to override this style code. Can the style block to be changed in any way to allow some switch to be set in the attribute tag? I am looking for the flexibility to hide everything except let's say 3-5 thumbnails out of the group of everything in the slide show?

Best I can figure out to resolve this is to manually edit all the thumbnail-to-gallery-slideshow links:


<p>The bulk narrative of my post exists here.  Paragraphs of text follow this.
<p>More narrative and paragraphs and data</p>

<p>At this point I choose to incorporate the following thumbnail and clickable link to a slideshow into my text.  I will cut text from the batch of thumbnails that were added with the WPG2 tag and insert one of them here into my text while wrapping my narrative around the thumbnail box:</p>
<!--(comment): add a div "wrapper" to enclose the thumbnail into a box that we will also contain a caption -->
<div class="wp-caption alignleft" style="width: 230px">
<a title="The title that will appear at the top of the Lightbox slideshow that appears here automatically as a result of WPG2 button" href="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&amp;g2_itemId=6129&amp;g2_GALLERYSID=a02af234b2c2a97ba6392629aacbbbff" rel="lightbox[g2image]">
<img title="The same title, automatically created in this block of code from a WPG2 action" src="http://gallery.mydomain.com/main.php?g2_view=core.DownloadItem&amp;g2_itemId=6130&amp;g2_GALLERYSID=a02af234b2c2a97ba6392629aacbbbff" alt="" width="200" height="150"/></a>
<!--(comment): close out the div "wrapper" that enclosed the thumbnail and add a caption to the wrapper box -->
<p class="wp-caption-text">This text appears as a caption, the same if you uploaded a photo using WP's HTML editor to upload an image to your narrative.  Click on the photo above to see a slide show.</p></div>


<p>We close out our post here, ending the narrative.   Even though HTML follows this post in our editor, it will not display due to the style definition.</p>


<!--(comment): all the stuff we see below was automatically added when we clicked the WPG2 button -->
<!-- and selected a whole gallery2 album of photos to include in our slideshow, using option -->
<!-- "Thumbnail with Lightbox link to full sized image"; -->
<!-- we will do major editing on the list below to keep all the images remaining in our slideshow -->
<!-- but hidden as thumbnails at the bottom of our post; will hide the images by either removing -->
<!-- the img link or adding a style of display:noneso the image will not display; however, -->
<!-- the images we do want to display will be manually cut from the batch below and pasted above -->
<!-- into our body text, optionally using the div tag (as in the example above) to ad a wrapper -->
<!-- and caption, similar to what is provided with a normal insert of a single photo -->


<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7790&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7791&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7796&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7797&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7799&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7800&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7805&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7806&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="150"  height="200"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7811&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7812&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7814&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7815&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7820&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7821&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7823&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7824&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="150"  height="200"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7826&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7827&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7829&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7830&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="200"  height="150"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7835&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7836&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="150"  height="200"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7841&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" ><img src="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7842&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" width="150"  height="200"  alt="" title="" /></a>
<a style="display:none;" href="http://gallery.yourdomain.com/main.php?g2_view=core.DownloadItem&g2_itemId=7847&g2_GALLERYSID=TMP_SESSION_ID_DI_NOISSES_PMT" rel="lightbox[g2image]" title="" </a>

Well now I see the structure that is going on and with this you can have any effect you desire but it requires a little bit of coding. Still wish there was an option in the WPG2 code generator to separate selecting images to include in the text vs. the thumbnails to be included. My users sometimes freak when they have to edit HTML to this level.

>>>>>> UPDATE: Add corrections per the post by supsidr below <<<<<<<<<<<<<<<<

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2011-10-27 20:19

inline style syntax is like this:
<a style="display:none;" href=....

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2011-10-27 20:47

Gallery2 is out of development.
WPG2 has not been updated for years.
G2Image(which is what we are talking about here) has not seen any active development since WPG2.

This is a community of users by users(like myself).
If there is a feature you would like, roll up your sleeves and code it up yourself or hire somebody from the marketplace.

Personally I love G2 still and usually code the features I need myself.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

 
fotonut

Joined: 2009-02-21
Posts: 74
Posted: Thu, 2011-10-27 21:04

Well I am very short of brain cells and even shorter of cash, so I will have to rely upon manual coding skills for now LOL. I do appreciate your help, however.

I personally love it too. I tried installing G3 and it was faster, yes but what a shock, faster assumedly because all the features of G2 had been stripped out. Not a good trade off for me personally. I have read over the description of the reason for the new "lean and mean" G3 but not a lot of it makes sense to me. I liked all the features of G2 and wanted even more. Not sure who pushed for them to be trimmed down but it's too late to complain now. I guess we just keep using G2 until it won't work any more.