Blog Mode: Display first image from each article

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
User avatar
aliens
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Fri Sep 28, 2007 4:30 pm

Blog Mode: Display first image from each article

Post by aliens » Mon Mar 03, 2008 2:23 pm

Okay this is something that I've been looking for quite a while, and couldn't find good solutions for 1.5.

This simply replaces the intro text of an article listed in Category/Blog with the first image found in the intro text (unfortunately, the image will be displayed as is, without resizing/thumbnailing). Also, the image is linked to the article.

Create a template override for "components/com_content/views/category/tmpl/blog_item.php" in "templates/<template name>/html/com_content/category/blog_item.php".


Replace this line (usually found on line 116 in the 1.5.1 release):

Code: Select all

<?php echo $this->item->text; ?>
With:

Code: Select all

<?php preg_match('/<img (.*?)>/', $this->item->text, $match); ?><a href="<?php echo $this->item->readmore_link; ?>"><?php echo $match[0]; ?></a>
Again, this only displays the picture exactly how it is displayed in the article. No thumbnailing/modifications are made other that it links to it's article.

latristesse
Joomla! Explorer
Joomla! Explorer
Posts: 270
Joined: Mon Dec 12, 2005 9:59 pm

Re: Blog Mode: Display first image from each article

Post by latristesse » Sun Mar 16, 2008 10:18 pm

This does work - even in the beez modifications. The problem with this is that, at least with the beez mods, the read more link completely disappears (even when there is no image in the article). I guess something a little more comprehensive would be if we could alter the code to just surround the first image in the intro text with that link, instead of replacing the read more link. So it would be something like if there's a read more link, and there's an image in the intro text, then put the read more link in the first image in the intro text and add the read more link. Or at the very least, if there's an image in the intro, add the read more link to the image, if not just add a text read more link. I'm probably not the one to do this as my php coding skills are very limited.

User avatar
aliens
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Fri Sep 28, 2007 4:30 pm

Re: Blog Mode: Display first image from each article

Post by aliens » Mon Mar 17, 2008 12:08 am

latristesse wrote:This does work - even in the beez modifications. The problem with this is that, at least with the beez mods, the read more link completely disappears (even when there is no image in the article). I guess something a little more comprehensive would be if we could alter the code to just surround the first image in the intro text with that link, instead of replacing the read more link. So it would be something like if there's a read more link, and there's an image in the intro text, then put the read more link in the first image in the intro text and add the read more link. Or at the very least, if there's an image in the intro, add the read more link to the image, if not just add a text read more link. I'm probably not the one to do this as my php coding skills are very limited.
Dunno about the beez template, but in a normal template, the Read more link is there.

As you can see from the code I posted, only the article text is replaced, everything else remains the same.

latristesse
Joomla! Explorer
Joomla! Explorer
Posts: 270
Joined: Mon Dec 12, 2005 9:59 pm

Re: Blog Mode: Display first image from each article

Post by latristesse » Mon Mar 17, 2008 3:53 am

Here's the relevant if statement from the beez mods (which make templates accessible and XHTML-compliant):

Code: Select all

<?php if ($this->item->params->get('show_readmore') && $this->item->readmore) : ?>
<p>
       <a href="<?php echo $this->item->readmore_link; ?>" class="readon<?php echo $this->item->params->get('pageclass_sfx'); ?>">
		<?php if ($this->item->readmore_register) :
			echo JText::_('Register to read more...');
		elseif ($readmore = $this->item->params->get('readmore')) :
			echo $readmore;
		else :
			echo JText::sprintf('Read more', $this->item->title);
		endif; ?></a>
</p>
<?php endif; ?>
I can just add your code and get the read more link actually (I discovered I was replacing the wrong line) but if there's a pic in the intro text, then there are two pics - if there's only text or nothing in the intro text then it doesn't put the image in there at all. Then I tried to put together an if statement that basically used the first part of your code to detect the image and fill the $match variable, then replace that image with the image that has the read more link. But I just couldn't quite get there...

FatalMusic
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Thu Nov 29, 2007 8:15 pm

Re: Blog Mode: Display first image from each article

Post by FatalMusic » Mon Mar 17, 2008 4:30 pm

I changed the code and it works except for none of the text appearing before the 'read more' link ??
I use the rhuk_milkyway template...

Bozza
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Sun Dec 09, 2007 7:32 pm

