This href I have on a page is included in a cycle 2 slider so a caption under an image. BUT it doesn't work when clicking and it opening a new tab, it only works when you right click and then click "go to ....". Does anyone know why?
The plugin on wordpress: http://www.advancedcustomfields.com/
Code:
<a class="alt-caption" href="http://<?php the_field('url_site'); ?>"><?php the_field('url_site'); ?></a>
<div class="paginawrap no_overflow">
<div class="wraptest">
<div class="cycle-slideshow"
data-cycle-fx="carousel"
data-cycle-speed="500"
data-cycle-delay=5000
data-cycle-next=" > img"
data-cycle-caption=".alt-caption"
data-cycle-caption-template="{{alt}}"
data-cycle-carousel-fluid=true
data-allow-wrap=false
>
<?php $args = array(
'post_type' => 'project',
'posts_per_page' => 10
);
$query = new WP_Query( $args );
if ( $query->have_posts()) :
while ( $query->have_posts()) : $query->the_post();
the_post_thumbnail('home');
endwhile; wp_reset_postdata();
endif; ?>
<div class="alt-caption"></div>
</div>
<div class="archief1">
</div>
</div>
</div>
Your href is empty. Let's have a look at your source code:
<a class="alt-caption external" href="http://">www.aimassociates.nl</a>
The href attribute is looking at "http://".
Maybe you must add an echo?
<?php echo the_field('url_site'); ?>
It's weird that the same PHP code returns different result, have you copy/paste the code just as is in your files?
Why don't you try this?
<?php $site_url = the_field('url_site'); ?>
<a class="alt-caption" href="http://<?php echo $site_url; ?>"><?php echo $site_url; ?></a>
You use php to load the link. Why not use php the entire way for that line of code? Something like this:
echo('<a class="alt-caption" href="' . $the_field . '" target="_blank"><' . $the_field . '></a>');
Also make sure that your homepage correctly reads the php data.
Related
I've created custom post type as single-service.php and I have several custom taxonomies under service posts like education, recruit and health.
I currently created some queries and under each query, I want to create a button which direct the users the contact form page of that service. It is like when you get into a single service page which is categorized under education there will a button directs them to education contact form page likewise for recruit page.
I have tried below link but somehow it does not work. I am not sure whether I am using correct code or where do I make mistake
<?php if (in_category( 'education', $post->ID )) : ?>
<?php echo '<div class="button">Contact us</div>'; ?>
<?php elseif (in_category('recruit', $post->ID)) :?>
<?php echo '<div class="button">Contact us</div>'; ?>
<?php elseif (in_category('health', $post->ID)) :?>
<?php echo '<div class="button">Contact us</div>'; ?>
<?php endif;?>
I solve my problem by creating two custom fields in the template page and linking them with :
<div class="service-button">
<?php $info = get_post_meta(get_the_ID(), '_post_info', true); if (!$info) $info = array(); ?>
<a class="form" style="background-color:<?php echo $info['color'] ?>" href="<?php echo $info['form'] ?>">Contact us</a>
<?php if ($info['website']) : ?>
<a class="website" style="background-color:<?php echo $info['color'] ?>" href="http://<?php echo $info['website'] ?>"><?php echo $info['website'] ?></a>
<?php endif; ?>
</div>
I am completely confused about the way I should use PHP code in this line:
<div class="post-img" style="backgroung-image:url(' <?php echo $thumbnail[0] ?> ')"></div>
It seems to me that it is read as a text in my example.
I also have tried another approach which also didn't work for the same reason, I believe...
<?php echo '<div class="post-img" style="backgroung-image:url(' . $thumbnail[0] . ')"></div>' ?>
$thumbnail variable contains a link to the main image of a Wordpress post:
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ) );
Please, give me an advice, how can I apply a dynamic link to a Wordpress post image?
If your div has no content then you have to add height in CSS like this:
<div class="post-img" style="background:url('<?php echo $thumbnail[0]; ?>')no-repeat; height:200px;">
Try this
<div class="post-img" style="backgroung-
image:url('<?php
wp_get_attachment_image_src(
get_post_thumbnail_id($post_id )[0] ); ?>')">
</div>
Some WordPress function directly display the string. No need to echo them.
generall, the results will be like this,
array{
[0] => url,
[1] => width</em>
[2] => height</em>
[4] => is_intermediate
}
you can do something like this
<?php echo '<div class="post-img" style="backgroung-image:url(' . $thumbnail[0] . ') . $thumbnail[2] ."></div>' ?>
ADyson and Nobita gave me the solution in comments to my question, which is:
echo '<div class="post-img" style="background-image:url(\'' . $thumbnail[0] . '\')"></div>';
I have this PHP code that works excellent in displaying arrows to previous/next pages of WordPress child pages:
<?php // Button Code for Prev and Next Page
$my_wp_query = new WP_Query();
$all_wp_pages = $my_wp_query->query(
array('post_type' => 'page'));
$portfolio = get_page_by_title('Services');
$args = array (
'child_of' => $portfolio->ID,
'sort_order' => 'asc',
'post_type' => 'page'
);
$portfolio_children = get_pages( $args );
$pages = array();
foreach ($portfolio_children as $page) {
$pages[] += $page->ID;
}
$current = array_search($post->ID, $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>
<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="previousarrow">
<a href="<?php echo get_permalink($prevID); ?>" title="<?php echo get_the_title($prevID); ?>">
<img src="<?php bloginfo('url');?>/wp-content/uploads/2016/06/previousbutton.png">
</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="nextarrow">
<a href="<?php echo get_permalink($nextID); ?>" title="<?php echo get_the_title($nextID); ?>">
<img src="<?php bloginfo('url');?>/wp-content/uploads/2016/06/nextbutton.png">
</a>
</div>
<?php } ?>
</div>
Problem is that on the first and last pages, I can't get it to show the previous/next button to go to the 'last or first' page of the child pages.
Example
A (parent)
1 (child page 1)
2 (child page 2)
3 (child page 3)
I want the previous option on page 1 to go to page 3 and vice versa but I can't figure that out. Any help is appreciated.
The buttons are not appearing because of the php if parameters, which eliminates the previous arrow on page 1 and next arrow on page 3 because it recognizes them as empty. One way around this would be to remove the if clauses and use if statements to define your prevID and nextID variables, or you can simply add else statements after each if statement defines the previous/next buttons to be shown. However, both of these solutions are temporary, as you would require the number of pages in order to implement them, which is subject to change. Instead, use this code to ensure this feature will stay intact even if you add additional pages:
<?php if (empty($prevID)) { $firstpage = $pages[$current]; }
if (empty($nextID)) {$lastpage = $pages[$current]; }
This will define the value of the first and last pages, and can simply be inserted after you define prevID and nextID. Now simply add php else statements like so:
</div> <?php }
else { ?>
<div class="previousarrow>
<a href="<?php echo get_permalink($lastpage); ?>"
title="<?php echo get_the_title($lastpage); ?>">
<img src="<?php bloginfo('url');?>
/wp-content/uploads/2016/06/previousbutton.png"></a></div>
<?php }
This block of code would be inserted after your first div class, as the previous arrow should navigate to the last page when no previous page exists. Do the exact same after the second div class, replacing the lastpage variable with the firstpage one we created. Hope this helps!
I´m display a slider that get´s the images from custom field, now I need that the slider shows different images depending on the language (es - ca):
This is the code of the slider:
<a href="<?php the_field('slider_home_1_enlace') ?>">
<img src="<?php the_field('slider_home_1'); ?>">
</a>
So I´m creating a conditional tag to load images depending of the language of qtranslate plugin:
<?php
_e('<!--:es-->
<a href="<?php the_field('slider_home_1_enlace') ?>">
<img src="<?php <the_field('slider_home_1'); ?>">
</a>
<!--:-->
<!--:ca-->
<a href="<?php the_field('slider_home_1_enlace_ca') ?>">
<img src="<?php the_field('slider_home_1_ca'); ?>">
</a>
<!--:-->');
?>
I´m a php begginer so I see the problem maybe that the php is inside another php, because this way its not working, if i just put text between tags it works properly for the language.
Any ideas how to syntax this?
You need to check language first, using if - else
detect the language and store it to the variable named $language and then check the condition as below.
<?php
if(qtrans_getLanguage()=="es"){
?>
<a href="<?php the_field('slider_home_1_enlace'); ?>">
<img src="<?php the_field('slider_home_1'); ?>">
</a>
<?php
} else if(qtrans_getLanguage()=="ca"){
?>
<a href="<?php the_field('slider_home_1_enlace_ca'); ?>">
<img src="<?php the_field('slider_home_1_ca'); ?>">
</a>
<?php
}
?>
You can't have php-tags inside each other.
Use basic string concatenation to combine your strings: http://php.net/manual/en/language.operators.string.php
You can't use it that way. Compare: (I guess that the_field() returns the string ;))
<a href="'.the_field("slider_home_1_enlace").'">
<img src="'.the_field("slider_home_1").'" />
</a>
There are multiple mistakes. At first, you can't use the
'.(your things here).'
Second, theres a < in your fourth line and you forget to close your img-tag.
First, install the qTranslate Wordpress plugin.
Then, you can try this:
<?php
$slider_img_fields_langs = array(
'',
'ca',
'es',
);
$lang = qtrans_getLanguage();
if( !in_array( $lang, $slider_img_fields_langs ) );
$lang = '';
echo '
<a href="' . the_field( 'slider_home_1_enlace' . $lang ) . '">
<img src="' . the_field( 'slider_home_1' . $lang ) . '">
</a>';
?>
I want to make the joomla articles intro image to behave like the read more, and the title link. So the user clicks the image, and the article loads.
I'm not an PHP expert but maybe this is the readmore links code:
<a href="<?php echo $this->item->readmore_link; ?>" class="button<?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::_("Read Article");
endif; ?></a>
This is what i want to do with every intro image on my joomla site.
Thanks !
Just resolved it!
your way of thinking helped me. Thank you!
here's my code:
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>">
<?php
$images = json_decode($item->images);
if (isset($images->image_intro) and !empty($images->image_intro)) {
$imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro;
$class = (htmlspecialchars($imgfloat) != 'none') ? ' class="size-auto align-'.htmlspecialchars($imgfloat).'"' : ' class="size-auto"';
$title = ($images->image_intro_caption) ? ' title="'.htmlspecialchars($images->image_intro_caption).'"' : '';
echo '<img'.$class.$title.' src="'.htmlspecialchars($images->image_intro).'" alt="'.htmlspecialchars($images->image_intro_alt).'" />';
}
echo $this->item->introtext;
?>
</a>
for Joomla 2.5:
in your override for _item.php (Location: yourtemplate\html\mod_articles_news\item.php)
place the following line:
<?php if ($params->get('image')) : ?>
<?php $images = json_decode($item->images); ?>
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<img src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
<?php endif; ?>
<?php endif; ?>
Place it there where you would like it to show up
For example after:
<?php echo $item->beforeDisplayContent; ?>
Your intro image has become a link now.
the isset part, makes sure that if a viewer uses Internet Explorer, it doesn't show up a small red cross box.
Just for the information:
in blog_item.php you can find an example code how it's shown up in an article. Here you can also find the code for imagefloat etc.
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
So let me start by explaining what the code that you've posted above does. The entire block of code generates one link: there are a bunch of if statements that are determined based off some settings. For example, if you have set that people need to register in order to read more, the link will say "Register to read more..."
The part that we're interested in here, however, since we want to turn images into links, is the URL that we want the images to link to. This is right in the first line:
<a href="<?php echo $this->item->readmore_link; ?>"
so we know that the URL is provided dynamically thanks to $item->item->readmore_link and all this code is doing is echoing it into the HTML.
All that's left is to edit your Joomla template of the page on which you have your images (probably the same file you took this code from). It looks like this should be part of a greater PHP loop, which loops through all the posts. Somewhere above where you found this code, should be code for the intro image that goes along with that post.
I'm not sure what it'll look like, it could be a <img src="<? stuff here; ?> /> or it could be dynamically generated. Keep reading. If you're still not sure where to find it at the end, edit your post with the full code of the template where you got the above snipping from. Regardless of what it looks like, it is referred to as <WHATEVER IMAGE CODE YOU FOUND ABOVE> in the following step:
You have to wrap that image with "a" tags so that it looks like the following:
<WHATEVER IMAGE CODE YOU FOUND ABOVE>
That should do it. Let me know if you have any trouble, I'll be more than happy to make my post more specific if you can provide more detailed information, but I've tried to explain it well enough that you should be able to figure it out with a couple tries.
As you stated you are not a PHP expert, it sounds like your best bet will be to use a Joomla extension that has similar functionality to what you want.
I believe mod_minifrontpage will work for what you need. It allows you to display a list of articles, and it generates thumbnails for those articles based on the first image to be referenced.
There are article intro images in J, since 1.7.5 and now in latest 2.5.3
what you need is change the defaults for component_content,
you can do it 2 ways, editing views in yourinstall/components/com_content/views/
or use template overrides , you first need to know if your template IS using overrides otherwise if you edit component views in the component itself you will not see changes.
to verify this , go to
site_name/templates/template_name/html folder and check if there is folder name
com_content ,
if that is the case than your template is using overrides and any edits should be done trough there not through component
now to the actual code
this is in
components\com_content\views\featured\tmpl\default_item.php ( THIS I DEFAULT FRONTPAGE ARTICLE VIEW)
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
all you would need to do is wrap a element around IMG tag with readmore link like this
<a href="<?php echo $this->item->readmore_link; ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</a>
DO NOT forget that if there is template override for com_content you wold need to edit the featured/default_item.php inside it
In Joomla 3.1, the intro_image layout has been moved to the layouts/joomla/content folder. In my situation, it is called from com_content/views/category/tmpl/blog_item.php like so:
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
I moved that file to my template/html/com_content/category/blog_item.php and then wrapped the call to JLayoutHelper like so:
<?php $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>
<a href="<?php echo $link; ?>">
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
</a>
If you have Gantry installed on Joomla 3.1, the overrides are in a different location. You will want to navigate to plugins/system/gantry/overrides/3.0/2.5/com_content/category/blog_item.php and wrap the intro image with the read more link code.
<?php $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>
<a href="<?php echo $link; ?>"><img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/></a>