How to display featured image of HOVERED wordpress post in a specific DIV? - wordpress

I want to make my websites first page so you have posts listed with only titles and meta.
When you found something interesting you'd put the cursor on the title (linking to the post) and that would display a featured image beside (either on a specific spot on the site or offset just enough to not cover any of the text or replacing the cursor).
Here is an example in action:
example of hover effect
I would put this code in a PHP snippet that I would add to a page with a shortcode. Right now the best I have is this:
<?php
echo '<div class="feauturedImg">';
$args = array('page_id => );
$featured_image = get_posts($args);
foreach($featured_image as $image) : setup_postdata($image);
echo the_post_thumbnail();
endforeach;
wp_reset_postdata();
echo '</div>';
?>
It should make a div and display the featured image inside it. I need to get the featured image of whichever post is being hovered dynamically. This is how I'd get the link of a hovered post in JS but I don't know how or if it's even possible to implement it.
I would need to pass it in to the PHP and get the post ID from it:
<script>
$('.hoverLink').hover(
function(){
var myHref = $(this).attr('href');
},
function(){
$('.hoverDetail').remove();
});
</script>)
Basically I need a way to get the hovered link from a JS or a way to save a hovered link into a PHP variable to than put it in url_to_postid() function and get the ID of the post to put into this section:
$args = array('page_id => );
(first PHP code) to display the right image.
Any ideas?

Related

How to Change logo on the specific page of website in wordpress?

I m working on a website in wordpress.
I searched for a problem that i want a different logo in one page of my site using any plugin but i didn't find a satisfactory solution.
Kindly someone tell me how can i do this that main logo should be appear on the whole site but secondary logo should appear on one page of my site
if you know wordpress developement, you can use conditional tags. ref
You can use the is_page() method to check which page you are in and change the logo accordingly.
So, in the header or where ever your logo is displayed, you will do it like this:
<?php
//Returns true when the Pages displayed is either post ID = 42, or post_name is "about-me", or post_title is "About Me And Joe".
if(is_page( array( 42, 'about-me', 'About Me And Joe' ) ) )
{
//display the secondary logo
}
else
{
//display the main logo
}
Of course I'm assuming here that the page you want it to be different is a WordPress page
If it's a listing page or a single post page then you can use different methods of checking. All of which are described here.
Please insert this code to your header.php file.
$ss = $wp_query->post->post_title;
if($ss == 'your page name'){
echo '<img src="/your-new-logo.png" />';
}
else{
echo '<img src="/your-current-logo.png" />';
}

Get URL of image placed in my Footer area in Wordpress as widget

I created widget area (Footer area) for my Wordpress theme where I can add Image widget. The thing is that I would like to get url of image that is into my Footer area as widget. Is there a function for that?
In functions.php I add:
function widgets() {
register_sidebar(
array(
'name' => 'Footer area',
'id'=> 'footer_area1'
)
);
}
In my header.php I add:
<div id="Footer">
<?php
dynamic_sidebar('footer_area1');
?>
</div>
Now, I can add all sorts of widgets (Image, Text, Meta, Menu etc.) into that area. But when I add Image widget that is default widget, I would like to get URL of image/picture that is placed in that area through Image widget. How can I get url?
I hope that clears the question.
This will work for you
<?php dynamic_sidebar( 'footer_area1' ); ?>
As per the documentation https://developer.wordpress.org/reference/functions/dynamic_sidebar/
Edit
If you would like to extend the Image Widget, you can try look at using this https://codex.wordpress.org/Function_Reference/the_widget
But for a much more easier approach, I'd suggest uploading your image to Media Library and then copying the image url from there and pasting it into a custom widget area.
Widget settings are stored in the options table. You can get the content of an option field with get_option(). Replace MY_WIDGET with the actual ID of your widget:
$widget = get_option( 'widget_MY_WIDGET' );
Use print_r to inspect the returned value (false if option does not exist) and get an idea of how to grab the desired value:
print_r( $widget );
EDIT :
To find the widget id :
Open Appearance->Widgets
On top of the screen, find “Screen Options” and open it
Click on “Enable Accessibility Mode”
Find a widget for which you want to know ID and click the “Edit” button
In the address bar, find “editwidget=something” where “something” is the ID you are looking for

Force specific thumbnail size using wp_get_attachment_image

I've seen all kind of solutions to this issue but none of them resolved my simple problem.
As you can see on the website I'm working on the thumbnails to the right are not equal.
I need to set them to be 214x121px as the thumbnails.
I've tried using plugins such as Regenerate thumbnails (after adding new image size to functions.php) and Custom image sizes, with no success.
I think it's obvious but <?php echo wp_get_attachment_image( $attachment->ID, array(214, 121), false );?> since as I understood Wordpress will bring the closest, considering proportions, image to the given size.
My Wordpress version is 3.6.
Any ideas/assistance will be appreciated.
I generally use wp_get_attachment_image_src for doing this, and here's how I do it:
If you've added your custom image size like this:
add_image_size( 'blog_featured_image', 214, 121, false); //Featured Image for Blog
Then in your template, you could call the custom image size like this:
<?php $imageID = get_field('featured_resource_image');
$imageURL = wp_get_attachment_image_src( $imageID, 'blog_featured_image' ); ?>
<img src="<?php echo $imageURL[0]; ?>" />
'featured_resource_image' is a custom field I create using Advanced Custom Fields plugin, but the get_field for it just returns the ID of the image selected. So I assign the image's ID to $imageID. I then get the image's object using wp_get_attachment_image_src, where I used the custom image size of 'blog_featured_image'. This returns an array with all the image's data. The first record in the array is the URL of the image, so I echo out $imageURL[0] to return the URL.
There's probably other ways to do it, possibly much better ways, but this way has always worked for me.
EDIT:
From looking at the function you are referencing, this should work:
Define your custom image size as outlined above. Then use this:
<?php wp_get_attachment_image( $attachment_id, 'blog_featured_image' ); ?>
Just set $attachment_id to equal your image's ID however you are currently grabbing the ID.

How to get the images from the posts

I have implemented my blog using wordpress and in my posts iam directly posts the images but while if I want to display them they are not retrieving.
I have used the_content() then it was displaying the image with the remaining content in that post can anyone suggest me How to retrieve those images..??Thanx in advance
You are inserting images in the content area,so obviously it will be appearing as content on front end.
You need to set the images as Featured image or add them by using Add media option at the top of text editor.
For retrieving the image from Featured image:(Single image)
wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full')
For retrieving the image from Add media:(Multiple images)
$img_small = get_children('order=ASC&orderby=menu_order&post_type=attachment&post_parent=' . $post->ID);
foreach ($img_small as $imagesmall) {
$attachmentID = $imagesmall->ID;
$attachmentURL = wp_get_attachment_url($attachmentID);
<img src="<?php bloginfo('template_url'); ?>/phpThumb/phpThumb.php?src=<?php echo $attachmentURL; ?>&w=365&h=280&iar=1">alt="Image" />
}

Wordpress Shortcode Displays as is on the Page

I am using a Portfolio Plugin. And it asks me to add the following shortcode in to the page where i want to show the content
[nimble-portfolio template="2colmosaic" types="3,4,5" items_per_page="3"]
When i do the following
$view = get_page_by_title('View');
echo $view->post_content;
It displays
[nimble-portfolio template="2colmosaic" types="3,4,5" items_per_page="3"]
as text when rendered
Edit
I tried to do the following
echo apply_filter('the_content', $view->post_content);
But it doesn't Render the full page now. And stops upto that point.
Try this following code and let me know the case then -
<?php echo do_shortcode($view->post_content); ?>

Resources