We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Thumbnail position

    • 14779
    • 256 Posts
    joshlfisher Reply #1, 18 years, 9 months ago
    how do I center the thumbnails when using the call:

    [!MaxiGallery? &display=`childgalleries`!]

    See here:

    http://throughmylensphotography.com/site/albums/portraits.html
      PM me to find out how you can get a FREE ipad 2!
      • 18830
      • 161 Posts
      Mazso Reply #2, 18 years, 9 months ago
      Your need some HTML/CSS. Here are some exemples/suggestions to start with:

      http://www.w3.org/Style/Examples/007/center#vertical


      http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

      But be aware to have some trouble to get it working smoothly in IE.

        • 18830
        • 161 Posts
        Mazso Reply #3, 18 years, 9 months ago
        Well, just stumbled upon another solution.

        MaxiGallery has an placeholder [+maxigallery.picture_height_thumb+]. This one you could use to generate an class for your picture or the piture´s container like this 

        class="thumb[+maxigallery.picture_height_thumb+]"


        and then style the container or the picture with CSS. Of course you can use this method only if there are only a defined number of possible heights.
          • 14779
          • 256 Posts
          joshlfisher Reply #4, 18 years, 9 months ago
          Thanks for the info Mazso, it put me on the right track (I think!)

          I looked at the MAxiGaller templates, and found galleryoutertpl.html, And I found this code:
          [+maxigallery.childgalleries:isnot=``:then=`
	<div class="childscontainer">
		<ul class="thumbs">
			[+maxigallery.childgalleries+]
		</ul>
	</div>
	
`+]


          So, to me I needed to find the CSS definitions for the class "childscontainer", and use CSS to center it horizontally on the page.

          I tried a bunch of things in the Maxigallery CSS, but I couldn’t budge those thumbnails. Could someone please help me out? All I want to do is get the thumbnails centered horizontally in the page.

            PM me to find out how you can get a FREE ipad 2!
            • 18830
            • 161 Posts
            Mazso Reply #5, 18 years, 9 months ago
            Just a quick answer because I´m in a hurry.

            Look at this code snippet (yes, I know, inline styling is bad wink .

            <div style="width:200px;height:200px;float:left">
<img style="display:block;height:100px;width:100px;margin:50px auto 0 auto" />	
</div>


            The container has defined width and height. Don´t forget to give it a float.

            The image must get a d"isplay:block" before you can center it. Use the first value of the margin-attribute to define the distance from the top. This is the value you have to change according to the height of your image. The both "auto"-values will center your image horizontally.

            Hope this will help, joshlfisher. And please: don´t use this code from the example, it is quick and dirty. Write CSS classes.

              • 14779
              • 256 Posts
              joshlfisher Reply #6, 18 years, 9 months ago
              Thanks again, Mazso, I found pretty much the same thing when Googling ’horizontal center CSS’.

              My problem is what elements should I style, and what current styles do I need to change in the maxigallery CSS? Right now, there is a class called childgalleries around all three thumbnails on the example page, and I’d like to style the galleries as cleanly as possible. I just don’t know which classes to style.
                PM me to find out how you can get a FREE ipad 2!
                • 23299
                • 1,161 Posts
                Photowebmax Reply #7, 18 years, 9 months ago
                Interesting thread.

                Is it possible to add a CSS class to the overall template that styles the galleries pages instead of digging down into the MaxiGallery CSS?
                  • 18830
                  • 161 Posts
                  Mazso Reply #8, 18 years, 9 months ago
                  Quote from: joshlfisher at Dec 21, 2007, 10:19 AM


                  My problem is what elements should I style, and what current styles do I need to change in the maxigallery CSS? 

                  <img src="/site/assets/galleries/92/tn_pa090117mod.jpg" height="[+maxigallery.picture_height_thumb+]" width="[+maxigallery.picture_width_thumb+]" class="thumbnail thumb_[+maxigallery.picture_height_thumb+]" alt="Go to gallery ->" />


                  Please don´t forget to set the height and the width auf the thumbnail.

                  The HTML-Code could be something like this:

                  <div>
    <div>
        <img .../>
     </div>
     <p>Caption</p>
</div>


                  Set the height an width of the outer and the inner div. Add an padding-top to the img according to the height of the image.

                  BTW: Throw out all those inline stylings and the none breaking spaces in your HTML code wink


                  Quote from: Photowebmax at Dec 21, 2007, 10:43 AM

                  Is it possible to add a CSS class to the overall template that styles the galleries pages instead of digging down into the MaxiGallery CSS?


                  Yes. Add an ID to the body tag and use the GetField snippet.

                  <body id="[[GetField? your_parameters]]">


                  So you need only one template and can style in differtent ways with help of the body´s ID.