Draggable Links

The CMS Questions
1

Screen Shot 2016-06-05 at 11.01.47 AM.png972×622 96.9 KB

Is there a way to make all custom links on the site draggable? Right now only links generated by Kirby seems to be able to perform the action pictured. I’m using custom links with the blueprint tag “linkedurl”, but when you click and drag a link with the cursor, nothing happens.

2

All links are “draggable” by default. This is a CSS issue and doesn’t come from different markup.

3

Strange, as I’m only seeing this behavior on custom links from the text file, and not links generated by kirby. Here’s one that’s not working in case someone might know what’s happening:

<div id="quote-author" class="permalink">
    <a href="<?php echo $post->linkedurl() ?>"><?php echo $post->author() ?> ★</a>
</div>

Whereas this seems to work fine:

<a href="<?php echo $post->url() ?>"><?php echo $post->quote()->html() ?> →</a>
4

What is $post->linkedurl() ?

5 
<?php
    $posts_a = $site->find('blog')->children();
    $posts_b = $site->find('projects')->children();
    $posts = new Pages(array($posts_a, $posts_b));
    $posts = $posts->visible()->sortBy('date', 'desc', 'time', 'desc')->paginate(10);
    $pagination = $posts->pagination();
?>

<?php foreach($posts as $post): ?>

I’m no developer by any means, but I’ve been piecing things together that I’ve found in the docs or on the forums, so my syntaxes may be completely wrong. $post->linkedurl() is supposed to be pulling a text field from a blueprint I created:

linkedurl:
    label: Link
    type: url

Inside the Panel, I would enter a link as plain text:

http://jony.io/

I fixed-up some of my code (I didn’t realize I was using “link” instead of “linkedurl” in some places). So I think @lukasbestle is right, it must be a CSS issue affecting this section of the code:

<div class="link-header">
								
    <a href="<?php echo $post->linkedurl() ?>">
					
        <p id="link-post-title" class="f4 soleil-bold dark-grey m0"><?php echo $post->title() ?> ★</p>
									
        <p id="link-post-url" class="f4 soleil-regular grey m0"><?php echo $post->linkedurl() ?></p>

    </a>
							
</div>
6

Using ‘p’, which is a block level element, inside a ‘a’ element isn’t semantically correct and the browser will render the link first, and then the ‘p’ tags.

1 Like
7

Good to know. I removed the first <a href…> and put it inline with the newly created <div…> elements. Seems to work now. Thanks!