Re: Blog Mode: Display first image from each article

Post by Bozza » Thu Mar 27, 2008 3:52 pm

This is exactly what I needed. Unfortunately, it's not working for me. I am using Rockettheme's Synapse and the path mentioned to overwrite the template isn't there. Get as far as "/templates/rt_synapse_j15/html/". If I make the changes to that other file mentioned, it doesn't make any changes... just shows the image and the full text.

Is it also possible to ONLY show a part of the article (and include a read more link) instead of the whole article?

Thanks in advance guys. I simply love Joomla but my knowledge isn't so big when it comes to Joomla so I need some help hehe. :-[

latristesse
Joomla! Explorer
Joomla! Explorer
Posts: 270
Joined: Mon Dec 12, 2005 9:59 pm

Re: Blog Mode: Display first image from each article

Post by latristesse » Fri Apr 11, 2008 4:16 am

I finally made this work without the repeating the images (I replaced line 106 or so). However, I would like to do it based on the section of the item. I tried:

Code: Select all

<?php if ($this->item->sectionid = "5") : ?>
But this does not seem to work. How do I capture the sectionid and do an action based on a particular sectionid? This is important because only certain sections in my site have items where I want the image to be the only thing in the intro.

latristesse
Joomla! Explorer
Joomla! Explorer
Posts: 270
Joined: Mon Dec 12, 2005 9:59 pm

Re: Blog Mode: Display first image from each article

Post by latristesse » Fri Apr 11, 2008 5:08 am

