WordPress.org

Ready to get started?Download WordPress

Forums

WP Tiles
[resolved] Code for tiles to show portfolio images (6 posts)

  1. robsf
    Member
    Posted 8 months ago #

    Hi again Mike,

    Thanks for your help last time. I'm back again with another query!

    Looking here http://www.robertgcooke.co.uk/wordpress/

    I've managed to get the plugin to display my Portfolio items but it won't pick the images up.

    WP-Tiles is inserted into the template with <?php the_wp_tiles();?> and is controlled from the plugin settings page with the Post Type set to 'portfolio' and including posts 3410,3408,3396,3394,3393,3392,3391,3390,3389,3388,3387,3386,3385,3384,3409,3397,3395,3411 which are all of my Portfolio services.

    Problem that I think I'm having is that this template uses a non-standard Portfolio function. Taking the top left tile as an example - that links through to here http://www.robertgcooke.co.uk/wordpress/portfolio/conference-exhibition-staff/ - you can see that it does have some images associated with it. In the back end, as well as setting gallery images (which presumeably are the images you see when you click the link above), you can set a 'Cover Image' which shows up on the Portfolio overview page here http://www.robertgcooke.co.uk/wordpress/event-staff/ and in the source the whole preview including the image is defined like so

    <div class="item notloaded 4 " data-id="3391" data-url="conference-exhibition-staff" data-src="http://www.robertgcooke.co.uk/wordpress/portfolio/conference-exhibition-staff/">
    	<a href="http://www.robertgcooke.co.uk/wordpress/event-staff/#/conference-exhibition-staff" data-tourl="false">
    		<div class="shadow"></div>
    	</a>
    	<div class="small-loader"></div>
    
    	<a href="http://www.robertgcooke.co.uk/wordpress/event-staff/#" data-tourl="false">
    		<div class="closeme">
    			<div class="icon-remove"></div>
    		</div>
    	</a>
    	<a href="http://www.robertgcooke.co.uk/wordpress/event-staff/#/conference-exhibition-staff" data-tourl="false">
    		<div class="item-wrapper" >
    			<figure>
    				<img src="http://www.robertgcooke.co.uk/wordpress/wp-content/uploads/2013/10/Showforce-Conference-Exhibition-Event-Staff-205x240.jpg"/>
    			</figure>
    			<div class="bottom-holder">
    				<div class="desc-holder">
    					<h3>Conference & Exhibition Staff</h3>
    					<h4>Event Staff</h4>
    					<i class=" icon-picture "></i>
    				</div>
    			</div>
    		</div>
    	</a>
    </div>

    Now, I had a look through the support threads and came across this one here: http://wordpress.org/support/topic/showing-images-attached-to-custom-post-type-post?replies=7 - so it can be done, it's just a case of telling it where to look for the right attachment.. right?

    Any ideas?

    Many thanks again,

    Rob.

    http://wordpress.org/plugins/wp-tiles/

  2. Mike
    Member
    Plugin Author

    Posted 8 months ago #

    Hi Rob,

    You're very much on the right track. You need to find a way for WP Tiles to know what image to show on the tile. Currently, it looks for the featured image or the first image in the post. If your theme stores images in custom fields, it won't be able to find it.

    Look at this thread for more info on how to do this:
    http://wordpress.org/support/topic/using-only-the-first-attached-image?replies=7

    Possible simple solution first: maybe you can add a normal featured image in your Portfolio post type as well. Look for the meta box, and don't forget to check 'Screen Options' at the top of your screen for any hidden boxes.
    If there's no featured image, there's always the option of adding an image somewhere in your post content.

    However, if you want to code a real solution.. you will need to find a way to get the src for the featured image (the Cover Image). This depends entirely on your theme. Look at the thread above for info on how you can filter the tile image.

    Cheers,
    Mike

  3. robsf
    Member
    Posted 8 months ago #

    I'm in a hopeless situation here I think, I've found what I believe defines the gallery image location on the Portfolio-item template, pasted that into some code from the link you gave, added that to functions.php and it's not having any of it.

    What I believe to be the relevant items from portfolio-item.php:

    $mediatype = j_get_meta('portfolio_media');
    	$icontype = "" ; $covername = "" ; $imageCover = "";
    
    	switch($mediatype) {
    		case 'gallery'	:
    			$covername = "porto_gallery_cover";
    			$imageCover = JEG_CSS_URL . 'img/cover/gallery.jpg';
    			$icontype = " icon-picture ";
    			break;

    and

    <img src="<?php echo jeg_get_image($imageCover, '', $jdata->portoItemWidth, $jdata->portoItemHeight)?>"/>

    My code butchered from the page above (I didn't want it to ONLY show those type of image - wanted to make it show those when it couldn't find a featured image - the bit with my code in it is in the middle):

    add_filter( 'pre_wp_tiles_image', 'portfolio_gal_cover_tiles', 10, 2 );
    function portfolio_gal_cover_tiles( $src, $post ) {
        $tile_image_size = apply_filters( 'wp-tiles-image-size', 'post-thumbnail', $post );
    
        $images = get_children( array(
            'post_parent'    => $post->ID,
            'numberposts'    => 1,
            'post_mime_type' =>'image'
        ) );
                if ( $post_thumbnail_id = get_post_thumbnail_id( $post->ID ) ) {
                    $image = wp_get_attachment_image_src( $post_thumbnail_id, $tile_image_size, false );
                    return $image[0];
                }
    
    			    if( !empty( $images ) ) {
            $images = current( $images );
            $src = porto_gallery_cover( $images->ID, $size = $tile_image_size );
            return $src[0];
        }
    
                if( ! empty ( $images ) ) {
                    $images = current ( $images );
                    $src = wp_get_attachment_image_src ( $images->ID, $size = $tile_image_size );
                    return $src[0];
                }
    
        return '';
    }

    At the end of the day, it has to be pulling the image from somewhere, I think I know where that is from the code from portfolio-item.php but I'm lacking in the ability to correctly implement it and lacking in understanding about how these various functions of WordPress link together.

    If you could help at this point, it would be much appreciated. I can arrange to recompense you for your work with little issue, this is a company website afterall.

    Many thanks,

    Rob.

  4. robsf
    Member
    Posted 8 months ago #

    I'm confident I've got your code right, I can edit the code and make the already working Blog images not show up from the stuff I've pasted into functions.

    I've been through all the files and picked out anything I could see with underscores in it that related to portfolio images and substituted them all in the code with no joy. I've now resorted to emailing the theme creator to see if he can give me a definitive answer on exactly which field holds the image - as far as I can tell none of them work. Frustrating stuff.

    Cheers

  5. robsf
    Member
    Posted 8 months ago #

    Theme developer has confirmed it's porto_gallery_cover so I guess I have the code to implement it wrong. Either that or it's not working for any infinite amount of other reasons :/

  6. robsf
    Member
    Posted 8 months ago #

    Ok, installed Featured Image 2, enabled it on the Portfolio post type, used the code from the link above and the code to define the thumbnail size and it's giving me a great result.

    Resolved!

    Code for anyone interested in future

    Set thumbnail size:

    function wp_tiles_custom_image_size( $size ) {
        return 'large';
    }
    add_filter( 'wp-tiles-image-size', 'wp_tiles_custom_image_size' );

    Return Featured Image 2 (whilst retaining other image types) into wp-tiles

    add_filter( 'pre_wp_tiles_image', 'homepage_tiles_porto', 10, 2 );
    function homepage_tiles_porto( $src, $post ) {
        $tile_image_size = apply_filters( 'wp-tiles-image-size', 'post-thumbnail', $post );
    
        $images = get_children( array(
            'post_parent'    => $post->ID,
            'numberposts'    => 1,
            'post_mime_type' =>'image'
        ) );
    
    	if( ! empty ( $images ) ) {
                    $images = current ( $images );
                    $src = wp_get_attachment_image_src ( $images->ID, $size = $tile_image_size );
                    return $src[0];
                }
    
        if( !empty( $images ) ) {
            $images = current( $images );
            $src = jeg_get_image( $images->ID, $size = $tile_image_size );
            return $src[0];
        }
    
    	if ( $post_thumbnail_id = get_post_thumbnail_id( $post->ID ) ) {
                    $image = wp_get_attachment_image_src( $post_thumbnail_id, $tile_image_size, false );
                    return $image[0];
                }
    
    			    if( !empty( $images ) ) {
            $images = current( $images );
            $src = kd_mfi_get_featured_image_url( $images->ID, $size = $tile_image_size );
            return $src[0];
    				}
    
        return '';
    }

    I'm sure it aint pretty, but it works.

    Thanks for all your help Mike, so relieved.

    Rob

Reply

You must log in to post.

About this Plugin

About this Topic