Autofocus align photo credit on vertical images

Image remains in the center coz it is centered with javascript ( think so !)

I not sure I get your intention with photo credit and vertical images !
maybe some one does.

I am playing myself with the theme for my website and maybe can help

Hello AxelYa! Thank you for your answer!

What I mean is: When you ad a horizontal featured image to a post and later preview or post it if you place your mouse over the image a photo credit/copyright message appears on the upper left side of the image.

If you do the same but instead you choose to ad a vertical image to your post you do not see the photo credit/copyright message. Because as you mentioned the image remain in the centre.

What I would like to know is, how to either move the image to the left or make the photo credit/copyright notice move to the centre.

Thank you in advance for your answers!

All the best!
H

If understand it correctly : the vertical image does not occupy the entire space and the credit is falls outside of the image. We are talking about single page not front page.

I gonna need to play with it. You better do it also as not much time I have.
Need to read carefully imagecenter javascript and css file(style.css).

Right now I can think of making the image float left or ! place photo credit some place else. It is easier to move the credit. Moving image can result in massive rebuilt of files, as it will affect the layout.

If you going to move the credit: in style.css locate the reference to the credit and try to change it properties. I can’t tell you specifically right now.

I was just thinking
If you print the credit on photo itself using photoshop or something

Hello AxelYa,

Exactly! ¨the vertical image does not occupy the entire space and the credit falls outside of the image′.

I agree, it is easier to place the photo credit somewhere else. I will try to fin out. However, all this css is new to me.

Thank you again for taking the time to respond!

regards,
H

I got it!

The line we need to edit is located in appearance, editor, Stylesheet, content. Do control or command find to find the words photo-credit.

The code looks like this:
#content .photo-credit {position:absolute;padding:16px;display:block;width:768px;height:100%;z-index:2;text-align:left;}

Change the word left to center. And that′s it. The photo credit moves to the center and can be used on vertical images.

Do you think there is a way to place it not in the upper center but the bottom center? What would be the code?

Regards,
H

One more thing!

Before it works you need to clear your browser′s cache and refresh the page.

position:absolute means that you place an object precisely.
for example you write : left:0; top:0; then it is in the top left corner with 0 coordinates. Give it bottom: 40px;left:340px; then it is at the bottom with coordinates 40;340 . Just play with it.
Changing text-align will give you rough placement

Thanks!

So what would the code look like?

I apologize for asking so many questions but I am new to all this ??

Thanks in advance!

add parametres left: …; top:…; with numerical coordinates in pixels
to the line you had altered. For the sake of the experiment put back original parameters for text-align

The best results for both horizontal and vertical are as follows:

#content .photo-credit {position:absolute;padding:16px;display:block;width:768px;height:100%;z-index:2;text-align:bottom;center:0px;top:495px;}
#content .photo-credit a {font-weight:600;}
#content .hentry:hover .photo-credit {display:block;}

For horizontal images is perfect as it shows at the bottom center. For vertical it shows at about 2 centimetres from the bottom center.

If anyone has any ideas on how to improve it for vertical images without affecting horizontals, please let me know.

Regards,
H