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.
Related
I've been tasked to fixed the wordpress web site problem for our client and almost everything is fixed except the part of the code that never display the background image.
I've been working the fix on my local computer and imported all the data from online. And below is the code I've tracing.
<?php
$taxonomies = get_all_category_ids();
var_dump($taxonomies);
$count = 1;
foreach ($taxonomies as $cat_id) {
$cats_id = intval($cat_id);
var_dump($cats_id);
$category = get_category($cats_id);
var_dump($category);
$cat_meta = get_option("category_$cats_id");
$image_cat = get_option("category_$cats_id");
var_dump($image_cat);
if ($category->parent == 9) {
$thumbnail_id = get_term_meta( $cats_id, 'wpfifc_featured_image', true );
$thumbnail_html = wp_get_attachment_url( $thumbnail_id, 'post-thumbnail' );
$categ_slug = $category->slug;
$categ_name = strtoupper($category->name);
if ($categ_slug == 'all-day-breakfast'): ?>
<div style="background-image:url(<?php echo $image_cat['img'];?>);background-size: 100%;" class="box_menu01 <?php echo $categ_slug?>" background>
<span>
<?php echo $categ_name; ?>
</span>
</div>
<?php else: ?>
<div style="background-image:url(<?php echo $image_cat['img'] ?>);background-size: 100%;" class="box_menu02 <?php echo $categ_slug?>" background>
<span><?php echo $categ_name; ?></span>
</div>
<?php endif; ?>
<?php $count++;
}
}
?>
Base on the var_dump result this
$image_cat = get_option("category_$cats_id");
part should return image path, because this being used in
<div style="background-image:url(<?php echo $image_cat['img'];?>);background-size: 100%;" class="box_menu01 <?php echo $categ_slug?>" background>
In online, image_cat is an array with value image path, but in the local, its value is false.
I've been looking anywhere in dashboard or using var_dump() but could not trace the problem. Is there someone here encounter the same problem?
$image_cat = get_option("category_$cats_id");
what is category_$cats_id ?
I think the code should be
$image_cat = get_option("category_".$cats_id."");
I am using Wordpress and trying to create some boxes retrieving information from Adanvec Customs Fields on a custom post type.
I have this code:
<div class="col-sm-2 hidden-xs">
<?php
$box1 = get_front_page_box("Box 1");
$style_front = get_box_style($box1->ID, "front");
echo $box1->ID;
?>
<div id="front-box-1" class="front-box height-low <?php echo $box1->ID; if(has_back_panel($box1->ID)) echo "flip"; ?>">
<div class="front" style="<?php echo $style_front; ?>">Banana</div>
<?php
if(has_back_panel($box1->ID)):
$style_back = get_box_style($box1->ID, "back");
?>
<div class="back" style="<?php echo $style_back; ?>"></div>
<?php endif; ?>
</div>
</div>
<div class="col-sm-5 hidden-xs">
<?php
$box2 = get_front_page_box("Box 2");
$style_front = get_box_style($box2->ID, "front");
echo $box2->ID;
?>
<div id="front-box-2" class="front-box height-low <?php echo $box2->ID; if(has_back_panel($box2->ID)) echo "flip"; ?>">
<div class="front" style="<?php echo $style_front; ?>">Banana</div>
<?php
if(has_back_panel($box2->ID)):
$style_back = get_box_style($box2->ID, "back");
?>
<div class="back" style="<?php echo $style_back; ?>"></div>
<?php endif; ?>
</div>
</div>
And these functions:
function get_front_page_box($name) {
$args = array(
'post_title' => $name,
'post_type' => 'front-page-box',
'post_status' => 'publish'
);
$box_array = get_posts($args);
$box = $box_array ? $box_array[0] : false;
print_array($box);
return $box;
}
function get_box_style($id, $side) {
$style = "";
if(get_field($side."_panel_background_color", $id)) $style = "background-color:".get_field($side."_panel_background_color", $id).";";
return $style;
}
But for some reason both boxes have the same details (both from Box 2).
Any idea why these are returning the same info? Both posts ("Box 1" and "Box 2" exist under the front-page-boxcustom post type.
Seems the post_title is not a valid filter.
But found out there's a specific function to get posts by title.
get_page_by_title
Used $box1 = get_page_by_title("Box 1", NULL, "front-page-box");
Just for check, if you add another Box named "Box 3", all boxes have results from "Box 2" or "Box 3" ?
A better way to do this would be to use the post ID as the parameter in get_front_page_box().
I have this custom search function to search trough custom meta keys in Wordpress. The function works well.
However, all the images that I have added to my post using Advanced Custom Fields are now having their URL's changed to the attachment ID.
This should not happen according to the settings page in ACF:
The same field works ok on other pages, just not on the search results page. Check how it changes the image source on the search results:
How and why is the image URL here changed to the attachment ID? Kindly check out my code below:
function custom_search_function($pieces) {
// filter to select search query
if (is_search() && !is_admin()) {
global $wpdb;
$custom_fields = array('regio','provincie');
$keywords = explode(' ', get_query_var('s'));
$query = "";
foreach ($custom_fields as $field) {
foreach ($keywords as $word) {
$query .= "((mypm1.meta_key = '".$field."')";
$query .= " AND (mypm1.meta_value LIKE '%{$word}%')) OR ";
}
}
if (!empty($query)) {
// add to where clause
$pieces['where'] = str_replace("((({$wpdb->posts}.post_title LIKE '%", "( {$query} (({$wpdb->posts}.post_title LIKE '%", $pieces['where']);
$pieces['join'] = $pieces['join'] . " INNER JOIN {$wpdb->postmeta} AS mypm1 ON ({$wpdb->posts}.ID = mypm1.post_id)";
//$pieces['groupby'] = "{$wpdb->posts}.ID";
}
}
return ($pieces);
}
add_filter('posts_clauses', 'custom_search_function', 20, 1);
EDIT: Here's the code that displays my post results, the "foto" field is the field which is responsible for displaying the image:
<?php foreach( $posts as $post ):
//fusion-column-last, or none for normal class
$lastclass = '';
if(++$counter % 2 === 0) {
$lastclass = ' fusion-column-last';
}
setup_postdata( $post )
?>
<div class="fusion-one-half fusion-layout-column fusion-spacing-yes<?php echo $lastclass?>" style="margin-top:0px;margin-bottom:20px;background-color:white;">
<div class="fusion-column-wrapper">
<div class="bw-search-picture">
<?php $postid = get_the_ID(); ?>
<?php //echo $postid; ?>
<img src="<?php the_field('foto', $postid); ?>" alt="<?php the_title(); ?>"/>
</div>
<div class="bw-search-content">
<h2>
<a class="green" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h2>
<p class="bw-regio">Regio <?php the_field('regio'); ?></p>
<p>
<a style="color:#9C9E9F;" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">LEES VERDER ></a>
</p>
</div>
</div>
</div>
<?php endforeach; ?>
Try for the thumbnail:
$imgsrc = wp_get_attachment_image_src(get_post_thumbnail_id( $post_id ));
echo $imgsrc[0];
Edit, use this code with the attachment id:
$imgsrc = wp_get_attachment_image_src(get_field('foto', $postid));
echo $imgsrc[0];
Rather than using
<img src="<?php the_field('foto', $postid); ?>" />
Try using
<?php $foto_url = get_field('foto', $postid); ?>
<img src="<?php echo $foto_url; ?>" />
Currently my image gallery has 4 images per row. If the screen is minimized below the width of those 4 images, one image will drop to the next line and there will be a line break before the next row. Is there any way to make gallery continuous instead of having the break in images when the screen is resized? Ideally, I would like to start with 5 images per row, then if the viewer has a smaller screen, it will automatically adjust the number of images per row to fit whatever size window they are using.
Here is a link to the gallery: http://rabbittattoo.com/?gallery=gallery
And the PHP:
$pp_gallery_style = get_option('pp_gallery_style');
if($pp_gallery_style == 'f')
{
include_once(TEMPLATEPATH.'/gallery-f.php');
exit;
}
if(!isset($hide_header) OR !$hide_header)
{
get_header();
}
$caption_class = "page_caption";
$portfolio_sets_query = '';
$custom_title = '';
if(!empty($term))
{
$portfolio_sets_query.= $term;
$obj_term = get_term_by('slug', $term, 'photos_galleries');
$custom_title = $obj_term->name;
}
else
{
$custom_title = get_the_title();
}
/**
* Get Current page object
**/
$page = get_page($post->ID);
/**
* Get current page id
**/
if(!isset($current_page_id) && isset($page->ID))
{
$current_page_id = $page->ID;
}
if(!isset($hide_header) OR !$hide_header)
{
?>
<div class="wrapper_shadow"></div>
<div class="page_caption">
<div class="caption_inner">
<div class="caption_header">
<h1 class="cufon"><?php echo the_title(); ?></h1>
</div>
</div>
</div>
</div>
<!-- Begin content -->
<div id="content_wrapper">
<div class="inner">
<!-- Begin main content -->
<div id="gallery_wrapper" class="inner_wrapper portfolio">
<div class="standard_wrapper small">
<br class="clear"/><br/>
<?php
}
else
{
echo '<br class="clear"/>';
}
?>
<?php echo do_shortcode(html_entity_decode($page->post_content)); ?>
<!-- Begin portfolio content -->
<?php
$menu_sets_query = '';
$portfolio_items = 0;
$portfolio_sort = get_option('pp_gallery_sort');
if(empty($portfolio_sort))
{
$portfolio_sort = 'DESC';
}
$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $post->ID,
'order' => $portfolio_sort,
'orderby' => 'date',
);
$all_photo_arr = get_posts( $args );
if(isset($all_photo_arr) && !empty($all_photo_arr))
{
?>
<?php
foreach($all_photo_arr as $key => $portfolio_item)
{
$image_url = '';
if(!empty($portfolio_item->guid))
{
$image_id = $portfolio_item->ID;
$image_url[0] = $portfolio_item->guid;
}
$last_class = '';
$line_break = '';
if(($key+1) % 4 == 0)
{
$last_class = ' last';
if(isset($page_photo_arr[$key+1]))
{
$line_break = '<br class="clear"/><br/>';
}
else
{
$line_break = '<br class="clear"/>';
}
}
?>
<div class="one_fourth<?php echo $last_class?>" style="margin-right:24px;margin-bottom:24px;margin-top:-20px">
<a title="<?php echo $portfolio_item->post_title?>" href="<?php echo $image_url[0]?>" class="one_fourth_img" rel="gallery" href="<?php echo $image_url[0]?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/timthumb.php?src=<?php echo $image_url[0]?>&h=370&w=350&zc=1" alt=""/>
</a>
</div>
<?php
echo $line_break;
}
//End foreach loop
?>
<?php
}
//End if have portfolio items
?>
</div>
<!-- End main content -->
<br class="clear"/><br/>
</div>
<?php
if(!isset($hide_header) OR !$hide_header)
{
?>
</div>
<!-- End content -->
<?php get_footer(); ?>
<?php
}
?>
Thank you in advance for you help!
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
}