We have a Joomla based school website, we have a owl carousel at the bottom that scrolls along.
I would like to make the images contained links to their to websites.
I've looked everywhere to find where the code for the owl carousel is but i cant find it. There is a module for it but it hasn't anywhere to alter the code.
The site URL is: http://www.kibworthprimary.org.uk
This is the code in the tmpl folder inside default.php
<div class="owlcarousel<?php echo $moduleclass_sfx ?> <?php echo $alias ?>" <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage');?>)"<?php endif;?>>
<?php echo $module->content;?>
<div id="owl-carousel-<?php echo $module->id; ?>" class="owl-carousel owl-theme">
<?php foreach($gallery as $count=>$photo):
$title = JString::ucwords(str_replace("-", " ", strstr($photo->filename, '.', 1))); ?>
<div class="item">
<img class="lazyOwl img-responsive" src="<?php echo $photo->thumbImageFilePath; ?>" data-src="<?php echo $photo->thumbImageFilePath; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>" />
</div>
<?php endforeach; ?>
</div>
In the end i looked at the HTML the module was producing and used that as a base. It was set to look at a directory of images and display them there but these images will not be changing and so that function wasn't needed.
All is now working by simple wrapping a href tag around the item lists.
Related
I have use Fishpig extension in my website.
But i need to show Next and Previous link with it's appropriate featured image.
Can anyone please provide appropriate suggestion for this requirement.
Thanks,
The following code loads a post with the ID of 5 and if a featured image is set, it displays the image and a link to the post.
<?php $post = Mage::getModel('wordpress/post')->load(5) ?>
<?php if ($post->getId()): ?>
<?php if ($image = $post->getFeaturedImage()): ?>
<a href="<?php echo $post->getPermalink() ?>">
<img src="<?php echo $image->getAvailableImage() ?>" alt="<?php echo $this->escapeHtml($post->getPostTitle()) ?>"/>
</a>
<?php endif; ?>
<?php endif; ?>
You can find more information on how to get different sized images from the featured image object at the URL below:
https://fishpig.co.uk/magento/wordpress-integration/post-images/
The following article explains how to get an image object from a post object.
https://fishpig.co.uk/magento/wordpress-integration/post-images/
Specifically:
<?php // $post is already defined ?>
<?php if ($featuredImage = $post->getFeaturedImage()): ?>
<a href="<?php echo $post->getPermalink() ?>">
<img src="<?php echo $featuredImage->getAvailableImage() ?>" alt="<?php echo $this->escapeHtml($post->getPostTitle()) ?>"/>
</a>
<?php endif; ?>
I want to display a thumbnail image on a product page only if it exists. Currently it shows the placeholder image if a thumbnail image is not selected. I suppose I need to just wrap that around an if statement but do not know the method (if there is one) to check if the thumbnail image exists. Here is the code used to display the thumbnail:
<img id="slide-img-1" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(163, 100); ?>" /></a>
Use the following:
<?php if(!($_item->getThumbnail() == "no_selection")): ?>
<div class="image-holder">
<img class="thumbnail-image"
src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->constrainOnly(true)->resize(800); ?>"
alt=""
title="" />
</div>
<?php endif; ?>
If a thumbnail exists for the product then it should be set on the $_product instance. So you can use that in your condition, see below.
<?php if($_product->getThumbnail()): ?>
<img id="slide-img-1" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(163, 100); ?>" /></a>
<?php endif; ?>
My alt tags for images don't seem to work. I can add an alt tag in the admin for a particular image but I can't seem to display that.
My alt tag just remains empty.
Now I've been looking around for a solution and I've found the following:
get_post_meta($attachment_id, '_wp_attachment_image_alt', true)
but that doesn't seem to work at all, the alt tag just stays empty.
At the moment my code is the following:
<img src="<?php the_sub_field('image'); ?>" title="<?php the_title(); ?>" alt=""/>
Any solutions for this?
I presume there is a standard wordpress function to do this, since we have the option to insert an alt tag in the admin area
Try it this way: (not yet tested)
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
Which leads you to:
<img src="<?php the_sub_field('image'); ?>" title="<?php echo $image_title; ?>" alt="<?php echo $alt; ?>"/>
May be you are using Chrome Browser, it's chrome's issue.
or if not than try this one, it will definitely helps you.
<img src="<?php the_sub_field('image'); ?>" title="<?php the_title(); ?>" alt="image"/>
Thanks.
Judging from the code you post on your fiddle in the comments, I would say you need to change the way you have setup your ACF fields.
get_post_meta($attachment_id, '_wp_attachment_image_alt', true) won't work because $attachment_id is empty.
It looks like you have set your ACF Fields up to return the image URL instead of the image object or the image ID. I would suggest changing the field to return the ID. Then you can modify your code like the following:
<div class="row bottom-margin-half">
<?php $i=0 ?>
<?php $teamMembers=count(get_sub_field( "persoon")); ?>
<?php while (the_repeater_field( 'persoon')) { ?>
<?php if ($i==0 || $i % 4===0 ) { ?>
<div class="row">
<?php } ?>
<div class="col col-lg-3 col-sm-4 teamdescription">
<?php echo wp_get_attachment_image( get_sub_field( 'image' ), 'full', false, array( 'class' => 'r5' ) ); ?>
<p><b><?php the_sub_field('naam'); ?> <?php the_sub_field('linkedin'); ?></b>
</p>
<p>
<?php the_sub_field( 'functie'); ?>
</p>
</div>
<?php $i++; ?>
<?php if ($i==0 || $i % 4===0 || $teamMembers===$i) { ?>
</div>
<?php } ?>
<?php } ?>
</div>
The wp_get_attachment_image function creates the image element and handles the alt tag for you.
how can I add an image with js code and external link in my top navigation. It should be placed between the menu links and search form.
maybe it has to be adapted in the header. I don`t know it also how to do it there.
here u can see a screenshot of the current site.
Screenshot
<?php if ($customlogo['logo_status'] == 0): ?>
<h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></h1>
<?php else:?>
<h1 class="logo"><strong><?php echo $customlogo['logo_alt']; ?></strong><img src="<?php echo $mediaurl.$customlogo['logo']; ?>" alt="<?php echo $customlogo['logo_alt']; ?>" /></h1>
<?php endif; ?>
<div class="quick-access">
<div class="menu-button"></div>
<?php echo $this->getChildHtml('topMenu') ?>
GUESS, it must placed between these two code snippets... but how?
<?php echo $this->getChildHtml('topSearch') ?>
<div class="clear"></div>
</div>
thx in advance
You answered your own question really. Replace GUESS, it must be placed... with image tag and use css to style accordingly. Alternatively, you can create a custom block and phtml file, add an instance of your block to page.xml layout file and then in the template as above you could use $this->getChildHtml('myCustomBlock'), but for the sake of a single image I would use the first image or use CSS background styles if that's what's it for. You could also insert the image in the phtml file for topMenu or topSearch. I suggest you read the design guide http://www.magentocommerce.com/knowledge-base/categories/category/themes-and-design/
On this page, I'm trying to move the tags (list of tags and tags form) out of the tabs to the open area immediately before the Reviews section.
I copied everything from the /template/tag/list.phtml to /template/catalog/product/view.phtml:
<div class="box-collateral box-tags">
<h2><?php echo $this->__('Product Tags') ?></h2>
<?php echo $this->getChildHtml('list_before')?>
<?php if( $this->getCount() ): ?>
<h3><?php echo $this->__('Other people marked this product with these tags:') ?></h3>
<ul id="<?php echo $this->getUniqueHtmlId('product-tags_'); ?>" class="product-tags">
<?php echo $this->renderTags('<li>%2$s (%3$s)</li>') ?>
</ul>
<script type="text/javascript">
decorateGeneric($("<?php echo $this->getUniqueHtmlId('product-tags_'); ?>").select('li'), ['first', 'last']);
</script>
<?php endif; ?>
<form id="addTagForm" action="<?php echo $this->getFormAction(); ?>" method="get">
<div class="form-add">
<label for="productTagName"><?php echo $this->__('Add Your Tags:') ?></label>
<div class="input-box">
<input type="text" class="input-text required-entry" name="productTagName" id="productTagName" />
</div>
<button type="button" title="<?php echo $this->__('Add Tags') ?>" class="button" onclick="submitTagForm()">
<span>
<span><?php echo $this->__('Add Tags') ?></span>
</span>
</button>
</div>
</form>
<p class="note"><?php echo $this->__("Use spaces to separate tags. Use single quotes (') for phrases.") ?></p>
<script type="text/javascript">
//<![CDATA[
var addTagFormJs = new VarienForm('addTagForm');
function submitTagForm(){
if(addTagFormJs.validator.validate()) {
addTagFormJs.form.submit();
}
}
//]]>
</script>
</div>
While the form is correctly showing, the tags are not.
I guess it's something to do with the "$this->getCount()". So how can I get $this for tags in view.phtml? Or how can I make this work?
Thanks a lot!
it cannot work if you copied code from template tag/list.phtml to catalog/product/view.phtml because behind of catalog/product/view.phtml is a block which doesnt support same set of methods as block behind tag/list.phtml.
I suggest to move tag_list block inside of product_view block in layout XML. And then in catalog/product/view.phtml you can use something like
<?php echo $this->getChildHtml('tag_list'); ?>
which would print content of tag/list.phtml.
Or if you dont want to move block in layout xmls then you can use something like
<?php echo $this->getLayout()->getBlock('tag_list')->toHtml(); ?>
but it's not so nice and clean :) I suggest to go with option one. Some resources how to work with layout is available in Magento Commerce site.