Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 29, 2015 at 6:29 pm #527064
    zenimot

    I want to add an extra class to the image that appears on the single page of a blog post.
    What file do I need to edit for that?

    I want to use animate css to add an animation.
    Or is there another way to add a fade in to an image?

    October 29, 2015 at 8:57 pm #527140
    Elliott

    Hi zenimot!

    Try this out, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

    Regards,
    Elliott

    October 30, 2015 at 9:21 am #527263
    zenimot

    Thanks!

    This is nice to to do when I want just one element animated. But when I can add the classes to the image in the templates (php), I would not need to do this manually every time.

    Where can I add the classes to the image for the blog listing page and the blog single page?
    I can’t seem to find the right php files…

    • This reply was modified 9 years, 1 month ago by zenimot.
    October 31, 2015 at 4:05 pm #527925
    Elliott

    Hi!

    Not sure I understand. Can you send us a link to the exact page and take a screenshot highlighting the exact images your referring to?

    Best regards,
    Elliott

    November 2, 2015 at 2:20 pm #528487
    zenimot

    The blog page is: http://typischroos.nl/wpmapje/typischetips/
    I’ve got this page working, so that every blog image has a fade in animation.
    This I’ve changed in a template file.

    But as you go to a single blog page e.g. http://typischroos.nl/wpmapje/voor-en-na/
    I want that main image to be animated also.
    At the moment I’ve got this working by adding extra classes to the image in the blog interface.

    But I want this animation working, by changing the template file, so I don’t have to manually add to classes to an image every time.

    November 3, 2015 at 5:14 am #528977
    Ismael

    Hey!

    I’m sorry but I don’t think this is possible because you added the images as content. The template file for the single post page is the includes > loop-index.php file and the whole content resides in this line of code: 

    // echo the post content
            echo $content_output;

    EDIT: Try to add the class attribute via jQuery: https://api.jquery.com/addclass/

    Best regards,
    Ismael

    November 3, 2015 at 1:37 pm #529223
    zenimot

    Thanks.
    I’ve tried this, but can’t get it working. :(

    November 4, 2015 at 7:23 am #529762
    Ismael

    Hey!

    Are you going to add the effect for every image inside the post? Try this in the functions.php file:

    // add class
function add_custom_script(){
?>
<script>
(function($) {
	$('.single .entry-content').find('img').each(function() {
		$(this).addClass('animated fadeInUp');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Cheers!
    Ismael

    November 4, 2015 at 10:46 am #529855
    zenimot

    THANKS! That did the trick.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Add custom class to image on single blog page’ is closed to new replies.