-
Posts
-
Hello, I would like to add an image (a logo) to my blog page. I am using the default grid model, with 3 columns. I don’t want the logo to appear on the single posts afterwards, only on the main blog page (at the top of the page, just below the header). How can I do this without having to use the advanced layout builder?
Thank you very much in advance.
Best regards
AudreyHey laboiteapixels12,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHi,
How can I attach images ? There is no way to upload an image..
Thank you in advance,Best regards
AudreyHi,
You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)
Cheers!
YigitHi,
This is two images. On the first, you can the the logo (“blog”) on the sidebar. I would like to add this logo above the posts on the mobile view (second image)
https://drive.google.com/file/d/1bMnk8UkS56RGfXK04MOwLKrjeKQmJufT/view?usp=sharing
https://drive.google.com/file/d/1zrGw88-1KRO98gHzuSp28dgafp41uF8-/view?usp=sharingThank you very much
Hi,
Thanks for the update. The screenshots you posted are not shared publicly, so we can’t view them. Please share them publicly so that we can access them.
Also, why don’t you want to use the layout builder to add the image?
Best regards,
RikardHi,
Sorry, this is the sreenshots :
https://drive.google.com/file/d/1zrGw88-1KRO98gHzuSp28dgafp41uF8-/view?usp=sharing
https://drive.google.com/file/d/1bMnk8UkS56RGfXK04MOwLKrjeKQmJufT/view?usp=sharingI don’t want to use the layour builder because I have many blog categories, and I don’t want to create a custome page for each category..
Thank you,
AudreyHi Audrey,
Please add following code to bottom of Functions.php file in Appearance > Editor and change image URL
add_action('ava_after_main_title','blog_ava_after_main_title'); function blog_ava_after_main_title(){ if(is_home( 'blog')){ $output = "<img class='banner-img' src='https://kriesi.at/wp-content/themes/kriesi/images/logo.png'>"; echo $output; } }You can also style your image using banner-img class. To hide it on desktop, you can add following code to Quick CSS field in Enfold theme options > General Styling
@media only screen and (min-width: 768px) { .banner-img { display: none; } }Best regards,
YigitHi,
I have a child theme. Will the code work if I copy it to the child theme’s functions file ?
Thank’s a lotHi,
Yes, it will. It is actually better that you have a child theme, otherwise you would need to add the code again each time you update the theme :)
Best regards,
YigitHi,
It’s almost perfect. Your code only works on the category pages of the blog. But not on the blog’s default page. See it on the captures :
https://drive.google.com/file/d/1xx1FjsHgq_yJc0KdNxp70mT7v7Bxmzh3/view?usp=sharing
https://drive.google.com/file/d/1CmaD2C0bytJuQPCJLxO0HPnTTJTBRfL7/view?usp=sharingThank’s for your help,
AudreyHey Audrey,
Sorry for my late reply!
Could you please create temporary admin logins and post them here privately so we can look into it? :)
Cheers!
YigitHi,
Sorry for the very late reply and thanks for the login and links, I tested the solution above in your child theme because I didn’t see it activate on your site, I also added this css to center the image:@media only screen and (max-width: 767px) { .banner-img { display: block; margin: auto; padding-top: 30px; height: 200px; } }It seems to show on your Blog page & your category pages, please clear your browser cache and check.
Best regards,
Mike
- You must be logged in to reply to this topic.