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 ?>
Related
I have three separate fields in acf one for each image named slide_one, slide_two and slide_three. Now when I try to get the images to display using the code below nothing is being output. I am doing it this why and not using a loop like you usually as I'm wanting to have a separate text overlay for each image that I will have sliding in separately. This is the first step and it won't work. What an I doing wrong?
<div class="slider">
<ul class="slides">
<?php
$image_one = get_field('slide_one');
if( !empty($image_one ): ?>
<li>
<img src="<?php echo $image_one['url']; ?>" alt="<?php echo $image_one['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_two = get_field('slide_two');
if( !empty($image_two ): ?>
<li>
<img src="<?php echo $image_two['url']; ?>" alt="<?php echo $image_two['alt']; ?>" />
</li>
<?php endif; ?>
<?php
$image_three = get_field('slide_three');
if( !empty($image_three ): ?>
<li>
<img src="<?php echo $image_three['url']; ?>" alt="<?php echo $image_three['alt']; ?>" />
</li>
<?php endif; ?>
</ul>
</div>
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>
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 new to this website and I was hoping to get my first question out and get some feedback on my issue.
I am creating a "slider" which you can find here: http://complusoft.net/demo-catarroja2/es/ (at the very beginning of the page) and i`m trying to make the images which pass through the slide to be a link.
Here you can find the code which I have done:
<?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; ?>
Ive looked around the internet and besides my own knowledge I know this should be the correct way besides the point that this is simple HTML I believe, I may be wrong please correct me if so.
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 ?>