Ren'Py Gallery pagination issue

Deleted member 416612 · Nov 27, 2018

Hello fellow travelers,

To figure out with the gallery, I've been enchanting, going on a crusade and stuff like that only to stop when I took an arrow to the knee. And that arrow is this thing going on and on (I've posted the code underneath the screenshot).

Le code du la vie de dios:

I've cut down to one image to test if anything will change but it doesn't =))

#CG Gallery

Code:

init-1:
    image bg sc01 = "gallery/Memory_curch.jpg"


init python:
    #Galleries settings - start
    #list the CG gallery images here:
    gallery_cg_items = ["bg sc01"]
    #how many rows and columns in the gallery screens?
    gal_rows = 5
    gal_cols = 5
    #thumbnail size in pixels:
    thumbnail_x = 75
    thumbnail_y = 75
    #the setting above will work well with 4:3 screen ratio. Make sure to adjust it, if your are using 16:9 (such as 267x150) or something else.
    #Galleries settings - end

    gal_cells = gal_rows * gal_cols
    g_cg = Gallery()
    for gal_item in gallery_cg_items:
        g_cg.button(gal_item + " butt")
        g_cg.image(gal_item)
        g_cg.unlock(gal_item)
    g_cg.transition = fade
    cg_page=0

init +1 python:
    #Here we create the thumbnails. We use a special "locked" image for CGs to prevent spoilers.
    for gal_item in gallery_cg_items:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))

screen cg_gallery():
    #tag menu
    #use game_menu(_("Image Gallery"), scroll="viewport"):
    #background "bg3.jpg"
        modal True
        frame:

            background "bg3.jpg"
                #frame:


            grid gal_cols gal_rows:
                spacing 35
                $ i = 0
                $ next_cg_page = cg_page + 1
                if next_cg_page > int(len(gallery_cg_items)/gal_cells):
                    $ next_cg_page = 0
                for gal_item in gallery_cg_items:
                    $ i += 1
                    if i <= (cg_page+1)*gal_cells and i>cg_page*gal_cells:
                        add g_cg.make_button(gal_item + " butt", gal_item + " butt", im.Scale("gallery/gallery_locked.png", thumbnail_x, thumbnail_y), xalign=0.5, yalign=0.5, idle_border=None, background=None, bottom_margin=0)
                for j in range(i, (cg_page+1)*gal_cells): #we need this to fully fill the grid
                    null
            hbox:
                if len(gallery_cg_items)>gal_cells:
                    textbutton _("Next Page") action [SetVariable('cg_page', next_cg_page), ShowMenu("cg_gallery")]
                    xalign 0.1
                    yalign 1.0
            #frame:
                #xpos 20
                #ypos 20


            imagebutton:
                         xalign 0.0
                         yalign 1.0
                         idle "gui/back_button_idle.png"
                         hover "gui/back_button_hover.png"
                         action Hide( "cg_gallery" )

Le Problemas:
The problem is, even though I've cut down to one image source, it still displays in full screen, the image 1 of 2 locked.
If I put a button and image it will still display like this in full screen.

Can anyone help me with this "arrow" into the knee so I could resume my great adventurer career?

)

8873672413434 · Nov 28, 2018

Is the JPG save actually spelt curch? As if it's spealt church. And you have done curch.jpg. That will be your issue.

Deleted member 416612 · Nov 28, 2018

Obsidu said:
Is the JPG save actually spelt curch? As if it's spealt church. And you have done curch.jpg. That will be your issue.

It is actually called that. A small naming mistake.

I forgot to mention that for the unlock, I've used the $ g_cg.image("b1") line. The issue is still present

Deleted member 416612 · Nov 28, 2018

Apparently, I managed to call only the image I desired but now the issue is that if I have to images or more when unlocked, they will be under the same button not one button - one image. It is one button - all the images.

Rich · Nov 28, 2018

It would help if you would embed your code inside "code" tags - that will preserve all the indentation and such.

I don't know what version of Renpy you're using, but it doesn't look to me like the way you're calling make_button matches the documentation at

You must be registered to see the links

The documentation shows only two unnamed arguments (name and unlocked), with the rest of the arguments being named. It looks like you're passing in three unnamed arguments. (Unless I'm misreading the code.)

Deleted member 416612 · Nov 28, 2018

Rich said:
It would help if you would embed your code inside "code" tags - that will preserve all the indentation and such.

I don't know what version of Renpy you're using, but it doesn't look to me like the way you're calling make_button matches the documentation at
You must be registered to see the links
The documentation shows only two unnamed arguments (name and unlocked), with the rest of the arguments being named. It looks like you're passing in three unnamed arguments. (Unless I'm misreading the code.)

Hi mate,

First, thank you for the feedback.
I am using the latest Renpy version. The code is adapted for this game and I found it on a different source.
The problem is that I don't know how to define an image to a button. For example, to have image 1 to button 1 and image 2 to button 2. Is like this?

g.button("1")
g.image("1")
g.unlock("1")

