How to center images in the slideshow

olidel

Joined: 2005-05-14
Posts: 9
Posted: Sat, 2005-05-14 22:00

Hello,

I would like to know how I can center the images in the slideshow. I tried different solution with css files and also with the tpl files of the matric theme but I was not successful.

I would like to know how to center an image when you display a single image in an album.

Thanks for your help

P.S. : I'm using G2 of course. The version is the beta 2 "Holy hand grenade".

OD
 
G2Newbie

Joined: 2005-05-18
Posts: 11
Posted: Tue, 2005-05-24 14:30
olidel wrote:
Hello,

I would like to know how I can center the images in the slideshow. I tried different solution with css files and also with the tpl files of the matric theme but I was not successful.

I would like to know how to center an image when you display a single image in an album.

Thanks for your help

P.S. : I'm using G2 of course. The version is the beta 2 "Holy hand grenade".

OD

Hello there,

Has somebody a clue how to do this! I am also interested in the solutions!

Thanks...

NewBie
 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2005-05-24 14:49

Slideshow: make a local Slideshow.tpl that changes:
<div class="gbItemImage">
to:
<div class="gbItemImage" style="text-align: center">

matrix or classic layout, singleBody.tpl:
<div class="gbBlock">
to:
<div class="gbBlock" style="text-align: center">

The 2nd only works w/o imageframes.. let me know if you'd like to center with imageframes.. i'll make a little change so you can do this with css.
 
G2Newbie

Joined: 2005-05-18
Posts: 11
Posted: Tue, 2005-05-24 15:51
mindless wrote:
Slideshow: make a local Slideshow.tpl that changes:
<div class="gbItemImage">
to:
<div class="gbItemImage" style="text-align: center">

matrix or classic layout, singleBody.tpl:
<div class="gbBlock">
to:
<div class="gbBlock" style="text-align: center">

The 2nd only works w/o imageframes.. let me know if you'd like to center with imageframes.. i'll make a little change so you can do this with css.

Thx mindless...

Cool it works perfect for me..
The answer to your questions! It would be cool if that is possible..

Regards,

NewBie
 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2005-05-24 16:28

Get tomorrow's nightly snapshot and you can center images in matrix/classic with a local layout.css that adds this:

#gsImageView {
  text-align: center;
}
#gsImageView table {
  margin: auto;
}
 
olidel

Joined: 2005-05-14
Posts: 9
Posted: Sat, 2005-07-02 23:05

Thanks mindless for your answer.

I have to add a few things. My G2 installation was done first with the "holy hand grenade" and after that I upgraded to the "bingo" version and to your CVS version. After this different upgrades, your css modification didn't work. However your first suggestion was working. For other reasons I decide to do a clean install from scratch and then your css file started to work. I must also say that although I was using a fresh install I wanted to reuse the different personalized files that I had previously created in "local" directories. Each time that I tried to use this older files (tpl, css files) the gallery installation started to behave not normally. So, I had to re-create all my personalized files from the orignal files in the gallery CVS version.

Thanks again.

O.D.
 
sparkey2006
sparkey2006's picture

Joined: 2006-05-16
Posts: 24
Posted: Fri, 2006-08-18 21:24

when you say that you should place a local folder do you mean in the same directory as the file you edit of do you mean in one single file within gallery named local? Thanks Sparkey.
 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Sat, 2006-08-19 07:07

there are instructions in every tpl file.. make a directory called local in the same directory as the file.
 
recumbent
recumbent's picture

Joined: 2007-12-18
Posts: 1
Posted: Tue, 2007-12-18 13:35

It took me a while to find this, so I thought I'd share. I was trying to center images with a drop shadow http://www.alistapart.com/articles/cssdropshadows/, but because the drop shadow requires the <div> to be float:left it just wouldn't work (neither of the solutions above worked for me). But I eventually found the answer. If you place the image <div> inside another <div> with CSS like this:

#middle {
display: table;
padding: 0;
margin: 0 auto;
white-space: nowrap;
}

It will centre the float:left element contained within it. My template now looks like this:

<div id="middle">
<div id="gallery-photo">
<img id="slide" alt="" src="" name="slide">
</div>
</div>

Hope that helps.
 
ghibliboy

Joined: 2008-01-02
Posts: 1
Posted: Wed, 2008-01-02 14:49

this is really great tip, thanks guys!
 
gk4123

Joined: 2007-09-14
Posts: 1
Posted: Fri, 2008-01-04 21:36

Hi,

I am also trying to center my photos in the slideshow. But i couldn't understand what is said here (its my fault only, please bear with me as i don't know anything about CSS and i am pretty new to webhosting).

Do i need to create a file called Slideshow.tpl and place it in "themes/carbon/templates" folder as the templates folder is having the .tpl files. Please explain.

Thanks
 
wdympcf

Joined: 2007-10-10
Posts: 4
Posted: Fri, 2008-02-29 03:29
Quote:
Slideshow: make a local Slideshow.tpl that changes:
<div class="gbItemImage">
to:
<div class="gbItemImage" style="text-align: center">

matrix or classic layout, singleBody.tpl:
<div class="gbBlock">
to:
<div class="gbBlock" style="text-align: center">

The 2nd only works w/o imageframes.. let me know if you'd like to center with imageframes.. i'll make a little change so you can do this with css.

I'm not sure if this tip is deprecated in favour of css by now, but I just tried it as mindless originally posted it and it works perfectly on my Gallery installation. The only thing that I would like to change is to have the image centered vertically as well. Can someone indicate how I should go about doing this?
 
4rtnox_

Joined: 2008-03-05
Posts: 3
Posted: Wed, 2008-05-07 16:12
Quote:

I had the same question but I figured it out. Change in the photo.tpl
<div id="gsImageView" class="gbBlock">
to
<div id="gsImageView" class="gbBlock" style="text-align: center">

that should work.

 
ch_masson

Joined: 2008-05-21
Posts: 26
Posted: Wed, 2008-05-21 23:17

I did what mindless recommended in his first scetion which is
Slideshow: make a local Slideshow.tpl that changes:
<div class="gbItemImage">
to:
<div class="gbItemImage" style="text-align: center">

It did not change anything. Can you please be very specific as to what else I may need to change? I use the carbon theme.
Thank you so much for your prompt reply
 
tombrusell

Joined: 2008-05-23
Posts: 3
Posted: Thu, 2008-05-29 07:26

Just add below code in theme.css

Quote:
.gbItemImage {
text-align: center;
}