With the code below now working can anyone suggest how I pull out the image from the collection at a larger size, this is only working for thumbnails at the moment.
<?php
if(!hook("EditorsPick")):
/* ------------ Collections promoted to the home page ------------------- */
$home_collectionsx=get_home_page_promoted_collectionsx(16);
foreach ($home_collectionsx as $home_collectionx)
{
?>
<div class="EditorsPick">
<div class="HomePanel"><div class="HomePanelINtopEditors">
<div class="HomePanelINtopHeader">Editors Pick</div>
<div class="HomePanelINtopText">This is the editors pick of Asset Space...</div>
<div class="EditorsPicImage"><div style="padding-top:<?php echo floor((155-$home_collectionx["thumb_height"])/2) ?>px; margin-top: -24px; margin-bottom: -15px;">
<a href="<?php echo $baseurl_short?>pages/search.php?search=!collection<?php echo $home_collectionx["ref"] ?>" onClick="return CentralSpaceLoad(this,true);"><img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="<?php echo $home_collectionx["thumb_width"] ?>" height="<?php echo $home_collectionx["thumb_height"] ?>" /></div>
</div></div>
</div>
</div>
</div>
<?php
}
endif; # end hook homefeaturedcol
?>
function get_home_page_promoted_collectionsx($id=null)
{
$filterClause = '';
if(!is_null($id))
{
$filterClause = ' AND collection.ref = '.intval($id);
}
return sql_query("select collection.ref,collection.home_page_publish,collection.home_page_text,collection.home_page_image,resource.thumb_height,resource.thumb_width from collection left outer join resource on collection.home_page_image=resource.ref where collection.public=1 and collection.home_page_publish=1".$filterClause." order by collection.ref desc");
}
<img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="<?php echo $home_collectionx["thumb_width"] ?>" height="<?php echo $home_collectionx["thumb_height"] ?>" />
Why not edit this to set your desired size in pixels, like
<img class="ImageBorder" src="<?php echo get_resource_path($home_collectionx["home_page_image"],false,"thm",false) ?>" width="1000" height="800" />
Related
I am trying to give users the ability to pin posts from category pages:
Functionality: Hover over a post image and the pin button shows up which pins that specific post URL with title pulled from post.
The only way they should be able to pin is clicking the button, clicking anywhere on the image should take the user to the post page itself.
I know I can't have two HREF attributes but I'm stuck - this code is breaking the images entirely and none of the data is being pulled as specified (description, post url, etc).
script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<a data-pin-do="buttonPin" data-pin-hover="true" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/" href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<?php the_post_thumbnail(); ?>
</a>
Thank you!
Figured out the solution in case anyone ever needs:
<div class="entry-image">
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<?php the_post_thumbnail(); ?>
</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.entry-image').mouseenter(function() {
$(this).children('.pinbutton').fadeIn('fast');
});
$('.entry-image').mouseleave(function() {
$(this).children('.pinbutton').fadeOut('fast');
});
});
</script>
<?php } ?>
I guess answer is waiting for you here: Pinterest Developers
The solution requires some js/css and (in this case) wordpress calls:
<div class="entry-image">
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<?php the_post_thumbnail(); ?>
</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.entry-image').mouseenter(function() {
$(this).children('.pinbutton').fadeIn('fast');
});
$('.entry-image').mouseleave(function() {
$(this).children('.pinbutton').fadeOut('fast');
});
});
</script>
<?php } ?>
I have some images that I show on div thumbnail like images below. I want if I upload an image with different size, the image in thumbnail still shows with proportional size. Thanks for help.
<div class="col-md-4 product simpleCart_shelfItem text-center" style="height:500px;">
<a href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>">
<!--img src="admin/<?php echo $r['gambar']?>" width="394" height="480" alt="" /-->
<img src="admin/<?php echo $r['gambar']?>" height="450" alt="" />
</a>
<?php if ( $r['diskon'] != '' && $r['diskon'] != '0' ) { ?>
<a href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>">
<div class="offer3">
<span class="badge">
<span class="badge">
<span class="badge"><?php echo "Sale "."$r[diskon]"."%" ?>
</span>
</span>
</span>
</div>
<?php } ?>
<div class="mask">
Quick View
</div>
<a class="product_name" href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>">
<?php echo $r['namabarang']?>
</a>
<?php if ( $r['diskon'] == '' ) { ?>
<p> <span class="item_price"> <?php echo $harga ?></span></a></p>
<?php } ?>
<?php if ( $r['diskon'] == '0' ) { ?>
<p> <span class="item_price"> <?php echo $harga ?></span></a></p>
<?php } ?>
<?php if ( $r['diskon'] != '' && $r['diskon'] != '0') { ?>
<p> <font face="comic sans ms" color="brown" size="2"><strike> <?php echo $harga ?></strike></font></p>
<p><span class="item_price"> <?php echo $diskon ?></span></p>
</span></a></p>
<?php } ?>
</div>
If you want to place any size image onto the page and have it appear the same size you can ensure that an image fits it's parent element's size with the CSS property object-fit
https://css-tricks.com/almanac/properties/o/object-fit/
I'm trying to hide a div when the custom field is empty. When I don't use an image in the "palette" custom field I want it to hide <div class="small-12 large-12 columns center">. Thanks in advance.
<div class="small-12 large-12 columns center">
<?php
$image = get_field('palette');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
The classes on the div have padding and margins assigned to them which is creating the spacing. Removing the div all together when will remove the classes solving the issue.
You could move the if statement around the whole div, like this:
<?php
$image = get_field('palette');
if( !empty($image) ):
?>
<div class="small-12 large-12 columns center">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<?php endif; ?>
if you want to hide the div you should do this :
<div class="small-12 large-12 columns center"
<?php
$image = get_field('palette');
if (empty($image)){?>style="display:none"<?php } ?>
>
<?php
$image = get_field('palette');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
I'm having following codes in osclass\oc-content\themes\modern\item.php,
<strong class="share"><?php _e('Map', 'modern'); ?></strong>
<strong class="share"><?php _e('Photo Gallery', 'modern'); ?></strong>
<div class="map" style="display:none;">
<?php osc_run_hook('location'); ?>
</div>
<div class="slider-wrapper theme-light image" >
<div id="slider" class="nivoSlider">
<?php if( osc_images_enabled_at_items() ) { ?>
<?php if( osc_count_item_resources() > 0 ) { ?>
<?php for ( $i = 0; osc_has_item_resources(); $i++ ) { if (osc_resource_for() == 2 ) { ?>
<img src="<?php echo osc_resource_url(); ?>" width="100%" height="240px;" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" />
<?php } } ?>
<?php } ?>
<?php } osc_reset_resources(); ?>
</div>
</div>
and JavaScript code is,
$("#photo").click(function() {
$(".image").css("display","block");
$(".map").css("display","none");
});
$("#map").click(function() {
$(".map").css("display","block");
$(".image").css("display","none");
});
here photo is loading as good. But map makes following problem when I click #map.
If I load map at 1st and set display:none; to .image means, map will be loaded as fully and good.
Where is the problem?
I just tested version 3.1 and it's working on my localhost
First of all, my question may be unclear. I will try to explain it.
this is my html
<div class="left"><?php print $search_box; ?><?php if (!empty($logo)): ?><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" /><?php endif; ?><?php if (!empty($site_name)): ?><div id='site-name'><strong><?php print $site_name; ?></strong></div><?php endif; ?><?php if (!empty($site_slogan)): ?><div id='site-slogan'><?php print $site_slogan; ?></div><?php endif; ?></div>
looks ugly and difficult to debug, right?
so i try to indent and add newline. However, it will fails on some browser, may be IE6. The result is changed. So, What should i go, should i use another doctype?
Currently, i am using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You can write it this way too:
<div class="left">
<?php print $search_box; ?>
<?php if (!empty($logo)) { ?>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" />
</a>
<?php } ?>
<?php if (!empty($site_name)) { ?>
<div id='site-name'>
<strong>
<?php print $site_name; ?>
</strong>
</div>
<?php } ?>
<?php if (!empty($site_slogan)) { ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php } ?>
</div>
This should work in most cases, or you can use the php heredoc syntax to echo out the html stuff normally.