Home Forums Weaver Xtreme Theme image location on Page with Posts

Viewing 16 posts - 1 through 16 (of 26 total)
  • Author
    Posts
  • #17694
    jeremygregg
    Participant

    I am working on this site, which is very much in draft mode:


    I would like the following changes to the appearance of the featured images for the blogs in the feed:
    1. Images should be on top, with the title beneath
    2. Images should not be cropped into squares but shown in full

    Basically, I want it to look like this page (see below recent articles)

    Additionally, one more question:
    3. How can I format the “RECENT ARTICLES” with the line similar to the site above? I am currently using a table, and it is causing challenges with responsiveness. 
    #21707
    scrambler
    Moderator

    You can choose how to display featured image in MAin options > Post Specific > Featured Image section.

    You have separate choices for Full Post, Excerpts post (your case), and single post page.

    Choices do include  having the Featured image above the title  (width Title), as well as which size you want to use.

    Beware that if your images are cropped, it is probably because you checked the option in WordPress Settings > Media . If you uncheck the option, you will have to delete the images and reload them, as the crop is done at load time and I believe cannot be undone (unless may be with a plugin)

    #21708
    jeremygregg
    Participant

    Thanks! However, the image is coming out to the left of the title and not above it. 

    Also, the owner does not want an excerpt. When I Set the excerpt length to “0,” I get a “…” 
    Is there a way for this to just be blank?
    #21709
    scrambler
    Moderator

    Normally if you want the title under the featured image, you also need to select center for the featured image or make it 100% of the width. If you want it small and left aligned above the title, you can force the title to go below by adding the rule below in Main Options > Post Specifics > Post Title > Post Title BG CSS+ box

    {clear:both;}

    If you don’t want the excerpt, Choose “Title + Featured image” in The “Display Post as” Drop down list of the Page with post editing page options

    #21710
    jeremygregg
    Participant

    That is great, Scrambler. I am still playing with it to get it to what I need, but this was very helpful. Thank you!

    #21711
    jeremygregg
    Participant

    I am still not able to get this to work on this page:


    I have put the code in the place where you mentioned, to no avail. I also tried it in the CSS+ box below, just in case, and it did not work. Any ideas?

    Would it be easier to make this happen with the “Add show posts option”? I am fine with either way. In fact, the Add [Show_Posts] option might be even better. Do you know how I could use that tool to have the title below the photo?
    #21712
    scrambler
    Moderator

    It appears you hit a bug when using display post as “Title + Featured image”, the position and alignment options are not respected. I am notifying weaver below.

    In the mean time, do the following

    In the Page with posts settings, in “Display Posts as”, select Excerpt

    Then in the Per page Style box, add the rule below to hide it

    .entry-summary, .entry-meta  {display:none;}

    Then in Main Options > Post Specifics > Featured Image, set FI position Excerpt to With Title, and FI Alignment Excerpt to Center


    @weaver

    When people select Display post as Title + Featured image in a page with posts options, It looks like the featured image only inherits some of the settings made in Post Specifics > Featured image > Excerpt options, but not all.

    For example The FI Size Excerpt is respected, but not the position nor the alignment.

    If I set Post Specifics > FI Location Excerpt option to “With title”, the featured Should be before the title, and it is not doing it.

    FI Alignment Excerpt is also not respected when using Display post as Title + Featured image

    #21713
    Weaver
    Keymaster

    It fails for [show_posts], too. I will look into this.

    #21714
    jeremygregg
    Participant

    Thanks, everyone! I think that helped.


    Now, I just need to figure out why the Posts’ Featured Images are not lining up flush with the sides of the container. I would like to get rid of that gap (margin? padding?) on the left side of the three columns (and ideally on the right side as well), so that the edge of the left picture aligns with the edge of the image slider above it. Any ideas?
    #21715
    scrambler
    Moderator

    That is the default 1% padding on the 3 columns css.
    We need to add rules to change the left and right padding on first and last column when 3 columns on desktop, and when 2 columns on smalltablets. To do that, change the CSS in the per page style box to

    .entry-summary, .entry-meta  {display:none;}
    .wvrx-posts div.content-3-col:nth-of-type(3n+1) {padding-left:0;}
    .wvrx-posts div.content-3-col:nth-of-type(3n) {padding-right:0;}
    + .is-smalltablet.page-id-713 .wvrx-posts div.content-3-col {padding-left:1%;padding-right:1%;}
    + .is-smalltablet.page-id-713 .wvrx-posts div.content-3-col:nth-of-type(2n+1) {padding-left:0;}
    + .is-
    smalltablet.page-id-713 .wvrx-posts div.content-3-col:nth-of-type(2n) {padding-right:0;}

    #21716
    Weaver
    Keymaster

    OK, placing the Featured Image aligned left after the meta info line on Title + Feature Image display was intentionally designed to work that way.

    There is a LOT of specialized code to make it work like that. No doubt at some time there was a discussion about that, and that what was decided.

    So, if I were to change it, there would likely be sites that would break in the sense that they no longer look the same.

    There is some good rational for the decision to do it that way. The intent of Title and Title+FI is to display an index or table of contents layout. The title+FI option gives the title, the info meta, and an image on 3 separate lines. If the FI is on the right, for example, the whole table of contents is sort of broken – the meta info seems to go with the NEXT title rather than the current title. Doesn’t look good.

    Given how much work went into making Title+FI work the way it does now, and the fact that changing that will no doubt break sites, I am very disinclined to “fix” it.

    AND, if someone REALLY wants the Title + FI to match exactly how they look on the regular blog page, you can do this simply by hiding the excerpt or full content and the bottom meta info line with custom CSS. So, given there is an easy alternative to achieve the look, and that the Title+FI was very intentionally designed to work that way, there is nothing to fix.

    #21717
    scrambler
    Moderator

    @weaver, I am not sure we understood each other.

    The main issue was that FI position excerpt > With title, does not do anything when using Display as Title + FI

    Currently no matter what you select for FI position excerpt, if using Title + FI, you always get With Content Top configuration.

    So I do not understand why you don’t want to honor that setting. If people do not like it, they do not have to use it, but if people do want the featured image above the title, then they would.

    If the issue is you believe that people who would select FI excerpt position > With title (in order to move the featured image above the title) would only want it for pages showing excerpt and not for pages showing title + featured image then I guess OK, although I am not sure of the rational.

    #21718
    jeremygregg
    Participant

    Thanks so much for all of your help, Scrambler. That was exactly what I needed!

    #21719
    Weaver
    Keymaster

    I’m pretty sure I understand the issue.

    Here’s another way to look at it: Title+FI has nothing to do at all with the content – excerpt or full. They are irrelevant. So why should the settings for FI on excerpt (or on full content or single page) have anything to do with Title+FI? They shouldn’t. Which one would take priority?
    Title+FI really means for a post, display ONLY the title, the top meta info line if not hidden, and then the FI. That is all. So, there is no real option to specify the layout of the FI, the choice is the theme’s choice – Title <h2>, the meta line which is followed by a clear:both, and then the FI, which by default is aligned left. 
    As I said, as some point, it was a very clearly intentional decision to make Title+FI work that way – it is really just a tiny extension of the Title Only option. And it has nothing at all to do with excerpt, full, or single view since no content is displayed with that option.
    The intent of Title Only and Title+FI is to build a simple list of posts (that meet possible filter selecions). They are a special case, and not really able to have the layout changed by an option. Because Title+FI works AS DESIGNED (right or wrong…), changing its behavior now would be wrong, and not compatible with anyone who might now be using it the way it was designed.
    #21720
    jeremygregg
    Participant

    Thanks, Bruce. It’s a great theme — I understand enough to be dangerous, but some things are over my head. 

    One more (minor) issue that’s been bugging me on this page:

    See the “Recent Articles” headline? I cannot get the left edge and the right edge to line up with the edge of the slider above and the blog images below. They are just a touch indented. I cannot figure out why; I have built it as a table as follows:

    <table width=”100%”>
    <tbody>
    <tr>
    <td width=”40%”>
    <hr />
    </td>
    <td width=”20%” height=”40px” style=”vertical-align: middle;”>
    <span style=”font-family: ‘Arial’, Helvetica, sans-serif;”><strong><span style=”color: #4a3125;”><center><b>RECENT ARTICLES</b></center></span></strong></span>
    </td>
    <td width=”40%”>
    <hr />
    </td>
    </tr>
    </tbody>
    </table>
    If I replace all that with a simple image tag, for example, the image is aligned correctly. Is there some code somewhere that causes tables to have a margin/padding? 

    #21721
    scrambler
    Moderator

    the theme has a 4px padding on td tags. Add a corrective inline style to your table

    <td style=”padding:0;” width=”40%”>

    By the way as a general rule you should do all using CSS rather than using html attribute like width that are not supported in html5

    <td style=”padding:0;width:40%;”>

Viewing 16 posts - 1 through 16 (of 26 total)
  • You must be logged in to reply to this topic.