g.button("2")
g.image("2")
g.unlock("2")

JohnDupont · Nov 28, 2018

APD13 said:
Hi mate,

First, thank you for the feedback.
I am using the latest Renpy version. The code is adapted for this game and I found it on a different source.
The problem is that I don't know how to define an image to a button. For example, to have image 1 to button 1 and image 2 to button 2. Is like this?

g.button("1")
g.image("1")
g.unlock("1")

g.button("2")
g.image("2")
g.unlock("2")

Isn't it done automatically by:

Code:

    for gal_item in gallery_cg_items:
        g_cg.button(gal_item + " butt")
        g_cg.image(gal_item)
        g_cg.unlock(gal_item)
        g_cg.transition = fade

Deleted member 416612 · Nov 28, 2018

JohnDupont said:

Isn't it done automatically by:

Code:

    for gal_item in gallery_cg_items:
        g_cg.button(gal_item + " butt")
        g_cg.image(gal_item)
        g_cg.unlock(gal_item)
        g_cg.transition = fade

So with this, I predefine what happens with the images I want into the gallery. So how do that in the script after the Start Label?

JohnDupont · Nov 29, 2018

APD13 said:
So with this, I predefine what happens with the images I want into the gallery. So how do that in the script after the Start Label?

No comprendo.

Deleted member 416612 · Nov 29, 2018

JohnDupont said:
No comprendo.

Never mind. I've managed to figure it out on how to use the initial code. Thank you for the support

Deleted member 416612 · Nov 29, 2018

For tracking purpose, if there will be someone not sure how to use the code given in the Ren'py documentation regarding the gallery:

Gallery_Screen.rpy:
#(This code is for having a button instead of the usual text, to exit the screen)

Code:

init python:
    config.overlay_screens.append( "myButtonGallery" )

default activegallery = True

screen myButtonGallery:

    if activegallery is True:
         imagebutton:
              idle "gui/status_button.png"
              hover "gui/status_button_hover.png"
              xalign 1.0
              yalign 0.79
              action Show( "cg_gallery" )

#(Here you define the gallery screen.)

Code:

screen cg_gallery():
            modal True
            frame:

                background "bg3.jpg"

            imagebutton:
                         xalign 0.0
                         yalign 1.0
                         idle "gui/back_button_idle.png"
                         hover "gui/back_button_hover.png"
                         action Hide( "cg_gallery" )

            #(Here you define the button and where the image source will be. Also the alignment is necessary)   
            add g_cg.make_button("button_1_thumbnail", "gui/button-icon.png", xalign=0.5, yalign=0.5)
            add g_cg.make_button("button_2_thumbnail", "gui/button-icon.png", xalign=0.6, yalign=0.6)
           

           
            imagebutton:
                             xalign 0.0
                             yalign 1.0
                             idle "gui/back_button_idle.png"
                             hover "gui/back_button_hover.png"
                             action Hide( "cg_gallery" )

Gallery_Setup.rpy:

Code:

init python:
    #(Here you create the object named c_cg which is a gallery .)
    g_cg = Gallery()
    #how many rows and columns in the gallery screens?
    gal_rows = 5
    gal_cols = 5
    #thumbnail size in pixels:
    thumbnail_x = 75
    thumbnail_y = 75
    #the setting above will work well with 4:3 screen ratio. Make sure to adjust it, if you are using 16:9 (such as 267x150) or something else.
    #Galleries settings - end

    gal_cells = gal_rows * gal_cols
   
   #(Here you define the buttons and the images which you will be using in the script of the game. It must be defined here for usage in the script)
    g_cg.button("button_1_thumbnail")
    g_cg.unlock_image("gallery/Memory_curch.jpg")

    g_cg.button("button_2_thumbnail")
    g_cg.unlock_image("gallery/thumb_beach.jpg")

script.rpy:

Code:

"something"

$ g_cg.button("button_1_thumbnai")
$ g_cg.image("gallery/Memory_curch.jpg")


"something"

Now, if you want the same button to contain more then one image, you will do something like this:

$ g_cg.button("button_1_thumbnai")
$ g_cg.image("gallery/Memory_curch.jpg")
$ g_cg.image("gallery/another_picture")

But if you want this, you will have to make sure the same line is in the setup of the gallery if not and you want one the gallery to have one button with one image (as I wanted) you will continue with implementing the next button with the sourced image.

$ g_cg.button("button_2_thumbnai")
$ g_cg.image("gallery/thumb_beach.jpg")

And you continue with another button and another image.
If there are any suggestion to this, then I am happy to observe.

Thank you!

anne O'nymous · Dec 3, 2018

APD13 said:
For tracking purpose, if there will be someone not sure how to use the code given in the Ren'py documentation regarding the gallery:

Then he will still not be sure how to use it since you didn't listened to @Rich advise. Without the code tag, your code is just unusable. In Python, and so in Ren'py, blocks are delimited by the indentation... that isn't shown here.

By example, is it :

Code:

