not a support questionIs it possible to have the featured image replace the logo? Or, if I can just indicate a different "logo" for each page that would work too. I'd like for the image at the top of each page to be different. For example, Home would have the current image, Health would have a photo of an apple, and so on for each page.
Thanks!
Devin
Moderator
Hi tuttlephoto,
The only way I can think of doing that would be to replace the image for each unique page id with some javascript. So in the themes js>avia.js file, you would look for this line:
jQuery.noConflict();
jQuery(document).ready(function(){Then add this after it for each page and image add:
jQuery("#top.page-id-19 h1.logo.bg-logo").find('img').attr('src', ['http://www.lifelonghealthandhappiness.com/wp-content/uploads/2013/02/TwoGirlsinField.jpg']);
Where the page-id-19 is unique to that specific page and the url is for the image you want to replace the default one on that page.
There will be a delay as the javascript loads the new image in, but as I said, this is the only way I know of to that without writing some php conditional statements for each page as well.
Regards,
Devin
Ok, so I now have this in the avia.js file:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#top.page-id-19 h1.logo.bg-logo").find('img').attr('src', ['http://www.lifelonghealthandhappiness.com/wp-content/uploads/2013/02/Happiness-Banner.jpg']);
jQuery("#top.page-id-63 h1.logo.bg-logo").find('img').attr('src', ['http://www.lifelonghealthandhappiness.com/wp-content/uploads/2013/02/Health-Banner.jpg']);
jQuery("#top.page-id-152 h1.logo.bg-logo").find('img').attr('src', ['http://www.lifelonghealthandhappiness.com/wp-content/uploads/2013/02/Longevity-Banner.jpg']);
But it doesn't seem to be working. I assume when you say there will be a delay you mean when the page actually loads?
Thank you so much for looking at this!
Devin
Moderator
I think you have a plugin that is conflicting with jquery. Its causing an error to start in the javascript which isn't letting that code work. It seems to be related to comments:
<script>
$(document).ready(function() {
Uncaught TypeError: Property '$' of object [object Window] is not a function
// Get the #comments div
var commentsDiv = $('#comments');
// Only do this work if that div isn't empty
if (commentsDiv.length) {
// Hide the comments div by default
$(commentsDiv).hide();
// Append a link to show/hide
$('<a/>')
.attr('class', 'toggle-comments')
.attr('href', '#')
.text('Show Comments')
.insertBefore(commentsDiv);
// when show/hide is clicked
$('.toggle-comments').on('click', function(e) {
e.preventDefault();
// show/hide the div using jquery's toggle()
$(commentsDiv).toggle('slow', function() {
// change the text of the anchor
var anchor = $('.toggle-comments');
var anchorText = anchor.text() == 'Show Comments' ? 'Hide Comments' : 'Show Comments';
$(anchor).text(anchorText);
});
});
} // End if commentsDiv.length
});
</script>But that is loading into the header from somewhere.
Thanks! I'll take a look at that!
I tried removing that section as well as deactivating all of my plugins but still no luck.
It seems like Devins code doesn't select the right image - try following code instead:
jQuery("#top.page-id-19 h1.logo a img").attr('src', 'http://www.lifelonghealthandhappiness.com/wp-content/uploads/2013/02/Happiness-Banner.jpg');
jQuery("#top.page-id-63 h1.logo a img").attr('src', 'http://www.lifelonghealthandhappiness.com/wp-content/uploads/2013/02/Health-Banner.jpg');
jQuery("#top.page-id-152 h1.logo a img").attr('src', 'http://www.lifelonghealthandhappiness.com/wp-content/uploads/2013/02/Longevity-Banner.jpg');It worked! You've done it again! Thank you so much! I really really appreciate all of your help. I have loved working with this theme and the support has been amazing.
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
