Joomla Templates Club 406,261 posts

[gfmkeitel2 Friend gfmkeitel2Join date: December 2010Posts: 5Downloads:0Uploads:0 Thanks: 2]

#159806

Hi,

I installed the Community template and every time I use a front page or blog layout, it distorts my pictures. When I click to see the full article, it looks right again. Below is the link:

http://schneiderfamiliengeschichte.com/index.php?option=com_content&view=frontpage&Itemid=8

Is there a blog picture plugin or similar I forgot to activate? :((

Thanks!
Axel Schneider

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#375229

Yeah, annoying aint it. What is happening is some css is setting a fixed width for the images.

Remove the width setting below


div.article-image img {
background:none repeat scroll 0 0 #FFFFFF;
border:4px solid #EEECE8;
margin:0;
padding:1px;
width:95px;

}


And then use the JA Thumbnail plugin (get it from the teline iv template package) and use that to resize your images for the frontpage.

[gfmkeitel2 Friend gfmkeitel2Join date: December 2010Posts: 5Downloads:0Uploads:0 Thanks: 2]

#375260

Great tip!
Plus I removed another width setting under div.article-image, which did the trick.
Thank you!
🙂

[leighketchum Friend leighketchumJoin date: July 2010Posts: 16Downloads:1Uploads:2 Thanks: 9]

#376653

The reason your image distorts is that the CSS is setting only the width (95px). If you add the Height to the CSS, you will get the 95×95 image on the front page.
div.article-image img {
background:none repeat scroll 0 0 #FFFFFF;
border:4px solid #EEECE8;
margin:0;
padding:1px;
width:95px;
height: 95px;
}

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#376660

IMHO using width and height here is bad. I imagine some users will not bother to resize their images leading to big load times for what is in all essence a simple thumbnail. That is where the excellent JA Tumbnail plugin I mentioned earlier comes in. First time it sees an image it uses GD to resize that image to a user selected size and places it in a “resized” folder. The smaller image is then called on each load reducing your overheads and at the same time saving you the hassle of manually creating thumbs.

[leighketchum Friend leighketchumJoin date: July 2010Posts: 16Downloads:1Uploads:2 Thanks: 9]

#376661

Absolutely true, Phil and I prefer your method best. JA Thumbnail is an excellent plugin; one that everyone would do well to learn to use.

[dottorbonfy Friend dottorbonfyJoin date: April 2011Posts: 49Downloads:0Uploads:4 Thanks: 21]

#389295

Ok for the image distortion but i ask another question.
Why the images into the frontpage is not correctly inserted with the floating text same as articles?
I hav an article with the first image is large 550px….then….i see at the left side the image at the 100% of the size and at the right a stretched column of the article text….not good for me…..someone help me about this question?

Thankyou

[dottorbonfy Friend dottorbonfyJoin date: April 2011Posts: 49Downloads:0Uploads:4 Thanks: 21]

#389306

Solved! Go to plugins/system/jat3/base-themes/default/css path and edit the Template.css file at the row 297-298 simple erase this two rows:

/* Article —*/
.article-content { overflow: hidden; }

And the text flow at your images….:laugh:

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#389307

Best to copy the css to your templates folder so it doesn’t get overwritten when you update your jat3 plugin.

[Author]

Posts