Joomla Templates Club 406,261 posts

[lailuluelo Friend lailulueloJoin date: May 2010Posts: 241Downloads:7Uploads:34 Thanks: 110 Thanked: 21 times in 1 posts]

#199039

Seems that all pictures in an article are optimized to fit in a size, like a picture above:

Also if I click over them, a pop up appears with image bigger.

The question is simple. How can I do to take control about pictures in articles? I suppose is inherent functionality, but, I want to make some articles different, with different sizes, and when click on image go to a link and not to a pop-up window with the image bigger.

Thank you

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#539845

Regarding image dimension in articles and categories, we use the css style to define this. If you want to show each image with another dimension, you have to add width and height into image tags in articles. For instance:

<img src="/team/images/dossier/BMW-CEV-TEAM%20(5).jpg" alt="BMW-CEV-TEAM (5)" width="750" height="249">

1 user says Thank You to Ninja Lead for this useful post

1. lailuluelo

[lailuluelo Friend lailulueloJoin date: May 2010Posts: 241Downloads:7Uploads:34 Thanks: 110 Thanked: 21 times in 1 posts]

#539857

And what about disable pop up to make a link, for example-

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#539967

<em>@lailuluelo 433501 wrote:</em><blockquote>And what about disable pop up to make a link, for example-</blockquote>

This tweak will help. Open the templates/ja_decor/templateHelper.php file:

Change


$text .= '<li class="'.($j == 0 ? 'col-xs-12' : 'col-sm-6 col-xs-12').'">'
.($total>1?'<a title="'.$attr['alt'].'" href="'.(isset($attr['src']) ? $attr['src'] : '').'" class="thumbnail'.($j == 0 ? ' active' : '').'">':'')
.$img
.($total>1?'</a>':'').
'</li>';


To

$text .= '<li class="'.($j == 0 ? 'col-xs-12' : 'col-sm-6 col-xs-12').'">'
.($total>1?'<a title="'.$attr['alt'].'" href="'.(isset($attr['src']) ? $attr['src'] : '').'" class="thumbnail'.($j == 0 ? '' : '').'">':'')
.$img
.($total>1?'</a>':'').
'</li>';

1 user says Thank You to Ninja Lead for this useful post

1. lailuluelo

[lailuluelo Friend lailulueloJoin date: May 2010Posts: 241Downloads:7Uploads:34 Thanks: 110 Thanked: 21 times in 1 posts]

#540063

<em>@Ninja Lead 433635 wrote:</em><blockquote>This tweak will help. Open the templates/ja_decor/templateHelper.php file:

Change


$text .= '<li class="'.($j == 0 ? 'col-xs-12' : 'col-sm-6 col-xs-12').'">'
.($total>1?'<a title="'.$attr['alt'].'" href="'.(isset($attr['src']) ? $attr['src'] : '').'" class="thumbnail'.($j == 0 ? ' active' : '').'">':'')
.$img
.($total>1?'</a>':'').
'</li>';


To

$text .= '<li class="'.($j == 0 ? 'col-xs-12' : 'col-sm-6 col-xs-12').'">'
.($total>1?'<a title="'.$attr['alt'].'" href="'.(isset($attr['src']) ? $attr['src'] : '').'" class="thumbnail'.($j == 0 ? '' : '').'">':'')
.$img
.($total>1?'</a>':'').
'</li>';
</blockquote>

I’m so sorry @ninja Lead but doesn´t work :((

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#540118

My mistake, should still remove a block of js thumbnail code.

I just helped you fix this bug directly on your site. Here is modification for your reference.

In the templates/ja_decor/js/script.js file, you will see /* and */ in thumbnail code as follows:


// Thumbnail gallery
/*if($('article .thumbnails').length >0 && !$('article .thumbnails').hasClass('no-slide')){
$('article .thumbnails').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
}
*/


1 user says Thank You to Ninja Lead for this useful post

1. lailuluelo

[lailuluelo Friend lailulueloJoin date: May 2010Posts: 241Downloads:7Uploads:34 Thanks: 110 Thanked: 21 times in 1 posts]

#540237

<em>@Ninja Lead 433823 wrote:</em><blockquote>My mistake, should still remove a block of js thumbnail code.

I just helped you fix this bug directly on your site. Here is modification for your reference.

In the templates/ja_decor/js/script.js file, you will see /* and */ in thumbnail code as follows:


// Thumbnail gallery
/*if($('article .thumbnails').length >0 && !$('article .thumbnails').hasClass('no-slide')){
$('article .thumbnails').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
}
*/

</blockquote>

I’m so sorry @ninja Lead but doesn´t work. Please, have a look at this URL:

http://easyrace.net/team/proyecto-cev-2014/104-sponsors

Click on “Dunlop” image, there are a link to an external site and shows a pop up with the same image. I check js you modified and It’s with you modifcations but…

I refresh navigator and cleaned cache. :((:((

[lailuluelo Friend lailulueloJoin date: May 2010Posts: 241Downloads:7Uploads:34 Thanks: 110 Thanked: 21 times in 1 posts]

#540646

@ninja Lead, could you please help me? :(( thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#540736

<em>@lailuluelo 433969 wrote:</em><blockquote>I’m so sorry @ninja Lead but doesn´t work. Please, have a look at this URL:

http://easyrace.net/team/proyecto-cev-2014/104-sponsors

Click on “Dunlop” image, there are a link to an external site and shows a pop up with the same image. I check js you modified and It’s with you modifcations but…

I refresh navigator and cleaned cache. :((:((</blockquote>

I just customized the detail article, now it remains without the popup and can link to an external site when clicking each image. Please check again and let me know if it helps.

1 user says Thank You to Ninja Lead for this useful post

1. lailuluelo

[lailuluelo Friend lailulueloJoin date: May 2010Posts: 241Downloads:7Uploads:34 Thanks: 110 Thanked: 21 times in 1 posts]

#540752

Works perfect @ninja Lead!

Could you please tell me what you do this time?

Thank you 🙂

[Walter Doljar Friend Walter DoljarJoin date: September 2014Posts: 60Downloads:75Uploads:19 Thanks: 17 Thanked: 1 times in 1 posts]

#540836

<em>@lailuluelo 434673 wrote:</em><blockquote>Works perfect @ninja Lead!

Could you please tell me what you do this time?

Thank you :)</blockquote>

Hi,

the solution would be helpful for me too…

I did all the steps but still resizing all the small images.

http://gh540.w4yserver.at/index.php/unternehmen/2014-06-21-09-43-06/7-gruende

I need full control over my images!
thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#540917

@lailuluelo: I did fix directly on your site with this workaround:

In the templates/ja_decor/html/com_content/article/default.php file,

Change:

<section class="article-content clearfix">
<div class="article-introtext">
<?php
echo DecorHelper::photogallery($this->item->text);
?></div>
</section>

To:

<section class="article-content clearfix">
<div class="article-introtext">
<?php
echo $this->item->text;
?></div>
</section>
@waldo99: you have to add width and height into image tags in articles. For instance:

<img src=”/images/allgemein/pv-home.jpg” alt=”” width=”149″ height=”149″>

Then open the templates/ja_decor/css/themes/red/template.css file,

Change:

.article-intro img,
.article-content img,
.article-image img,
.article-image-intro img {
display: block;
max-width: 100%;
height: auto;
width: 100%;
}

To:

.article-intro img,
.article-content img,
.article-image img,
.article-image-intro img {
display: block;
height: auto;
}

2 users say Thank You to Ninja Lead for this useful post

1. Walter Doljar
2. lailuluelo

[Author]

Posts