screen cg_gallery():
    modal True
    frame:
        background "bg3.jpg"

        imagebutton:
            xalign 0.0
            [...]

        add g_cg.make_button [...]
        add g_cg.make_button [...]

        imagebutton: 
            [...]

or is it :

Code:

screen cg_gallery():
    modal True
    frame:
        background "bg3.jpg"

    imagebutton:
        xalign 0.0
        [...]

    add g_cg.make_button [...]
    add g_cg.make_button [...]

    imagebutton: 
        [...]

or perhaps it is :

Code:

screen cg_gallery():
    modal True
    frame:
        background "bg3.jpg"

        imagebutton:
            xalign 0.0
            [...]

    add g_cg.make_button [...]
    add g_cg.make_button [...]

    imagebutton: 
        [...]

Nobody know, except you.

Deleted member 416612 · Dec 3, 2018

anne O'nymous said:
Then he will still not be sure how to use it since you didn't listened to @Rich advise. Without the code tag, your code is just unusable. In Python, and so in Ren'py, blocks are delimited by the indentation... that isn't shown here.

By example, is it :

Code:

screen cg_gallery(): modal True frame: background "bg3.jpg" imagebutton: xalign 0.0 [...] add g_cg.make_button [...] add g_cg.make_button [...] imagebutton: [...]

or is it :

Code:

screen cg_gallery(): modal True frame: background "bg3.jpg" imagebutton: xalign 0.0 [...] add g_cg.make_button [...] add g_cg.make_button [...] imagebutton: [...]

or perhaps it is :

Code:

screen cg_gallery(): modal True frame: background "bg3.jpg" imagebutton: xalign 0.0 [...] add g_cg.make_button [...] add g_cg.make_button [...] imagebutton: [...]

Nobody know, except you.

Hi @anne O'nymous , glad you are back.
If you are saying that I started the thread with one code and ended up with another, well that is true. I tried in the end, to follow the code from the documentation and not the one I found on another source (the first code). The last one, for which you replied, is the one that worked for me.
For the 'not listening part' it is somehow tricky as I don't have so much experience in coding and I am trying to figure out all the things that I need to make the desired design. The fact is that part of the Ren'py documentation is easy to understand and some part is not (from the official site). When there is an issue, I usually google it if I can't find it on the forum and that is when you find the question with different answers. So if I started with something and then I changed it, it is because I am trying to figure it out and the last post in this thread was the one that worked for me. So for @Rich advice maybe it was my bad (sorry) but I only was trying to sort out the whole information regarding this issue.

anne O'nymous · Dec 3, 2018

APD13 said:
If you are saying that I started the thread with one code and ended up with another, [...]

No, I was saying that the code in your message aren't understandable because of the lack of indentation.
This :
screen cg_gallery():
modal True
frame:
background "bg3.jpg"

imagebutton:
xalign 0.0
[...]

add g_cg.make_button [...]
add g_cg.make_button [...]

imagebutton:
[...]

can be interpreted in too many different way when someone try to put back the indentation. And each way will have a different result.

So, please, when you write some code, put it between [code] and [/code]. It will look like this :

Code:

screen cg_gallery():
    modal True
    frame:
        background "bg3.jpg"

        imagebutton:
            xalign 0.0
            [...]

    add g_cg.make_button [...]
    add g_cg.make_button [...]

    imagebutton:
        [...]

And so be understandable by everyone.

Deleted member 416612 · Dec 3, 2018

anne O'nymous said:
No, I was saying that the code in your message aren't understandable because of the lack of indentation.
This :
screen cg_gallery():
modal True
frame:
background "bg3.jpg"

imagebutton:
xalign 0.0
[...]

add g_cg.make_button [...]
add g_cg.make_button [...]

imagebutton:
[...]

can be interpreted in too many different way when someone try to put back the indentation. And each way will have a different result.

So, please, when you write some code, put it between [code] and [/code]. It will look like this :

Code:

screen cg_gallery(): modal True frame: background "bg3.jpg" imagebutton: xalign 0.0 [...] add g_cg.make_button [...] add g_cg.make_button [...] imagebutton: [...]

And so be understandable by everyone.

Ok, cool. My bad. I owe you another beer. Alcoholism is upon us =))

Deleted member 416612 · Dec 3, 2018

I've done the changes. Good advice

Ren'Py Gallery pagination issue

Deleted member 416612

The 'landlord'

8873672413434

I Steal Your Cats

Deleted member 416612

The 'landlord'

Deleted member 416612

The 'landlord'

Rich

Old Fart

Deleted member 416612

The 'landlord'

JohnDupont

Active Member

Deleted member 416612

The 'landlord'

JohnDupont

Active Member

Deleted member 416612

The 'landlord'

Deleted member 416612

The 'landlord'

anne O'nymous

I'm not grumpy, I'm just coded that way.

Deleted member 416612

The 'landlord'

anne O'nymous

I'm not grumpy, I'm just coded that way.

Deleted member 416612

The 'landlord'

Deleted member 416612

The 'landlord'