Can I change the arrow location for navigating between attachment files

  • Unknown's avatar
    karolem2 · Member ·

    We are creating Posts for galleries of images; when the user clicks on one image they go to the attachment view (as selected in settings); a pair of arrows appears below the image to navigate to the next or previous item in the post. We want to move those arrows ABOVE the image and image title so the navigation doesn’t fall below the fold. I can’t see how to adjust the position of the <nav> content within that <div>.
    Can someone help with that?
    Here’s the HTML: 

    <div class="content tmp-attachment">
	<h3>Big Sky at Ostrander&nbsp;Point</h3>
	<a href="https://karolem2.files.wordpress.com/2016/03/big-sky-at-ostrander-point.jpg" title="Big Sky at Ostrander&nbsp;Point" rel="attachment">
					<figure>
				<img src="https://karolem2.files.wordpress.com/2016/03/big-sky-at-ostrander-point.jpg?w=860" alt="">
			</figure>
			</a>
			<figcaption>
			<p>Big Sky at Ostrander Point, 40″ x 60″, acrylic on wood, SOLD</p>
		</figcaption>
		<nav class="attach-nav clear">
		<p class="prev alignleft"><a href="https://karolem2.wordpress.com/2016/03/13/new-paintings/3-flight-over-ostrander-point/">Previous</a></p>
		<p class="next alignright"><a href="https://karolem2.wordpress.com/2016/03/13/new-paintings/2-blue-waters-sandbanks/">Next</a></p>
	</nav>
			<a href="https://karolem2.wordpress.com/2016/03/13/new-paintings/">Return to <em>New Paintings</em></a>
	</div>

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jamiegiannini · Member ·

    Hi there, sure we can get this fixed for you.

    Take your nav class code and move it up so it is located just after your <h3> tag.

    So it should look like this: 

    <div class="content tmp-attachment">
   <h3>Big Sky at Ostrander Point</h3>
   <nav class="attach-nav clear">
      <p class="prev alignleft"><a           href="https://karolem2.wordpress.com/2016/03/13/new-paintings/3-flight-over-ostrander-point/">Previous</a></p>
      <p class="next alignright"><a href="https://karolem2.wordpress.com/2016/03/13/new-paintings/2-blue-waters-sandbanks/">Next</a></p>
   </nav>
   <a href="https://karolem2.files.wordpress.com/2016/03/big-sky-at-ostrander-point.jpg" title="Big Sky at Ostrander Point" rel="attachment">
      <figure>
         <img src="https://karolem2.files.wordpress.com/2016/03/big-sky-at-ostrander-point.jpg?w=860" alt="">
      </figure>
   </a>
   <figcaption>
      <p>Big Sky at Ostrander Point, 40″ x 60″, acrylic on wood, SOLD</p>
   </figcaption>
   <a href="https://karolem2.wordpress.com/2016/03/13/new-paintings/">Return to <em>New Paintings</em></a>
</div>
  • Unknown's avatar
    jamiegiannini · Member ·

    And nevermind, that’s not very helpful given you can’t edit the HTML directly.

    A possible solution using CSS only would be to manually move the arrows using something like this:

    position: relative;
bottom: [x];

    Example: 

    a[rel="prev"], a[rel="next"], .attach-nav .prev a, .attach-nav .next a, .next-comment-link a, .prev-comment-link a {
    position: relative;
    bottom: 200px;
}

    You would need to adjust this depending on screen size, i.e. desktop page vs. mobile using media queries.

  • Unknown's avatar
    karolem2 · Member ·

    Thank you for this. I’ve been able to move the prev/next links up and into the body of the images; it doesn’t seem to affect the mobile (we’re using Portfolio theme). Good point though.
    Because these are images, we’d prefer styled arrows over text with arrows. Any ideas how to overwrite the text with a transparent image of an arrow (like a slideshow would have) or determine where the text for these navigation arrows would be set? Nothing is obvious.

  • Unknown's avatar
    jamiegiannini · Member ·

    Glad that worked for you. What we want to do is replace the existing content with an image. As a test, I used a random arrow found via Google images but you can use any arrow you want. Just replace what I have in the url and adjust your height to the appropriate value for your image. Try this code as a test:

    Next Arrow:

    a[rel="next"], .attach-nav .next a, .next-comment-link a {
content: url(http://vignette2.wikia.nocookie.net/cow-evolution/images/c/c5/Arrow-right.png/revision/latest?cb=20150606221716);
height: 44px;
}

    Previous Arrow:

    a[rel="prev"], .attach-nav .prev a, .prev-comment-link a {
content: url(http://findicons.com/files/icons/2315/default_icon/128/arrow_left.png);
height: 44px;
}
  • Unknown's avatar
    karolem2 · Member ·

    Again, your help is much appreciated–and I hope others are able to benefit as well. I ended up tweaking the code to this (color: transparent kills the assigned text and arrow; the relative position brings them off the floor of the screen; plus, styling for the bg image):

    a[rel="next"], .attach-nav .next a, .next-comment-link a {
  position: relative;
	bottom: 300px;
	padding: 20px;
	margin: 10px;
	color: transparent;
	background-image: url(http://www.clker.com/cliparts/V/1/Z/A/h/U/left-arrow-right-th.png);
	background-repeat: no-repeat;
	background-position: 10px;
}

a[rel="prev"], .attach-nav .prev a, .prev-comment-link a {
	position: relative;
	bottom: 300px;
	padding: 20px;
	margin: 10px;
	color: transparent;
	background-image: url(http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-th.png);
	background-repeat: no-repeat;
	background-position: 10px;
}

    While I’d like to make the arrows float relative to the image, I don’t think it’s possible since the Div where they live is a separate one. Even so, this will provide better navigation than before and we might look for some sexier arrows.

    There is one odd character that I cannot shake, however, that comes in the prev arrow element, a follows that arrow despite my best efforts. Can anyone ID how to stop that from showing? A sample page with the arrows is here: https://karolem2.wordpress.com/2016/04/02/new-paintings/3-flight-over-ostrander-point/

  • Unknown's avatar
    jamiegiannini · Member ·

    You’re welcome, I’m happy to see this is working for you and I have to say the navigation is looking great now!

    This will fix the “/” issue for you:

    a[rel="next"]:after, .attach-nav .prev a:after, .next-comment-link a:after {
    content: "";
}

    -Jamie

  • The topic ‘Can I change the arrow location for navigating between attachment files’ is closed to new replies.