[SOLVED] Click resized image for full sized

Direct link to solution for G2 final release:
http://gallery.menalto.com/node/30144#comment-136055

EDIT: This is for the old layout/theme system:
I see I need to edit singleBody.tpl, but I'm having a hard time understanding what to edit to make this happen.

I want to be able to click on the resized image to view the full sized (or next size larger) image if the person has permissions to view the full sized image. I'd also like to go back down one resized image when viewing the full size image.

I can see I need to edit this line

            {g->image item=$layout.item image=$image id="%ID%" class="%CLASS%"}

But I'm not sure to what.

Thanks

That's exactly what I was trying to do, but I don't understand the code.

I did modify this

      {if ($layout.viewInline[$layout.imageViewsIndex])}
        {if isset($layout.photoFrame)}
          {g->block type="imageframe" frame=$layout.photoFrame}
            {g->image item=$layout.item image=$image id="%ID%" class="%CLASS%"}
          {/g->block}
        {else}
          {g->image item=$layout.item image=$image fallback=$smarty.capture.fallback}
        {/if}
      {else}
        {$smarty.capture.fallback}
      {/if}

to this

        {if isset($layout.photoFrame)}
          {g->block type="imageframe" frame=$layout.photoFrame}
              {if count($layout.imageViews) > 1}
                <a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$layout.item.id`"
                 arg3="imageViewsIndex=`$layout.sourceImageViewIndex`"}">
                  {$smarty.capture.fullSize}
                    {g->image item=$layout.item image=$image id="%ID%" class="%CLASS%"}
               </a>
              {else}
                {$smarty.capture.fullSize}
              {/if}
          {/g->block}
        {else}
          {g->image item=$layout.item image=$image fallback=$smarty.capture.fallback}
        {/if}

But the full size then doesn't go back to the smaller size and I get border around the image when hovering over it with the mouse.

I know I can understand the code in G2 better if I get a few pointers on what is what. Which leads me to my next question in the latest topic I'm about to post...

I think I'm very close and I think I think I know what needs to be modified. I just don't know PHP to fix it.

The code you provided is almost there. When I use this
{assign var="nextIndex" value=($layout.imageViewsIndex+1)%count($layout.imageViews)}
I keep getting a page with no image, but a link to down load the file

If I change it to this:
{assign var="nextIndex" value=$layout.imageViewsIndex+1}
Then it at least goes from the resized image to the full size image. However, there is nothing larger than the full size image so it doesn't go any farther.

This is that section of code I've edited so far:

      {if ($layout.viewInline[$layout.imageViewsIndex])}
        {if isset($layout.photoFrame)}
          {g->block type="imageframe" frame=$layout.photoFrame}
            {if count($layout.imageViews) > 1}
              {assign var="nextIndex" value=$layout.imageViewsIndex+1}
               <a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$layout.item.id`"
                arg3="imageViewsIndex=`$nextIndex`"}">
                {g->image item=$layout.item image=$image id="%ID%" class="%CLASS%"}
               </a>
            {else}
              {$smarty.capture.fullSize}
            {/if}
          {/g->block}
        {else}
          {g->image item=$layout.item image=$image fallback=$smarty.capture.fallback}
        {/if}
      {else}
        {$smarty.capture.fallback}
      {/if}

Thanks for all the help you've provided me today 'mindless'

Kevin nice work! I was trying to do the same thing with now luck.

I'm trying your kludged together code and it works great for me! and yes I do belive you need theat last {else} statement.

Nice catch. Thanks. I've revised my code so the end result is a little cleaner to the end user.

1) No <a href... if the user can't view anymore than the one image.

2) Retains the "smarty.capture.fallback" stuff, what ever that's for. I hope a dev person can explain that to me.

EDIT: This is solved, minor typo in the code:

Here's a link for you to see what I'm talking about,
EDIT: removed link

Please feel free to pipe in if there's a better way to code this.

EDIT: view=core:ShowItem should be view=core.ShowItem. Note the period (.) instead of the colon (
Had to run that through beyond compare to figure out what the heck was going.

See the code here

{if ($layout.viewInline[$layout.imageViewsIndex])}
        {if count($layout.imageViews) > 1}
          {if $layout.imageViewsIndex==0}
            {assign var="nextIndex" value=1}
          {elseif $layout.imageViewsIndex==count($layout.imageViews)-1}
            {assign var="nextIndex" value=0}
          {else}
            {assign var="nextIndex" value=$layout.imageViewsIndex+1}
          {/if}
          {if isset($layout.photoFrame)}
            {g->block type="imageframe" frame=$layout.photoFrame}
              <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$layout.item.id`"
              arg3="imageViewsIndex=`$nextIndex`"}">
                {g->image item=$layout.item image=$image id="%ID%" class="%CLASS%"}
              </a>
            {/g->block}
          {else}
            <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$layout.item.id`"
            arg3="imageViewsIndex=`$nextIndex`"}">
              {g->image item=$layout.item image=$image fallback=$smarty.capture.fallback}
            </a>
          {/if}
        {else}
          {if isset($layout.photoFrame)}
            {g->block type="imageframe" frame=$layout.photoFrame}
              {g->image item=$layout.item image=$image id="%ID%" class="%CLASS%"}
            {/g->block}
          {else}
              {g->image item=$layout.item image=$image fallback=$smarty.capture.fallback}
          {/if}
        {/if}
      {else}
        {$smarty.capture.fallback}
      {/if}

