Joao Alves Marrucho Joao Alves Marrucho - 1 month ago 14
CSS Question

How to get my thumbnails to display in random positions (in archive page wordpress)

I have registered a custom post type in my theme (no plugins) in my functions.php wordpress file like this:

add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'Works',
array(
'labels' => array(
'name' => __( 'Works' ),
'singular_name' => __( 'Work' )
),
'public' => true,
'description' => ('Work'),
'has_archive' => true,
'taxonomies' => array('category'),
'supports' => array( 'title', 'editor', 'thumbnail')
)
);
}


I have then created an "archive-works.php" where I am only showing this custom post-type. And there I am merely showing the thumbnails and the title when you hover. Those thumbnails are links (there is a "a" tag around the "img"). And they are being styled like this:

#content img {
width: 70%;
height: auto;
}


Meanwhile I have wrapped a ".js-container" class around all links.

<div class="js-container">
<a href="http://dev.visualvisual.com/works/work-3/" title="Work 3">
<img width="960" height="630" src="http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o.jpg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt="10476558_10152767209223872_3064425635001081899_o"
srcset="http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o.jpg 960w, http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o-300x197.jpg 300w, http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o-768x504.jpg 768w"
sizes="(max-width: 960px) 100vw, 960px">
</a>
</div>


I want the images to deviate ever so slightly from their natural positions. I mean, I need to place them randomly position-wise (more on the left or on the right, and if possible slightly above or below of where they should be.
I was doing a bit of research and I have found this example: Positioning images in random places

I know it is a combination of javascript and css as in the example above. This is my current stage: http://dev.visualvisual.com/works/
I have tried typing this on the header.php file but with no results:

<script type="text/javascript">
$('.js-container a img').each(function() {
var top = Math.floor(Math.random() * 400), left = Math.floor(Math.random() * 400);
$(this).css({
"top": top,
"left": left,
"position":"absolute",
"display":"inline-block"
});
});
</script>


Can someone help me out here?
Many thanks.

Answer

This should be a correct JavaScript for your case. You don't need that .js-container anymore, it is bound directly to the post divs:

    jQuery(window).load(function() {
        $('div.hentry.works').each(function () {
            // get the size and position
            var width = $(this).find('img').width(),
                height = $(this).find('img').height(),
                top = Math.floor(Math.max((Math.random() * $(window).height() - height), 0)),
                left = Math.floor(Math.max((Math.random() * $(window).width() - width), 0));

            // place the element
            $(this).css({
                "display": "block",
                "position": "absolute",
                "top": top,
                "left": left,
                "width": width,
                "height": height
            });
        });
    });