Support » Theme: Scrawl » Image -excerpt on Blog-page

  • Resolved zer0blok

    (@zer0blok)


    Hello,
    I’m trying to display a thumbnail of the image in a post on the Blog-page. I used a plugin (Easy Custom Auto Excerpt) on another site using Scrawl to achieve this for text, but i can’t use the plugin for thumbnails (without upgarding).

    I’m aware of ‘featured-image’ -however, this also then features the image at the top of the post itself (so the image appears twice in the post) which is not ok.

    Question: Should i find another plugin, or can i achieve this by editing my child-theme?

    With thanks.

    (For demo purposes, atm, i’m using the Excerpt-plugin which allows me to show a thumbnail aligned to the left -i’m unable to align it to center, which is how i want it to appear.)

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    @zer0blok

    I’m aware of ‘featured-image’ -however, this also then features the image at the top of the post itself (so the image appears twice in the post) which is not ok.

    We can always hide the featured image on single posts with a bit of custom CSS, while keeping them on the blog only. If you can show me the site with the plugin active, I can give you the necessary CSS to hide the images on single posts, as I need to see what HTML output it generates to give you the right CSS.

    (For demo purposes, atm, i’m using the Excerpt-plugin which allows me to show a thumbnail aligned to the left -i’m unable to align it to center, which is how i want it to appear.)

    I’m not seeing any thumbnails on the blog at the moment. Did you deactivate the plugin? We can always change alignment behaviour with CSS as well, so let me know which way you want to go (which plugin) and we can take it from there.

    Thread Starter zer0blok

    (@zer0blok)

    Hi Kathryn,

    Thanks for getting back to me. Yes i did deactivate the thumbnail-option in the plugin -but not the plugin itself.

    The better solution sounds like hiding the featured-image on single-posts… i’d prefer to not use plugins on the site, and stick to css… if that is what you’re saying…? -or does the plugin still have to be active?

    -The reason i’m using the plug-in ATM (without thumbs) is because it centers the excerpt-text (i can’t center it using the Excerpt function in WP) -is this also possible to do with css?

    What do u need me to do to the site re: plugin on /off?

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    The better solution sounds like hiding the featured-image on single-posts…

    You could certainly try that. Going off a sample post on the Scrawl demo here – this CSS should hide the featured image on single posts.

    /* Hide feature image on posts and shorten height of featured image area */ 
    .single .featured-header-image {
      background-image: none;
      height: 200px;
    }
    /* Change text colour of single-post titles from white to make visible */
    .single .featured-header-image .entry-title a {
      color: #606666;
      text-shadow: none;
    }

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

    An easy way to add custom CSS is to use the CSS editor included in the Customizer as of WordPress 4.7. Head to Appearance > Customize > Additional CSS to add your custom CSS.

    Thread Starter zer0blok

    (@zer0blok)

    Thanks Kathryn,

    The code doesn’t work, either with the plug-in activated or not. On the Post-page, without the plug-in activated, it doesn’t show the featured-image. With the plug-in activated, a thumbnail appears courtesy of the plug-in (but aligned to the left only). On the single-post, the Title of the post is hidden, with an arrow pointing down to the post itself?

    Atm, the closest i can get to the desired appearance is with the plug-in (using ‘show first image only’ option in settings). -Is there code which will align the image to center, and control the size of the thumbnails.

    Also, for my own understanding: Thumbnail previews on the Post-page, including size and alignment, can be done in WP, but is determined by the theme the site is using… Scrawl itself doesn’t allow this functionality?

    -If so, is it worth looking into editing theme-files (yes, i run a child-theme) to allow this, or, is Scrawl just not designed to function in this way?

    Regards 🙂

    P.S. Plugin is currently active, and except for alignment & size on the post-page, the Posts are working as they should.

    • This reply was modified 3 years, 4 months ago by zer0blok.
    • This reply was modified 3 years, 4 months ago by zer0blok.
    Thread Starter zer0blok

    (@zer0blok)

    Update:

    I found the following code to display the post-image on the posts-page, added to the functions.php file:

    remove_filter('get_the_excerpt', 'wp_trim_excerpt');
    add_filter('get_the_excerpt', 'preserve_excerpt_format');
    function preserve_excerpt_format($text)
    {
        global $post;
        $raw_excerpt = $text;
        if ('' == $text )
        {
            $text = get_the_content('');
            $text = strip_shortcodes($text);
            $text = apply_filters('the_content', $text);
            $text = str_replace(']]>', ']]>', $text);
    
            $exceptions = '<p>,<a>,<em>,<strong>,<br><img>'; //PRESERVE THESE TAGS, ADD/REMOVE AS NEEDED
            $text = strip_tags($text, $exceptions);
    
            $maxCount = 55; //DEFAULT WP WORD COUNT, INCREASE AS NEEDED
            $excerpt_length = apply_filters('excerpt_length', $maxCount);
    
            $moreText = '.... <a class="blue" href="'.get_permalink($post->ID).'">Read More >></a>'; //CUSTOM MORE TEXT, CHANGE AS NEEDED
            $excerpt_more = apply_filters('excerpt_more', $moreText);
    
            $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length+1, PREG_SPLIT_NO_EMPTY);
            if(count($words) > $excerpt_length)
            {
                array_pop($words);
                $text = implode(' ', $words);
                $text = $text.$excerpt_more;
            }
            else
                $text = implode(' ', $words);
        }
        return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
    }

    The image is displayed, but not at thumbnail-size (which i’ve set as 150px in Settings>Media)… can i add code here to fix the size?

    Thread Starter zer0blok

    (@zer0blok)

    Note on above: I’m not currently using the code, or displaying thumbnails in the plug-in, as i have to present the site only with what is working, atm.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    @zer0blok

    Also, for my own understanding: Thumbnail previews on the Post-page, including size and alignment, can be done in WP, but is determined by the theme the site is using… Scrawl itself doesn’t allow this functionality?

    Exactly. Scrawl displays featured images on posts, but not on the blog index page.

    I found the following code to display the post-image on the posts-page, added to the functions.php file:

    If you’re looking to output featured images on the blog page I would suggest adding this in your child theme. You could look at the featured-image portion of the code in content-single.php (look at lines 9-11) and incorporate it in a copy of content.php that you’d place in your child theme.

    • This reply was modified 3 years, 4 months ago by Kathryn. Reason: removing child-theme tutorials as I reread your replies and realize you already have one set up
    Thread Starter zer0blok

    (@zer0blok)

    I haven’t been able to get the excerpts-&-thumbnails to work as described; i’ve decided to drop the thumbnails, and stick to the plugin, which does display the text as i want. As the site is quite minimal, and i think it might be ok.

    Thanks for your help
    🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Image -excerpt on Blog-page’ is closed to new replies.