Easy Peasy 2 Gallery issue with Andreas00 template

I was running the Andreas00 template and things were good until I installed the Easy Peasy 2 Gallery and show it on one of my pages. I was using the template in the 2-column mode. It forced my gallery to appear way down the page below the level of my menu which is on the left side. Clicking a thumbnail will open the image to the larger size and it will be displayed at the top of the page in what I consider a normal position. If I change to the 1-column view, then the Gallery appears in the normal position (at the top of the frame/div) but then I have no navigation menu.

Any ideas how to fix this? I tried removing sections of the template to see if I could isolate a part that was causing it, but I could not resolve anything. Are there any positioning tags I need to tweak in the gallery’s CSS. I am fairly new to CSS and Php.
THanks,
Roger

I figured it out. Read a good tutorial on CSS, read some of the documentation on this site.
Here’s what I did:
I took the snippet that was calling the gallery:

[[PhotoGallery?galleryid=`1`]]

I put it in my own new Chunk:

<div ID="RogPos">
<table border="1"><tr><td>[[PhotoGallery?galleryid=`1`]]</td></tr></table>
</div>

I added my CSS ID selector to the template’s CSS (wasn’t sure if it needed to go here or in the Gallery Css):

#RogPos {position:absolute; left:100;top:100; z-Index:0}

Then finally called the Chunk from my page:

{{RogerPosGallery}}

I realize this may not be any big deal to you, but I am glad that I am learning this system!

cool!

Thanks for adding back what you did, I’m sure that somebody will find it useful.

SUGGESTION:
could this be added to a book of hints and tips on the main site?

Quote from: Carsten at Jul 25, 2006, 11:53 PM

SUGGESTION:
could this be added to a book of hints and tips on the main site?

Great idea and can’t wait for you to write it!

Quote from: RogerBaker at Jul 25, 2006, 08:50 PM

I put it in my own new Chunk:

<div ID="RogPos">
<table border="1"><tr><td>[[PhotoGallery?galleryid=`1`]]</td></tr></table>
</div>

I added my CSS ID selector to the template’s CSS (wasn’t sure if it needed to go here or in the Gallery Css):

#RogPos {position:absolute; left:100;top:100; z-Index:0}

Then finally called the Chunk from my page:

{{RogerPosGallery}}

I realize this may not be any big deal to you, but I am glad that I am learning this system!

As you are learning, would you care to enlighten the ignorant amongst us as to what have you accomplished here? You have done 4 things, put the call to Gallery inside a one-cell table, put the table inside a DIV, styled the DIV to have an absolute position and then put the DIV specification inside a chunk.

Correct me if I am wrong but chunks are basically macro expansions (i.e. textual substitutions) so use of a chunk has no semantic significance. I.e. the same thing happens if I place the text inline or put the text in a chunk and then include the chunk.

I know *nothing* about MODx, haven’t even built a MODx site yet but I do know a bit about XHTML and CSS. I strongly suspect the table is irrelevant and the code would work without it though you may want to place a border around the div. You could also keep all code in one place by placing the CSS inline in the DIV element. I also suspect the chunk is unnecessary and that the code would work if it was inline in your HTML.

Therefore this should be identical to your result and need not necessarily be in a chunk:

<div style="position:absolute; left:100;top:100; z-Index:0 border-width: 1px">
[[PhotoGallery?galleryid=`1`]]
</div>

Of course there may be good stying reasons for externalising the CSS but my example is more compact. If the table (or worse the chunk) *is* necessary then I would be really keen to understand what is going on.

Ed

Making it a chunk allows you to put it on multiple pages if so desired. That way you can update one instance (the chunk) and have the whole site update.

I wasn’t really thinking about adding it on multiple pages, but sure, you could.
When reading about and installing the Gallery, I learned you show it on your page by slapping the following in your visual page editor:
[[PhotoGallery?galleryid=`1`]]
It worked, but I did not realize right away that I was using a snippet. It just worked (my gallery appeared on my page), but it was postiioned way to far down the page and you had to scroll down to see it. You might have not even seen the gallery if your screen size wasn’t big enough or you didn’t notice the scroll bars on the browser.

I then tried to read all the template files and the gallery files to determine if there was any positioning info. It looked quite perplexing. I tried a few things and nothing worked, so I figured I need to learn how things are working.

So I figured, I got this text that I typed into the top of my editor (it’s a snippet call, but it’s still text), but how would I force it to go somewhere else I wanted when something was causing it to appear somewhere else? I remembered from my CSS tutorial on http://www.echoecho.com/cssintroduction.htm ( specifically http://www.echoecho.com/cssselectors03.htm ) that I could position items at exact locations. That page showed me the code, so I was thinking about how I would implement it.

In the MODX documentation intro to terminology section I read : "Chunks - these are re-usable pieces of HTML content". That is what I wanted to do. Put some html on my page. At the time, I did not care about the ’re-usable’ part.

I might start writing some tips for beginners like me as I overcome my obstacles. I think I posted another question recently and still the answer some one gave did not help due to some other knowledge that was assumed or overlooked.