Have a look at these threads, they should help. Don't forget that these forums have a search function ;)

http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=29865&highlight=popup
http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=27255&highlight=popup
http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=31501
http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=27985

Ah, you may also want to look at this thread, http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=30995&start=0

You might be able to have a javascript popup to open a new window with a special template setup for viewing just the image. The window wouldn't be just the image as it would actually be an HTML page showing as much or as little as you want. Then you could include javascript so you could click on the image to close the window.

Just an idea.

Hey, that's how I've learned most of the stuff I know about HTML, CSS, PHP and JavaScript. Not that it's much at all. ;)

Thanks to who ever edited out my obsolete links.

You'd edit photo.tpl. I don't know how much of that code is still valid.

One of these days when I create my own theme, this will be one of the features of it ;)

Can't see that this is Solved, as when I use that code, my gallery breaks, it won't show the picture at all.. any updates would be great...

I believe the migration from phpbb reformatted most of the brackets used in scripts posted earlier on. Sad to say, this rendered most of the useful scripts as plain gibberish (unless someone has the time and effort to slowly decipher what those &#123, &lt or &gt means).

So if someone still has a functional copy of the patched files, do consider posting it up. Thanks.

Swordfish, there is a "how to" page and a "user contribs" section on the codex:
http://codex.gallery2.org/index.php/Gallery2:How_Tos

http://codex.gallery2.org/index.php/Gallery2:UserContributions (check out the Mods/Patches) section

Feel free to add anything you like

Great to hear that! Thanks for letting me know.

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live [url=href="http://photos.kevinnehls.com]here[/url]

I modified it even a bit more to make the fullsize image show up using the lightbox javascript effects.

Just change

To

In the patch mentioned above, and add lightbox javascripts and css to theme.tpl.

For a demo see
http://bhaskarvk.info/gallery/wildlife/birds/macaws/img_3983.jpg.html

Click on the image to see the lightbox effect.

What is the version of your G2 install, can you provide a link to it? I'll double check that code with 2.1.1

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

Ah, yes, just use Notepad and try it again with. I've not used Nvu to edit Gallery template files, but what little I have used of Nvu it has completely reformated my into an unreadable mess.

Just looked at the file. Yep, Nvu messed the code up. Get a clean copy of photo.tpl, hopefully you backed it up before changing it. Then make the edits in Notepad.

I see every where Nvu saw:
{g->

It replaced it with:
{g>}

Along with some other similar messiness like "[code] and changing this [code]{g->url to this %7Bg-%3Eurl%20
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

That looks about right, make sure you clear the template cache in Site Admin > Maintenance > Delete template cache.

One thing to note is that it appears this functionality has made it into the core of Gallery. I'm not running a current release but a newer code base checked out from Subversion (SVN) and this functionality is there without me having to have made any changes. So this functionality will most likely be in the next release of G2.

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

If you still have the "{else}
{$smarty.capture.fallback}" code just below the modified section, and you still have the {capture name="fallback"} section above, then you should see the download link for these.

rewrite the logic that assigns the nextIndex value in the code posted above

OK I replaced this codebelow in the Classic Template:

if ($image.viewInline)}
if isset($theme.photoFrame)}
g->container type="imageframe.ImageFrame" frame=$theme.photoFrame
width=$image.width height=$image.height}
g->image id="%ID%" item=$theme.item image=$image
fallback=$smarty.capture.fallback class="%CLASS%"}
{/g->container}
{else}
{g->image item=$theme.item image=$image fallback=$smarty.capture.fallback}
{/if}
{else}
{$smarty.capture.fallback}
{/if}

With this code that has been posted here:

{if ($image.viewInline)}
{if count($theme.imageViews) > 1}
{if $theme.imageViewsIndex==0}
{assign var="nextIndex" value=1}
{elseif $theme.imageViewsIndex==count($theme.imageViews)-1}
{assign var="nextIndex" value=0}
{else}
{assign var="nextIndex" value=$theme.imageViewsIndex+1}
{/if}
{if isset($theme.photoFrame)}
{g->container type="imageframe.ImageFrame" frame=$theme.photoFrame}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$theme.item.id`"
arg3="imageViewsIndex=`$nextIndex`"}">
{g->image id="%ID%" item=$theme.item image=$image fallback=$smarty.capture.fallback class="%CLASS%"}
</a>
{/g->container}
{else}
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$theme.item.id`"
arg3="imageViewsIndex=`$nextIndex`"}">
{g->image item=$theme.item image=$image fallback=$smarty.capture.fallback}
</a>
{/if}
{else}
{if isset($theme.photoFrame)}
{g->container type="imageframe.ImageFrame" frame=$theme.photoFrame}
{g->image id="%ID%" item=$theme.item image=$image fallback=$smarty.capture.fallback class="%CLASS%"}
{/g->container}
{else}
{g->image item=$theme.item image=$image fallback=$smarty.capture.fallback}
{/if}
{/if}

What happened is that photos are no longer displayed. Any ideas why?

Peace.

~*~ I am an hot blooded Italian, I never get upset... I may get real pissed... but never upset ~*~