I am trying to modify this Wordpress theme: http://www.elegantthemes.com/preview/DailyNotes/
For a regular Text Post, I want it to display a thumbnail picture if one exists. Otherwise, just display the Title and Excerpt from the post. Here is the IF and ELSE statement that I am stuck on. I can't get it to work and it's one or the other (always IF or always ELSE) when I change the conditional statement.
<?php if ($arr[$j]['posttype'] == 'text') { ?>
<div class="inside" onclick="window.location='<?php echo $arr[$j]["permalink"];?>'">
<?php if (file_exists($arr[$j]["thumb"])) { ?>
<span class="photospan">
<img src="<?php bloginfo('template_directory'); ?>/images/shadow-overlay.png" alt="thumbnail" class="thumb_overlay" />
<?php print_thumbnail($arr[$j]["thumb"], $arr[$j]["use_timthumb"], $arr[$j]['title'] , 149, 149, '', $post = $arr[$j]["post"]); ?>
</span>
<?php } else { ?>
<div class="overflow">
<h2><?php echo($arr[$j]['title']); ?></h2>
<?php echo $arr[$j]['excerpt']); ?>
</div>
<?php } ?>
<img class="icon" src="<?php bloginfo('template_directory'); ?>/images/icon-photo.gif" alt="article post" />
</div>
<?php }; ?>
I tried putting in different arguments of the print_thumbnail function into the IF statement and it doesn't work. Here are the arguments for the print_thumbnail function in case it helps:
function print_thumbnail($thumbnail = '', $use_timthumb = true, $alttext = '', $width = 100, $height = 100, $class = '', $echoout = true, $forstyle = false, $resize = true, $post='') {
Can anyone tell me which argument I should use in my IF statement? Thanks in advance and let me know if you need more information.
You need to do <?php if ($arr[$j]["thumb"]) { ?>
and then
else if (!$arr[$j]["thumb"]) {
Related
I need to link some gallery images to different external webistes. After some research I'm not able to found a solution that isn't using a plugin. Is this possible in wordpress without using plugins? I can't install plugins for this project so any suggestion will be appreciated thanks.
Here is my code:
$args = array(
'post_type' => 'post',
'name' => 'partners'
);
$logo_img = new WP_Query( $args );
?>
<div class="container-fluid" id="">
<div class="row" style="margin-top:1em;margin-bottom:1em;">
<?php if( $logo_img->have_posts() ): while( $logo_img->have_posts() ): $logo_img->the_post();
$logo_gallery = get_post_gallery_images( $post->ID );
if( $logo_gallery ): ?>
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<?php foreach($logo_gallery as $logo ): ?>
<img class="img-fluid" src="<?php echo $logo; ?>" alt="" width="60" id="partner-logo" style="margin:0 .5em 0 .5em;"/>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>
</div>
Depending on how many images we are talking about, if these images are named you could use some logic to create a URL based on the name, if they are not named and there aren't that many, you could rename them.
Here's an example;
<?php
// If there is a matching string, set a specific URL
if (preg_match('/site1/',$logo)) { $set = "yes"; $link = "https://website1.com"; }
if (preg_match('/site2/',$logo)) { $set = "yes"; $link = "https://website2.com"; }
if (preg_match('/site3/',$logo)) { $set = "yes"; $link = "https://website3.com"; }
// If there is no matching string, set a default URL
if ($set !== "yes") { $link = "https://default.com"; }
// Now encase your image in a URL
echo "<a href='$link'>
<img class='img-fluid' src='$logo' alt='' width='60' id='partner-logo' style='margin:0 .5em 0 .5em;'/>
</a>";
?>
By the way, id='partner-logo' - the id should be unique.
I want to change some php code to select a random image from a specified directory rather than the same default image it currently selects. This is the piece of code that currently selects a default fallback image - if there is no image available:
<?php
$postCover = '';
if ($post->hasImage()) {
$postCover = $post->getImage($photoSize);
}
if (!$post->hasImage() && $params->get('photo_legacy', true)) {
$postCover = $post->getContentImage();
}
if (!$postCover && $params->get('show_photo_placeholder', false)) {
$postCover = $post->getImage($photoSize, true);
}
?>
<?php if ($postCover) { ?>
<div class="eb-mod-thumb<?php if ($photoAlignment) { echo " is-" . $photoAlignment; } ?> <?php if (isset($photoLayout->full) && $photoLayout->full) { echo "is-full"; } ?>">
<?php if (isset($photoLayout->crop) && $photoLayout->crop) { ?>
<a href="<?php echo $post->getPermalink();?>" class="eb-mod-image-cover"
style="
background-image: url('<?php echo $postCover;?>');
<?php if (isset($photoLayout->full) && $photoLayout->full) { ?>
width: 100%;
<?php } else { ?>
width: <?php echo $photoLayout->width;?>px;
<?php } ?>
height: <?php echo $photoLayout->height;?>px;"
></a>
<?php } else { ?>
<a href="<?php echo $post->getPermalink();?>" class="eb-mod-image"
style="
<?php if (isset($photoLayout->full) && $photoLayout->full) { ?>
width: 100%;
<?php } else { ?>
width: <?php echo (isset($photoLayout->width)) ? $photoLayout->width : '260';?>px;
<?php } ?>"
>
<img src="<?php echo $postCover;?>" alt="<?php echo $post->title;?>" />
</a>
<?php } ?>
</div>
<?php } ?>
I think it is this line I need to change:
<img src="<?php echo $postCover;?>" alt="<?php echo $post->title;?>" />
I have found this solution on here: PHP pull random image from folder
<?php
$dir = "images/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?> <img src="images/<?php echo $images[$i]; ?>" alt="" />
Which seems to be able to do what I want, but I am unsure how to incorporate it (or where) in the code I have supplied (not having php experience, but trying to learn).
Can anyone help me?
Kind regards
Mel
Let's say the link to your default image is : /path/to/default_imge.jpg
So a little solution for someone who doesn't like to create a big mess for this is :
.....
if (!$postCover && $params->get('show_photo_placeholder', false)) {
$postCover = $post->getImage($photoSize, true);
}
?>
// New Code Starts
$path='/path/to/default_imge.jpg';
if(stristr($postCover,$path) !==false){
$dir = "images/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
$postCover="images/".$images[$i];
}
// New Code Ends
<?php if ($postCover) { ?>
.......
In this case you can go back to the normal behavior just be removing the new code.
This will not answer your question, but this will help you while learning PHP/HTML
You mix up html and PHP in a way that makes the code unreadable.
In place of doing this:
if ($var) { ?> <div>Some HTML</div> <?php }
else { ?> <div>Some other HTML</div> <?php } ?>
Do this:
if($var){
echo "<div>Some HTML</div>";
}
else{
echo "<div>Some other HTML</div>";
}
It's a common beginner mistake, that makes it more difficult to learn coding because it "obfuscate" your code.
This will make your code more understandable for you and for us :)
I use open cart I am trying to get on my slideshow controller remove the $width and $height.
And just get the image, title, and link. I have tried to remove the $widths and $height but still get error
<?php
class ControllerModuleSlideshow extends Controller {
public function index($setting) {
static $module = 0;
$this->load->model('design/banner');
$this->load->model('tool/image');
$this->document->addStyle('catalog/view/javascript/jquery/flexslider/flexslider.css');
$this->document->addScript('catalog/view/javascript/jquery/flexslider/jquery.flexslider-min.js');
$data['width'] = $setting['width']; //need to remove
$data['height'] = $setting['height']; //need to remove
$data['banners'] = array();
$results = $this->model_design_banner->getBanner($setting['banner_id']);
foreach ($results as $result) {
if (is_file(DIR_IMAGE . $result['image'])) {
$data['banners'][] = array(
'title' => $result['title'],
'link' => $result['link'],
'image' => $this->model_tool_image->resize($result['image'], $setting['width']//need to remove, $setting['height']//need to remove)
);
}
}
$data['module'] = $module++;
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/slideshow.tpl')) {
return $this->load->view($this->config->get('config_template') . '/template/module/slideshow.tpl', $data);
} else {
return $this->load->view('default/template/module/slideshow.tpl', $data);
}
}
}
Can't seem to find the way to make this work in replace of the width and height
public function getImage($image){
$image = DIR_IMAGE . $image;
if($this->request->server['HTTPS']) {
return $this->config->get('config_ssl') . 'image/' . $image;
} else {
return $this->config->get('config_url') . 'image/' . $image;
}
}
$this->getImage($result['image']);
I had this exact problem not too long ago. It was driving me daft and I all I wanted was to make the slide show responsive but the W x H values were becoming very troublesome to remove without affecting other classes. Portability was also a serious concern of mine. Basically all this is doing is riding off the nivoslider code but using the bootstrap carousel for the display. So you could change the slideshow banners as you always have, and they are always displayed on the front end.
If you happen to be using the bootstrap 3 framework, this is a great work around which proved successful. Don't edit the slideshow.php, edit slideshow.tpl instead. I highly don't recommend you mess with the php files unless you are very comfortable with php and the idea of mvc in opencart. To be honest, you probably should never edit, just extend or start from scratch as it uses fall back mechanisms.
But anyway, the code:
<div class="col-md-12" >
<div id="homepage" class="carousel slide">
<div class="carousel-inner">
<?php
$flag = 0;
foreach ($banners as $banner) { ?>
<div class="item <?=$flag==0?"active":""?>">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
</div>
<?php } ?>
<?php
$flag=1;
} ?>
</div>
</div>
...and the JQuery
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 5000
});
});
</script>
edits welcomed
Width and Height are the feature which will help you to assign width and height dynamically that you can set from the admin panel
admin>extensions>modules>slideshow[edit]
if you don't want this feature in effect
Simply go to the template file
find (catalog/view/theme/default/template/module/slideshow.tpl)
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
Replace with
<div id="slideshow<?php echo $module; ?>" class="nivoSlider">
two ways to help u :)
in catalog/controller/module/slideshow.php
BEFORE
$this->data['width'] = $setting['width'];
$this->data['height'] = $setting['height'];
AFTER
$this->data['width'] = '0'; // or NULL
$this->data['height'] = '0'; // or NULL
in catalog/view/theme/default/template/module/slideshow.tpl
BEFORE
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
AFTER
<div id="slideshow<?php echo $module; ?>" class="nivoSlider">
if you need to add custom height and width add this to above code change 000 to you size
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: 000px; height: 000px;">
I'm using the jquery cycle to create a slideshow in my Wordpress template. The "pager" is creating buttons that overlay the slideshow and rollover advances the slides. The trouble I'm running into is that I need the rollover to stay the same, but I also need to set an href so that clicking on the buttons takes the user to a specific page.
I need to retrieve the variable $target from my slideshow for the href.
I need the onclick to make the button clickable.
As I stated above, I'm new at this and it's quite possible that this is terrible code/can't be done/I'm a moron.
My jquery:
<script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery.cycle.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
if ( $('.slides > .slide').size() > 1 ) {
$('.slides')
.cycle({
timeout: 6000,
speed: 1000,
pager: '#slides #mainNav',
pauseOnPagerHover: 200,
pagerEvent: 'mouseover',
pause: true,
pagerAnchorBuilder: function(idx, slide) {
var slideImage = $(slide).find('img');
var slideTitle = slideImage.attr('title');
var slideURL = "<?php echo $target; ?>";
return '<li>' + slideTitle + /* '<br /><span class="description">' + slideDescr + '</span>*/'</li>';
}
});
}
});
</script>
and my Wordpress slideshow:
<?php if ( is_front_page() && $slides = get_posts(array('numberposts' => -1, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'slide')) ) : ?>
<div id="mainImg">
<div id="slides">
<div class="slides">
<?php foreach ($slides as $slide) : ?>
<?php $title = $slide->post_title; ?>
<?php $content = wpautop($slide->post_content); ?>
<?php $description = get_post_meta($slide->ID, 'description', true); ?>
<?php $thumb = get_the_post_thumbnail($slide->ID, 'slide', array('title' => $title, 'alt' => $description)); ?>
<?php $url = get_post_meta($slide->ID, '_slide_url', true); ?>
<?php $target = (get_post_meta($slide->ID, '_slide_url_blank', true)) ? 'target="_blank"' : ''; ?>
<div class="slide">
<?php if ($url) : ?>
<a href="<?php echo $url; ?>" <?php echo $target; ?>><?php echo $thumb; ?></a>
<?php else: ?>
<?php echo $thumb; ?>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<div id="mainNav"></div>
</div>
</div><!--end mainImg-->
<?php endif; ?>
Thank you in advance for your help.
Where you have:
var slideURL = "<?php echo $target; ?>"
Replace it with:
var slideURL = $(slide).find('a').attr('target');
What you are doing above is getting the slide object, finding the 'a' tag in the slide, and then getting the "target" attribute of the 'a' tag. This value is then assigned to the slideURL variable (which will either be '_blank' or undefined). For more information on how to use jQuery to get HTML elements and/or their attributes, you should familiarise yourself more with jQuery's Traversing and Attributes methods.
You should never mix Javascript code with PHP or even HTML code anyway. Read up more on "Unobtrusive JavaScript".
I am trying to achieve result with below structure in foreach loop where after every two images it will repeat entire structure.
I have some basic knowledge for something I can use eg. counter++; and than %2 but don't know syntax and how to use it for my code.
<?php
function dt_attached($postid=0, $size='thumbnail', $attributes='', $linksize='full', $count=-1) {
if ($postid<1) $postid = get_the_ID();
if ($images = get_children(array(
'post_parent' => $postid,
'post_type' => 'attachment',
'numberposts' => $count,
'post_mime_type' => 'image',)))
foreach($images as $image) {
$attachment=wp_get_attachment_image_src($image->ID, 'thumbnail');
$small_image = wp_get_attachment_image_src($image->ID, 'midium');
$big_image = wp_get_attachment_image_src($image->ID, 'full');
?>
<div class="mainrow">
<div class="block">
<a href='<?php echo $big_image[0]; ?>' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '<?php echo $small_image[0]; ?>' ">
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
</a>
</div>
<!--[I want to get two images in mainrow]-->
<div class="block">
<a href='<?php echo $big_image[0]; ?>' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '<?php echo $small_image[0]; ?>' ">
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
</a>
</div>
</div>
<?php //the_attachment_link($image->ID, false, true, false); ?>
<?php }
}
?>
So what I want is if there is more than two images it will repeat entire html structure. Thanks a lot for your help
What I gathered from your comments is that you want to display two images per row, and if there's one extra image, to display a placeholder next to it in the final row.
All you need is a count of how many images there are, and whether it's an even or odd number. Then once you know you're at the last image (using an incrementing counter), you add the placeholder:
What your code doesn't do is place two images in one row. For that we need to take the modulo (%) of the counter as well.
<?php
$counter = 0;
$imgCount = count($images);
foreach ($images as $image) {
$attachment = wp_get_attachment_image_src($image->ID, 'thumbnail');
$small_image = wp_get_attachment_image_src($image->ID, 'midium');
$big_image = wp_get_attachment_image_src($image->ID, 'full');
if ($counter % 2 == 0): ?>
<div class="mainrow">
<?php endif; ?>
<div class="block">
<a href='<?php echo $big_image[0]; ?>' class='cloud-zoom-gallery' title='Thumbnail 1' rel="useZoom: 'zoom1', smallImage: '<?php echo $small_image[0]; ?>' ">
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
</a>
</div>
<?php if ($counter++ % 2 == 1): ?>
</div>
<?php endif; ?>
<?php //the_attachment_link($image->ID, false, true, false); ?>
<?php
}
// Since (if there are an odd number of images) the loop may not close the <div>,
// we have to make sure it does.
if ($counter % 2 == 0) {
?>
<!-- placeholder goes here -->
</div>
<?php
}