I am struggling to retrieve the intro image of articles, within a custom module that echoes article titles with the selected tags.
But it seems as if $item->images doesn't recall the image info. My code is the following:
Can anyone help me?
<?php
defined('_JEXEC') or die;
$images = json_decode($item->images);
?>
<?php JLoader::register('TagsHelperRoute', JPATH_BASE . '/components/com_tags/helpers/route.php'); ?>
<div class="tagsselected<?php echo $moduleclass_sfx; ?>">
<?php if ($list) : ?>
<ul>
<?php foreach ($list as $i => $item) : ?>
<li>
<?php $item->route = new JHelperRoute; ?>
<a href="<?php echo JRoute::_(TagsHelperRoute::getItemRoute($item->content_item_id, $item->core_alias, $item->core_catid, $item->core_language, $item->type_alias, $item->router)); ?>">
<?php if (!empty($item->core_title)) :
echo htmlspecialchars($item->core_title);
endif; ?>
</a>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php else : ?>
<span><?php echo JText::_('MOD_TAGS_SIMILAR_NO_MATCHING_TAGS'); ?></span>
<?php endif; ?>
</div>
Try to get Article images in for loop
<?php foreach ($list as $i => $item) :
// images for each article
$images = json_decode($item->images); ?>
<li>
// your code/ other stuff
// display image
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
</li>
<?php endforeach; ?>
<li class="tag_title_custom">
<?php $item->route = new JHelperRoute; ?>
<a href="<?php echo JRoute::_(TagsHelperRoute::getItemRoute($item->content_item_id, $item->core_alias, $item->core_catid, $item->core_language, $item->type_alias, $item->router)); ?>">
<?php if (!empty($item->core_title)) :
echo htmlspecialchars($item->core_title);
endif; ?>
<?php $images = json_decode($item->core_images);?>
<img src="<?php echo htmlspecialchars($images->image_intro);?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>">
</a>
</li>
Related
The code to generate a list of most read articles on my Joomla website AND display their intro images is as follows:
<ul class="mostread<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif; ?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
</ul>
Having little to no experience with PHP, what do i need to do to this code to make it display only the first item's image instead of for all of them?
#hek-mat was close, but the OP was trying to stop the image on the other posts from displaying, not the link and title.
<?php
// track if we've seen an image yet or not
$seen_first = false;
foreach ( $list as $item ) :
$images = json_decode( $item->images );
// OP only wants posts with image_intros
if ( $images->image_intro ) :
// OP only wants to see the first item's image
if ( ! $seen_first ) :
?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars( $item->title ); ?>" />
<?php
// don't show another image
$seen_first = true;
// end "if first not seen yet"
endif;
// show the article (for all)
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name"><?php echo $item->title; ?></span>
</a>
</li>
<?php
// end "if image_intro"
endif;
endforeach;
?>
Try like this..
Set a variable $first = true; after displaying first item set it to false.
<ul class="mostread<?php echo $moduleclass_sfx; ?>">
<?php
$first = true;//initially set true
foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
if($first==true){ ?> //checks $first is true if true prints
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif;
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php
}
$first = false;//after printing first item set it false
endforeach; ?>
</ul>
To display only first item image you have do it like below.
<?php
$first = true;//initially set true
foreach ($list as $item) :
$images = json_decode($item->images);
if($first==true):
if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php
endif;
endif;
$first = false;
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
Rather than modifying the PHP, it is probably easier to add some CSS to a custom CSS file like this:
ul.mostread img {display: none;}
ul.mostread img:first-of-type {display: block;}
so that only the first image is displayed.
See https://joomla.stackexchange.com/a/3878/120 for instructions on how to create a custom CSS file in Joomla.
A custom CSS file also has the advantage that it won't be overwitten by any future Joomla or template updates.
I am trying to build a Flexible Content which contains 4 possible Layouts (a description, a hero image, a gallery 1col and a gallery 2col). So far I can get the Description and Hero Image subfields to display just fine but the Gallery subfield wont show up on the page. Don't know what I'm doing wrong. Here's the code:
<?php
while(the_flexible_field("flexible_content")): ?>
<?php if(get_row_layout() == "description"): // layout: Description ?>
<div class="proy-desc">
<h2><?php the_sub_field("text"); ?></h2>
</div>
<?php elseif(get_row_layout() == "hero_image"): // layout: Hero Image ?>
<div class="proy-img">
<?php
$image = get_sub_field('image');
elseif( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php ?>
</div>
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
<?php elseif(get_row_layout() == "gallery_100p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_100p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
You did not close your if statement. See below:
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php ?>
</div>
<?php endif; ?>
Change your section to this:
<?php elseif(get_row_layout() == "gallery_50p"): // layout: Gallery 50p ?>
<div class="gallery">
<?php $images = get_sub_field('gallery_image_50p');
if( $images ): ?>
<ul>
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
Your endif; was in the wrong spot. Everything else looks right, so give this a try.
I'm having an issue using images from a Slideshow as links.
This is my code:
<div class="slider-wrapper theme-default sl-2">
<div id="slider-2" class="nivoSlider-2" >
<?php foreach ($items as $key=>$item): ?>
<?php if($params->get('itemImage') && isset($item->image)): ?>
<a class="moduleItemTitle" href="<?php echo $item->link; ?>">
<img src="<?php echo $path1;?>?src=<?php echo $item->image;?>&w=635&h=386&zc=1&q=100" alt="<?php echo K2HelperUtilities::cleanHtml($item->title); ?>" title="#htmlcaption<?php echo $key;?>"/>
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php foreach ($items as $key=>$item): ?>
<div id="htmlcaption<?php echo $key;?>" class="nivo-html-caption">
<?php if($params->get('itemTitle')): ?>
<!--<h2><a class="moduleItemTitle" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h2>-->
<?php endif; ?>
<div class="clr"></div>
<?php if($params->get('itemIntroText')): ?>
<div class="description-slider2">
<p><?php echo $item->introtext; ?></p>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
I pass through the "a" tag the $item->link parameter which returns these two strings since the slideshow only contains two images:
string(51) /demo-catarroja2/es/campanas/cavi-catarroja-virtual
&
string(49) /demo-catarroja2/es/campanas/plan-de-ayuda-social
If I inspect the element with a web browser it shows this:
<a class="moduleItemTitle" href="/demo-catarroja2/es/campanas/plan-de-ayuda-social">
<img src="http://complusoft.net/demo-catarroja2/templates/onews/html/thumb.php?src=/demo-catarroja2/media/k2/items/cache/9c2fe6cb8c357cf6d57c8926869c1003_XL.jpg&w=635&h=386&zc=1&q=100" alt="Plan de Ayuda social 2013" title="#htmlcaption1"/>
</a>
This image is obviously inside the a tag but its acting as a link, why could this be?
You can check out the site here:
The slideshow is on the main page up top.
I'm trying to make a brand page to show all the brand images and descriptions on one page.
I have created a brand category with the ID 3, all the brands go under that category,
only the brand names show but the images and descriptions don't show,
any help would be appreciated.
<?php
$brands = Mage::getModel('catalog/category')->load(3)->getChildrenCategories();
?>
<?php foreach($brands as $brand): ?>
<ul>
<li>
<a href="<?php echo $brand->getUrl() ?>">
<img src="<?php echo $brand->getImageUrl() ?>" />
<?php echo htmlspecialchars($brand->getName()) ?>
</a>
<?php echo htmlspecialchars($brand->getDescription()) ?>
</li>
</ul>
<?php endforeach ?>
<?php
$brands = Mage::getModel('catalog/category')->load(3)->getChildrenCategories();
?>
<?php foreach($brands as $brand): ?>
<?php
$cat= Mage::getModel('catalog/category')->load($brand->getId());
?>
<ul>
<li>
<a href="<?php echo $cat->getUrl() ?>">
<img src="<?php echo $cat->getImageUrl() ?>" />
<?php echo htmlspecialchars($cat->getName()) ?>
</a>
<?php echo htmlspecialchars($cat->getDescription()) ?>
</li>
</ul>
<?php endforeach ?>
Hi I've been working with Kirby. I'm a complete beginner in PHP but managed to get a lot done. Just need some help with the gallery.
On the homepage a single image is displayed as thumbnail:
<?php foreach($articles as $article): ?>
<li class="<?php foreach(str::split($article->tags()) as $tag): ?><?php echo $tag ?> <?php endforeach ?>">
<?php foreach($article->images() as $image): ?><?php echo thumb($image, array('width' => 300, 'quality' => 70)) ?><?php endforeach ?><p><?php echo html($article->title()) ?></p>
</li>
<?php endforeach ?>
On the article page I'd like to have a gallery.
The gallery snippet:
<?php if($page->hasImages()): ?>
<ul class="gallery">
<?php foreach($page->images() as $image): ?>
<li>
<img src="<?php echo $image->url() ?>" width="<?php echo $image->width() ?>" height="<?php echo $image->height() ?>" alt="<?php echo $image->name() ?>" />
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
Using Kirby, makes me store all the article items in one folder. But if I do this, and use the code mentioned above, all the images from the gallery also show up as thumbnails on the homepage.
I guess the best would be to edit the gallery snippet so it can grab images from a subfolder. But how?
Thank you for your help!
One solution to this is to name the file you wanna have displayed on the front page something like front.jpg. You can then directly access this image with $page->images()->find('front.jpg').
So you get this:
<?php foreach($articles as $article): ?>
<li class="<?php foreach(str::split($article->tags()) as $tag): ?><?php echo $tag ?> <?php endforeach ?>">
<a href="<?php echo $article->url() ?>" title="<?php echo html($article->title()) ?>">
<?php echo thumb($article->images()->find('front.jpg'), array('width' => 300, 'quality' => 70)) ?>
<p><?php echo html($article->title()) ?></p>
</a>
</li>
<?php endforeach ?>
(Note, that you have to remove the inner foreach-loop, because you're only displaying one image.)
The gallery snippet stays the same.
Here try:
<?php foreach($page->image()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" width="100%" height="100%" />
<?php endif ?>
<?php endforeach ?>