custom permalink

  • I have a custom loop that dislplays 4 pictures.
    I use a custom feild in the loop that I can direct the url where I want(custom url)..

    I want to wrap the loop (the whole image not only the title) in permalink.

    The loop,

    <div class="home-callouts">
                 <ol class="listing releases">
                    	<?php query_posts('category_name=news&orderby=date&order=ASC&posts_per_page=4'); ?>
						<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
						<?php if (has_post_thumbnail()) : ?>
						<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );?>
						<?php endif; ?>
                        <li class="item callout">
                            <div class="figure">
                                <a href="<?php the_field('link_url'); ?>" style="background-image: url('<?php echo $image[0]; ?>');"></a>
                            </div>
                            <div class="header">
                                <div class="grid-item-animation-overlay"></div>
                    <span class="more">
                                	<a href="<?php the_field('link_url'); ?>"><?php the_title();?> </a>
                                </span>
                            </div>
                        </li>
                    	<?php endwhile; endif; ?>
                    </ol>
                </div>
			</div>

    Can I also make the permalink work better on mobile/touch screens?

Viewing 1 replies (of 1 total)
  • Moderator Marius L. J.

    (@clorith)

    Hi,

    I’d like to start by addressing the use of query_posts, as it’s not recommended to use this function as described in the codex article for query_posts. I would recommend using either WP_Query or get_posts for this purpose.

    Now, on to the question at hand!

    I would add two link tags to this, one around the image, and one around the title, this keeps your code nice and maintainable in an easy manner if you ever need to restyle anything relating to either element.

    As for making them better for touch screens, make sure you have proper padding on the link tag. This is an excerpt from the Googles recommended mobile friendly guidelines:

    Make important tap targets large enough to be easy to press

    This applies to the tap targets your users will use the most, such as buttons for frequently-used actions, search bars and other important form fields, and primary navigational links. These tap targets should be at least 7mm (48 CSS pixels if you have configured your viewport properly), and should have additional spacing around them if they are any smaller than 7mm.

    Ensure there is extra spacing between smaller tap targets

    It is reasonable for infrequently-used links or buttons to be smaller than the recommended size of 7mm, but there should still be no other tap targets within 5mm (32 CSS pixels), both horizontally and vertically, so that a user’s finger pressing on one tap target will not inadvertently touch another tap target.

Viewing 1 replies (of 1 total)
  • The topic ‘custom permalink’ is closed to new replies.