- This topic has 48 replies, 4 voices, and was last updated 3 years, 3 months ago by Tom.
-
AuthorPosts
-
November 26, 2020 at 8:58 pm #1551045diedrich
Thank you Tom !!!
what do you mean and where can I find what you describe below?
“If you remove the text from those functions, the images should appear”==============
another option is maybe ?: In my time at Elegant themes (4 weeks ago) I once received a large PHP code with CSS code, maybe you can do something with this?greeting and I happy with GeneratePress π
diedrich
November 27, 2020 at 3:39 am #1551648DavidStaffCustomer SupportCan you share the code they provided so we can see what its actually doing ?
Please make sure you highlight any code and click the Code button before submitting π
November 27, 2020 at 6:32 am #1552051diedrichCss code >>Extra >> Theme Option >> Intregation >> Add code tot the < head > of your blog
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("<span>Previous</span>").insertAfter(".single .nav-link.nav-link-prev img"); }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("<span>Next</span>").insertAfter(".single .nav-link.nav-link-next img"); }); </script>
following code in single.php replaced with the following php code
<?php get_header(); ?> <div id="main-content"> <div class="container"> <div id="content-area" class="<?php extra_sidebar_class(); ?> clearfix"> <div class="et_pb_extra_column_main"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'module single-post-module' ); ?>> <div class="post-wrap"> <h1><?php the_title(); ?></h1> <div class="post-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page- links">' . __( 'Pages:', 'extra' ), 'after' => '</div>', ) ); ?> </div> </div><!-- /.post-wrap --><?php if ( wp_get_attachment_url() != false) { comments_template( '', true ); } ?> </article> <?php endwhile; else : ?> <h2><?php esc_html_e( 'Post not found', 'extra' ); ?></h2> <?php endif; ?> </div> <nav class="post-nav"> <div class="nav-links clearfix"> <div class="nav-link nav-link-prev"> <?php previous_image_link(); ?> </div> <div class="nav-link nav-link-next"> <?php next_image_link(); ?> </div> </div> </nav> </div> <!-- /.et_pb_extra_column.et_pb_extra_column_main --> <?php get_sidebar(); ?> </div> <!-- #content-area --> </div> <!-- .container --> </div> <!-- #main-content --> <?php get_footer
adding this in the custom css section in the theme options
@media only screen and (min-width: 1025px) { body.attachment .nav-links.clearfix { position: fixed; } body.attachment .nav-link.nav-link-next { float: left !important; } }
ThANK YOU VERRY MUCH
GREETING
DiedrichNovember 27, 2020 at 10:11 am #1553034TomLead DeveloperLead DeveloperAha, they’re doing exactly as I said but they’re using javascript to insert the text instead of CSS.
Try this:
<?php if ( is_attachment() ) {?> <div class="attach-navigation"> <span class="prev"><?php previous_image_link( 'thumbnail' );?></span> <span class="next"><?php next_image_link( 'thumbnail' );?></span> </div> <?php } ?>
Does that add the images?
November 27, 2020 at 10:16 am #1553045diedrichaha Tom, can you be clear about what I have to do, do I have to use the codes of Elegant themes?
I put your new code in the Hook elements
but it doesn’t work yet
November 27, 2020 at 10:55 am #1553164TomLead DeveloperLead DeveloperThe images are displaying now: https://www.screencast.com/t/uxUnuCKr
We just need to style it. What do you want it to look like?
November 27, 2020 at 11:14 am #1553202diedrichHi Tom.
thanks for your quick response but you can’t get rid of me that easily π1.I still miss the text under the images (<<< PREVIOUS and NEXT >>>)
2. if you go to NEXT, for example, he will show you a random record and not really the next one
3. Also like the top of both next and previous images at the top flush with the top with the main image on the left
4. the 2 images next and previous may be 150×150 px ,I don’t think my site will be too slow
5. also like the 2 images next to each other
November 28, 2020 at 11:38 am #1555379TomLead DeveloperLead Developer1. We can add the text using CSS likely, we just need to know how you want it to look first. Do you have any examples? While we’re happy to help with custom things like this sometimes, we need to have a solid idea of what we’re doing so we don’t spend a ton of time on it.
2. This is up to WordPress itself. We’re using the same functions that are being used in the code you shared from the other theme. WordPress decides which image is next/previous.
3-5. If you’re able to give me an example of the style you want, we should be able to resolve all of these.
Thanks!
November 28, 2020 at 12:17 pm #1555429diedrich.
November 28, 2020 at 12:19 pm #1555430diedrich1. examples 2 images
like to be able to set 100x100px to 300x300px2. Also like the top of both next and previous images at the top flush with the top with the main image on the left
3. and if you scroll down the 2 images should stay at the top.
4. under the images (<<< PREVIOUS and NEXT >>>)
5. also like the 2 images next to each other
Many Thanks Tom
greeting
DiedrichNovember 29, 2020 at 10:49 am #1556939TomLead DeveloperLead DeveloperGive this a shot:
.attach-navigation { display: flex; position: sticky; top: 24px; align-self: flex-start; } .attach-navigation .prev a:after { content: "Previous"; display: block; } .attach-navigation .next a:after { content: "Next"; display: block; } .attach-navigation > span { width: 50%; }
November 29, 2020 at 9:27 pm #1557571diedrichThank you Tom
Also like the top of both “next” and “previous” images at the top flush with the top with the main image on the lefton a mobile the text “next” is placed next to the image. This must be placed under the image
like to be able to set 100x100px to 300x300px
gr
DiedrichNovember 30, 2020 at 10:08 am #1558914TomLead DeveloperLead Developer1. Not too sure how to accomplish this, unfortunately. There isn’t a static area we can add it to, as the title length is dynamic.
2. I’ve adjusted the CSS above to fix this.
3. You can change the thumbnail size in Settings > Media.
November 30, 2020 at 10:25 am #1558933diedrichthank you Tom.
is it possible to create empty space between and above the 2 images?greeting Diedrich
November 30, 2020 at 2:54 pm #1559356LeoStaffCustomer SupportSpace between: Try this CSS:
.attach-navigation .prev img { padding-right: 2px; } .attach-navigation .next img { padding-left: 2px; }
Above the two images: Increase
top: 24px;
in Tom’s CSS above. -
AuthorPosts
- You must be logged in to reply to this topic.