[Resolved] right above the sitebar 2 images made with NEXT and PREVIOUS

Home Forums Support [Resolved] right above the sitebar 2 images made with NEXT and PREVIOUS

Home Forums Support right above the sitebar 2 images made with NEXT and PREVIOUS

Viewing 15 posts - 31 through 45 (of 49 total)
  • Author
    Posts
  • #1551045
    diedrich

    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

    #1551648
    David
    Staff
    Customer Support

    Can 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 πŸ™‚

    #1552051
    diedrich

    Css 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
    Diedrich

    #1553034
    Tom
    Lead Developer
    Lead Developer

    Aha, 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?

    #1553045
    diedrich

    aha 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

    #1553164
    Tom
    Lead Developer
    Lead Developer

    The images are displaying now: https://www.screencast.com/t/uxUnuCKr

    We just need to style it. What do you want it to look like?

    #1553202
    diedrich

    Hi 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

    #1555379
    Tom
    Lead Developer
    Lead Developer

    1. 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!

    #1555429
    diedrich

    .

    #1555430
    diedrich

    1. examples 2 images
    like to be able to set 100x100px to 300x300px

    2. 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
    Diedrich

    #1556939
    Tom
    Lead Developer
    Lead Developer

    Give 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%;
    }
    #1557571
    diedrich

    Thank 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 left

    on 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
    Diedrich

    #1558914
    Tom
    Lead Developer
    Lead Developer

    1. 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.

    #1558933
    diedrich

    thank you Tom.
    is it possible to create empty space between and above the 2 images?

    greeting Diedrich

    #1559356
    Leo
    Staff
    Customer Support

    Space 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.

Viewing 15 posts - 31 through 45 (of 49 total)
  • You must be logged in to reply to this topic.