I got this working for a specific section (in my if statement, I say if that if it's a certain section, then replace the intro with image+readmore, if not that section, keep the intro text as is):

Code: Select all

<?php if ($this->item->sectionid == 5) : ?>
<?php preg_match('/<img (.*?)>/', $this->item->text, $match); ?><a href="<?php echo $this->item->readmore_link; ?>"><?php echo $match[0]; ?> </a>
<?php else : ?>
<?php echo (JFilterOutput::ampReplace($this->item->text)); ?>
<?php endif; ?>

ikolaxis
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sun Apr 13, 2008 2:46 pm

Re: Blog Mode: Display first image from each article

Post by ikolaxis » Fri May 09, 2008 10:39 pm

aliens wrote:Okay this is something that I've been looking for quite a while, and couldn't find good solutions for 1.5.

This simply replaces the intro text of an article listed in Category/Blog with the first image found in the intro text (unfortunately, the image will be displayed as is, without resizing/thumbnailing). Also, the image is linked to the article.

Create a template override for "components/com_content/views/category/tmpl/blog_item.php" in "templates/<template name>/html/com_content/category/blog_item.php".


Replace this line (usually found on line 116 in the 1.5.1 release):

Code: Select all

<?php echo $this->item->text; ?>
With:

Code: Select all

<?php preg_match('/<img (.*?)>/', $this->item->text, $match); ?><a href="<?php echo $this->item->readmore_link; ?>"><?php echo $match[0]; ?></a>
Again, this only displays the picture exactly how it is displayed in the article. No thumbnailing/modifications are made other that it links to it's article.
I am trying to implement a similar feature in default - category list layout (i.e. in opposition to Blog mode mentioned in this post). I would like the first image (thumbnail) from each article to appear next to its title, in an extra column of the table that contains/lists those articles.

I copied the segment of code that you suggested in "templates/<template_name>/html/com_content/category/default_items.php", but it seems that the statement "$this->item->text" does not work/return anything.

Can anyone please give me a hint? Although I am familiar with PHP, this is the first time I try to modify Joomla PHP code, and cannot really understand how it works.

Thanks a lot

User avatar
perko
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Tue Feb 21, 2006 1:59 pm
Contact:

Re: Blog Mode: Display first image from each article

Post by perko » Wed May 21, 2008 12:49 pm

hi,

I can't find this part ??

Code: Select all

Create a template override for "components/com_content/views/category/tmpl/blog_item.php" in "templates/<template name>/html/com_content/category/blog_item.php".
I don't have this files in my joomla ?
http://www.makarska-travel.info Accommodation Makarska Apartments
http://www.makarska-accommodation.com Apartments Makarska

User avatar
bytchkyng
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Nov 12, 2006 2:40 pm
Contact:

Re: Blog Mode: Display first image from each article

Post by bytchkyng » Thu May 22, 2008 1:53 pm

perko wrote:hi,

I can't find this part ??

Code: Select all

Create a template override for "components/com_content/views/category/tmpl/blog_item.php" in "templates/<template name>/html/com_content/category/blog_item.php".
I don't have this files in my joomla ?
In Joomla 1.5, you just copy the file from the first folder to your own template folder (create the structure as mentioned above). It's called template override. Then you can modify the php file for your needs...
I'm impressed by Joomla, that's why I built www.footbag.cz with it...

bezworks
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 100
Joined: Mon Mar 12, 2007 3:15 am

Re: Blog Mode: Display first image from each article

Post by bezworks » Fri Jan 02, 2009 11:43 am


joshlfisher
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Sat Nov 21, 2009 2:02 pm

Re: Blog Mode: Display first image from each article

Post by joshlfisher » Thu Jun 30, 2011 7:54 pm

This works great for images in an articles introtext:
<?php preg_match('/<img (.*?)>/', $this->item->text, $match); ?>

How do I edit this to pull the first image from the ARTICLE text, after the introtext?

OK, I have Found a SOLUTION!

Replace the bold text above with:
$this->item->fulltext

Note this matches the database field name for the main article text (not introtext)

durca
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Nov 01, 2011 8:40 pm

Re: Blog Mode: Display first image from each article

Post by durca » Tue Nov 01, 2011 8:51 pm

latristesse wrote:I got this working for a specific section (in my if statement, I say if that if it's a certain section, then replace the intro with image+readmore, if not that section, keep the intro text as is):

Code: Select all

<?php if ($this->item->sectionid == 5) : ?>
<?php preg_match('/<img (.*?)>/', $this->item->text, $match); ?><a href="<?php echo $this->item->readmore_link; ?>"><?php echo $match[0]; ?> </a>
<?php else : ?>
<?php echo (JFilterOutput::ampReplace($this->item->text)); ?>
<?php endif; ?>
Hello and congrats, for me this was the best solution but I need the forum help because I have a problem and I can't find the solution:
- my first image in the article is a banner module inserted in the body of the article , I need to add somehow the command img Tag to the line so the first image displayed to be the one in the alt or tag command

Also I experiment the same problem as others here, " Read More" is not displayed...

Txs in advance

mshahawy
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jul 14, 2010 9:53 am

Re: Blog Mode: Display first image from each article

Post by mshahawy » Thu Nov 03, 2011 7:00 pm


Where I can find this code to change it?? and will it fix my problem??

my problem is that I created an article and I made it show in the front page and divided it using the read more link.
The intro text which appear in the main page has an image and I created a link for it. The image doesn't link when it is on the front-page but it links perfectly inside the article!! How can I make it link in the intro text in the front page?

mshahawy
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jul 14, 2010 9:53 am

Re: Blog Mode: Display first image from each article

Post by mshahawy » Thu Nov 03, 2011 7:05 pm

I created article and I made it show on the front page. I used the read more Icon to show part of it on the front page. This part which is the intro text has an image. I gave this image a link. When I put the mouth over it on the front page it do nothing and it doesn't link at all. but when I access the article page it link perfectly. I do not know what I should do and I searched the internet without reaching anything.

The image I refer to is the image beside the about us text in the front page.

could you help me with that please?

andreeochoa
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Mar 05, 2012 11:46 pm
Contact:

Re: Blog Mode: Display first image from each article

Post by andreeochoa » Mon Mar 05, 2012 11:59 pm

Well the solution worked this way for me:

<?php preg_match('/<img (.*?)>/', $this->item->fulltext, $match); ?>
<a href="<?php echo $this->item->readmore_link; ?>"><?php echo $match[0]; ?></a>
<?php echo $this->item->text; ?>

<?php if ($this->item->params->get('show_readmore') && $this->item->readmore) : ?>
<?php endif; ?>


What it does is that it prints the image as a link to the full article and it also shows the intro text and then a read more link.

However it shows the full image, it doesn't re-size it and I need help on this.

The match statement <?php echo $match[0]; ?>
Prints: <img alt="description" src="FULL IMAGEURL"/> Like it appears on the article.

So how can we strip this down and make it print like this:
<img alt="description" src="FULL IMAGEURL" width="100px" height="100px" align="left" />


Locked

Return to “Templates for Joomla! 1.5”