Joomla Templates Club 406,261 posts

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#200997

See http://res-sgi.globalprintmonitor.org/resources/technology

How can I adjust the size of these images in category blog view? Crop option like in JA Thumbnail plugin?
Also how can I get first full article images to align right?

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#547964

Do you want something like the attached image

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#547968

If so,Do this change

Go to this File: /templates/ja_biz/css/template.css

Replace this code


.blog .items-leading .leading .pull-left.article-image, .blog .items-row .item .pull-left.article-image { margin-right: 40px; width: 45%; }

with


.blog .items-leading .leading .pull-left.article-image, .blog .items-row .item .pull-left.article-image { margin-right: 40px; width: 15%; }

1 user says Thank You to chavan for this useful post

1. timtecsa

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#547971

Thanks, Chavan.

However, images with captions lose their margins. See:
http://res-sgi.globalprintmonitor.org/resources/technology/9-from-humble-beginnings-to-big-success-inkjet-technology

But when no caption (set in images & links) the image margin is present. See:
http://res-sgi.globalprintmonitor.org/resources/technology/10-four-colour-double-sided-printing-with-the-bookbee

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#548042

Go to this File: /templates/ja_biz/css/template.css

Replace this code


.img_caption img { margin-bottom: 1px !important; }

with

.img_caption img {
background: #eeeeee;
padding: 5px 5px 0 5px;
width: 100%;
}


1 user says Thank You to chavan for this useful post

1. timtecsa

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#548154

Thanks again, Chavan.

However, the caption itself is now left aligned in the wider image area. How does one set it to be, say, always, centered on the image. A very large bottom margin has also appeared. BTW I changed 5px to 10px.

Incidentally, typographically speaking, the image margin on a right aligned image should not also appear on the right side of the image, only left and usually a smaller amount top and bottom.

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#548465

Sorry i’m confused now, can we deal with this one by one. what is the issue now.

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#548550

Sorry, I managed to lose all the CSS changes. Will try to recover them.

Now I’m confused. I checked on the first one to adjust with of images in category blog view and it’s set to 15% but images display at 45% ??

}
.blog .items-leading .leading .pull-left.article-image,
.blog .items-row .item .pull-left.article-image {
margin-right: 40px;
width: 15%; }
}


http://res-sgi.globalprintmonitor.org/resources/technology

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#548628

Now it is 25% and looks perfect, you have made the css change in custom.css.

can you tell me what is the next issue

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#548717

Yes, I found that the CSS edit only works when I do it in the /local/template.css file. Never seen that wrinkle before. Also custom.css seems to work only sometimes. What is the purpose of the /local/ directory?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#548749

In Custom.css

Replace this code

.blog .items-leading .leading .pull-left.article-image, .blog .items-row .item .pull-left.article-image {
margin-right: 40px;
width: 25%;

}

With

.blog .items-leading .leading .pull-left.article-image, .blog .items-row .item .pull-left.article-image {

margin-right: 40px;
width: 25% !important;

}

@media (max-width: 1000px) {
.blog .items-leading .leading .pull-left.article-image, .blog .items-row .item .pull-left.article-image {

margin-right: 40px;
width: 100% !important;

}
}

1 user says Thank You to chavan for this useful post

1. timtecsa

[Author]

Posts