Image appearing too small

Support
#5

Thanks this is helpful. Do you know how to add the text and overlay over the images in the columns?

Also is there any way to make a pretty “top posts” + image link on the left side like this:

#6

Hi Sharon,

You can set the image as the background image of the column then set a padding to the top and bottom area of the column and place a text element inside the column.

X currently does not have a top post widget, only the recent post element that you can use as a shortcode. Wordpress does not have a top post widget as well so your option would be to seek a plugin that can do this.

Here is a Google search result that you might want to check:

https://goo.gl/tyQH2x

Hope this helps.

#7

Okay

Is there any way to add recent posts within a category (rather than ALL recent posts) on a home page like so:

(Image from dollarsprout.com)

Thanks!
Sharon

#8

Hey Sharon,

To display a specific category in recent posts element simply input the category slug in the Category field of recent posts element (see screenshot)

To find out category slug, go to WP Admin > Posts > Categories and copy the slug name of the category

Hope this helps!

#9

Hi,

Thanks for the help. I’m trying to format my own version but it looks like this:

If I add the photos to these posts, it looks the same as the section above.

Is there any way to make it look more like this?

Site is digitalnomadquest.com/home

Thanks,
Sharon

#10

Hello Sharon,

Recent post element has only a few design to display. You can either display the featured image or just the post titles and that’s it. If you want something more unique, you may install The Grid plugin or the Essential Grid plugin. With this plugin, you can create a grid that displays your post items in different layouts by utilizing grid skins. You can check out some of the examples of the grid right here:


To know more about this plugins, please check this out:
https://theme.co/apex/forum/t/extension-the-grid/74, https://theme.co/apex/forum/t/extension-essential-grid/68

#11

Okay I will look into this. Thanks!

I just realized that after I changed this option “It’s the Jetpack’s Photon1 module that is resizing your images, You can disable this feature from Jetpack → Settings or deactivate the Jetpack plugin altogether.”

All my images have become blurry - example - http://digitalnomadquest.com/my-first-podcast-interview-making-4000-month-passive-income/ if you scroll to the bottom the pinterest image I put up. The weird thing is I have sized these images in Photoshop to be large, 735 x 1300 ish pixels, and when I add images into the blog post it starts off extremely small within wordpress. I had to drag the image to be bigger, to 735 px within the blog post to make it appear that big when people land on the post externally. But now that I disabled the Jetpack feature the images look super blurry. Can you advise?

#12

Hey Sharon,

Your images were blurry because you have inserted a smaller crop version of the image. Please edit your post, delete the image and insert it again. When you insert the image, please make sure that you have selected to insert the “Large”, “Full” or original image size as shown below:

If you are wondering how to display this image settings, please edit your post, double click your image and then select the size.

Hope this helps.

#13

Hi - I bought The Grid, but it seems the layout is still image on top and writing on bottom

  • is there any way to do image on left, writing on right?

#14

Hi Sharon,

Regretfully, The Grid does not have that type of layout. For that matter, you can use a plugin to output a very flexible recent post content. Something like the Display Posts Shortcode It does offer a lot of parameters. It may look very raw at first but that is one thing good about it, it is fully styleable (with custom css). The effect that you want to achieve (overlap the recent post) needs a complex custom CSS, you might need to contact a developer to help you on this.

Use The Grid for that big recent post banner on the left-side. See The Grid’s Lome skin.

https://theme-one.com/the-grid/lome/

Thanks.

#15

Hi, how do I have that recent post banner only feature 1 image?
(can refer to digitalnomadquest.com/home)

#16

Hi Sharon,

On the Grid Settings grid tab, you’ll see the Columns / Rows Responsive Setting. There you can set how many columns your grid will output base on screen width. Set it to 1 if you only want it to show 1 entry.



https://theme-one.com/docs/the-grid/#grid_settings

Thanks,

#17

Hi - but I set it to 1 and that identifies how many columns, not how many rows, unless I am mistaken? So I got it to 1 column but it is showing all 3 of the posts from the category I put down.

#18

Please try going to Grid Settings > Source and set the Item Number to 1.

Since you’ve purchased a standalone license for The Grid, it would be best to ask ThemeOne’s support also to see what else is possible.

Thanks.

#19

Is there any way to make this look more buttons? Like if you hover over something happens with the images?

I clicked edit with thrive architect and now there’s this big gap between the posts + my buttons (sometimes when a few seconds have gone by it closes the gap) - can you look at the code for me?

#20

Hello Sharon,

You may need to edit the skin of your grid to be able to change how it would look like especially if you want to add some effect to the image. Please check out this documentation: https://theme-one.com/docs/the-grid/#edit_skin

To reduce or eliminate the space or gap in the element seen in the screenshot, please make sure that you haven’t added any gap or did not have larger top or bottom margins between those two elements.

Hope this helps.

#21

Hi I ended up using the X Theme for the buttons. Is there anything I can just edit with X Theme to fix it?

There is no gap top or bottom between the two elements. Would you be able to check it by logging in? Thanks!

#22

Hi,

You can try adding this in your column elements CSS (where your grid resides)

$el {
  max-height:680px;
  overflow:hidden;
}

Hope that helps

#23

Thanks. Is there any way to make my buttons more like -

Where when hovered over, it turns a different color? My site is digitalnomadquest.com/home jfyi. I’m using X Theme Cornerstone instead of The Grid for these. I’m just linking images to make them like buttons. Thanks!

#24

Hi Sharon,

That’s doable with custom CSS, example, please add this CSS to your global custom CSS (Theme Options > CSS) along with your preferred background color (this time, I use green as an example)


.x-image.with-hover, .x-image.with-hover:hover {
     background: green !important;
    }
.x-image.with-hover img {
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
}
.x-image.with-hover:hover img{
   opacity: 0.5;
}

Then simply inspect your image element (in your screenshots) and add with-hover to each’s Class option field.

This should serve as a snippet so you could start, but we can’t provide support or cover this for further enhancement or bugs.

Thanks!