COMMUNITY FORUM

Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

[Solved] Thumbnail Alignment

Start
Prev
1
Next
End

Thomas Harrison
Topic Author
Offline
New Member

15 years 3 months ago - 15 years 2 months ago #27659 by Thomas Harrison

[Solved] Thumbnail Alignment was created by Thomas Harrison

I have a thumbnail alignment where the viewport height & width is not proportial with the actual image. I would like for the thumbnail to display the left most portion (left aligned) of the image however it is currently displaying the center (center aligned) of the image. This would have the visual effect of displaying the picture in the thumbnail but the picture and text in the full display.

Site: www.vncsales.com
user: webuser
password: vncwebuser
Page: www.vncsales.com/index.php?option=com_content&view=article&id=4&Itemid=6

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 3 months ago #27660 by Yiota

Replied by Yiota on topic Re: Thumbnail Alignment

To change the position of the thumbnail you should go to the CSS file of the plugin, find the following

li.sig-block a.sig-link img.sig-image, li.sig-block a.sig-link:hover img.sig-image and where it says background-position:50% 50%; change it to 0 0;, which would mean that it will show the thumbnail from top left corner and not center as it was.

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 3 months ago #27661 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail Alignment

It works when i hover over the picture but they are offset in normal display mode.

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 3 months ago #27662 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail Alignment

Can you also tell me how to "zoom in" the thumbnail?

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 3 months ago #27663 by Yiota

Replied by Yiota on topic Re: Thumbnail Alignment

I'm afraid that you can't do that. It depends on the size you have set for the thumbnails but it can't be 2 sizes at once. You see the thumbnail size creates dynamically all the outer containers size and if you change the size of it, the size of the containers will change also, so as you see it can't be done. Unless not without modifying its functionality.

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 3 months ago #27664 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail Alignment

What about the earlier post "It works when i hover over the picture but they are offset in normal display mode." Do you have any ideas on that?

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 3 months ago #27665 by Yiota

Replied by Yiota on topic Re: Thumbnail Alignment

You have this class:

.art-article img, img.art-article {
border:1px solid #AAA892;
margin:1em;
}

that causes the problem.

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 3 months ago #27666 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail Alignment

I can't find the code you are referencing.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 2 months ago #27667 by Yiota

Replied by Yiota on topic Re: Thumbnail Alignment

It's inside:
www.vncsales.com/templates/modifiedtemplate/css/template.css
on line 735.

It's at this block:

/* Start images */
a img
{
	border: 0;
}

.art-article img, img.art-article
{
	border: solid 1px #AAA892;
	margin: 1em;
}

.art-metadata-icons img
{
	border: none;
	vertical-align: middle;
	margin:2px;
}
/* Finish images */

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 2 months ago #27668 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail Alignment

I changed my jw_sigpro\default\template.css back to reflect

li.sig-block a.sig-link:hover img.sig-image {
background-position:50% 50%; background-repeat:no-repeat; border:medium none; 
display:block; height:100%; margin:0; padding:0; width:100%; }

instead of

li.sig-block a.sig-link:hover img.sig-image {
background-position:0 0; background-repeat:no-repeat; border:medium none; display:block;
height:100%; margin:0; padding:0; width:100%; }

Everthing started displaying correctly except my thumbnails were centered of course. Then I reapplied the

li.sig-block a.sig-link:hover img.sig-image {
background-position:0 0; background-repeat:no-repeat; border:medium none; display:block;
height:100%; margin:0; padding:0; width:100%; }

It automagically started working again. I'm not sure what happened there. I didn't have to make any changes to the www.vncsales.com/templates/modifiedtemplate/css/template.css file.

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End