Joomla Templates Club 406,261 posts

[zviadi Friend zviadiJoin date: June 2012Posts: 88Downloads:8Uploads:26]

#884544

How to crop thumbnails in order to make them square ?on featured (main) news? I need to show them as square on front page. Image itself should not be square.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#884868

Hi @zviadi,

Do you mean this image in our demo site? http://prntscr.com/a49zmu

This is leading item in featured blog of homepage, if you know Bootstrap grid system – 12 grids (which built with T3 framework), this leading item is divided in this way: 8 grids in leading main and 4 grids in leading sidebar: http://prntscr.com/a4a0k5

With being said, if you reduce the width of leading image, there will be space between leading main and leading sidebar part. I think you can change the number of grids so that these 2 parts have 6 grids for both.

To do this, you open the file: ROOT/templates/ja_magz_ii/html/com_content/featured/default.php

and change to col-md-6 as this screenshot: http://prntscr.com/a4a1hh

In case that you still want to change dimension of leading image, you can open the css file: ROOT/templages/ja_magz_ii/css/custom.css (create this file if it doesn’t exist)

and add this css rule:

.t3-content .blog-featured .items-leading .item-image img {
     height: 440px; 
     width: 440px; 
}

Then change the width, height to the value which suits your need.

[zviadi Friend zviadiJoin date: June 2012Posts: 88Downloads:8Uploads:26]

#885776

No, I mean small images of the featured articles (which are on right side of the main story).
Look at our website: http://finchannel.com/demo/

Square images should be for folliwing articles :

"Tbilisi New Year123"
"Hudson Witness Stanley Laugh"
"Early impressions: USC, UCLA might be for real, SEC not so much"

I dont want to upload square images – I just need to show them on sidebar as square.

P.S> and THANKS for your great support.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#885941

You can define the dimension for image in that block by using this css:

.leading-sidebar .item-image img {
    width: 80px;
    height: 80px;
}

into the file: ROOT/ja_magz_ii/css/custom.css (create this file if it doesn’t exist).

[zviadi Friend zviadiJoin date: June 2012Posts: 88Downloads:8Uploads:26]

#886402

the code you provided changed proportion of the image, and did not cropped image.
my aim is to show image as square. original image itself should remain the same

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#886489

What is original dimension of image? and can you send screenshot of how it should be?

[zviadi Friend zviadiJoin date: June 2012Posts: 88Downloads:8Uploads:26]

#886816

should be like this (attached image) Square images. But when you click on article, it should be as in standard template.
This means thumbnails in sidebar news (feature items) should visually crop images to show them as square – BUT keeping visual proportion.

Your code (provided earlier) just changed image dimension.

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#888133

Try opening ‘custom.css’ file as I mentioned above and add this code:

.leading-sidebar .item-image {
    height: 76px;
}

.leading-sidebar .item-image img {
  height: 71px;
}

[Author]

Posts