Photo CSS Help

  • benconners

    (@benconners)


    8 years ago

    Hi guys,

    I just migrated an existing site over from WordPress.com and everything seems to have gone well for the most part, except a lot of my images need some tweaking and it’d be nice to try to apply custom CSS so I don’t have to manually change every photo across 230 posts. Here’s what I’m trying to accomplish:

    – Photos that I use as “featured” photos on the front page (through the excerpts box) often appear to be very large/zoomed in, especially when using a small screen/cell phone.

    – Photos within my posts often appear too small and/or don’t stretch all the way across the post area. They were much larger on my old site because they stretched all the way across the body column of the site.

    -I’d like to center all post images across the entire blog, so that vertical photos move to the center of the body column as opposed to being stuck to the left. Lastly, with that I’d also like to center my captions on those photos so captions don’t extend beyond the dimensions of the photo.

    I know this a few different requests. On my old site I was able to apply some simple CSS to accomplish all of this and for some reason I can’t get it to work on my new site.

    My site is exploringtherockies.com

    Thanks in advance for your help!

Viewing 15 replies - 1 through 15 (of 15 total)
  • paulwpxp

    (@paulwp)

    8 years ago

    Usually when changing theme, we will use this plugin to fix the image sizes
    https://wordpress.org/plugins/regenerate-thumbnails/

    But your site is using Jetpack with Photon module enabled. It output the image based on a parameter $content_width set by theme. So look into theme’s function and see this parameter.

    You can try this plugin and play around with the number
    https://wordpress.org/plugins/custom-content-width/

    Thread Starter benconners

    (@benconners)

    8 years ago

    Thanks, that seems to have helped in fixing my image sizes inside of posts, but my excerpt images as they appear on the front page are still out of whack (like the 3rd post down on the front page for example).

    Also still looking to center vertical images and confine caption width underneath them…

    paulwpxp

    (@paulwp)

    8 years ago

    It seems like you set the theme to not output post thumbnail on home or listing page because you put the image link into excerpt box, am I correct?

    Anyway if you view source you’d see that images in excerpt area are still linked from WordPress.COM (and not from Jetpack’s Photon as in post content). I guess only you can see these images in the excerpt area because you still logged in at WordPress.COM, try log out and reload the site I guess you won’t see those images because I don’t.

    If the above is true then it means that the transfer didn’t replace the old image file in excerpt area.

    Thread Starter benconners

    (@benconners)

    8 years ago

    Hi!

    That’s correct, because of the limitations of the old theme, I inserted photos directly into the excerpt box which essentially accomplished the same thing. My old theme’s “content width” setting also applied to these images that are inserted into the excerpt area but that doesn’t seem to be the case with the new theme.

    I can log out of WordPress.com and .org and still see these over-zoomed excerpt images. I wonder if there’s a better way to fix them than to go into all 230 posts and manually set the width to 750…

    Thread Starter benconners

    (@benconners)

    8 years ago

    An update: The overall issue seems to be that the theme doesn’t apply the same rules to the front page of the site as it does to posts. Changing the theme’s content width using the plugin above fixed all photo sizing issues within posts, but not on the post feed/front page of the site.

    Even if I manually set all my excerpt images to be 700 pixels wide (by editing the photo css inside each excerpt) so that excerpt images on the front page look properly sized on a desktop, if I then access the site from a mobile phone I still get zoom/sizing issues with excerpt photos because the screen is too small to accommodate the 700 pixel-wide images. Open up a post on a mobile phone however and all photos are automatically re-sized to account for the screen size of the device.

    Hopefully this makes sense. I’m not sure what to do to make the theme re-size excerpt images on the front page that same way it does inside of posts.

    paulwpxp

    (@paulwp)

    8 years ago

    Put this code into Edit CSS (by Jetpack that you already have installed)

    img { width: 100%; height: auto; }
    Thread Starter benconners

    (@benconners)

    8 years ago

    That gets me very close! Now I’d just like to be able to modify sizes of certain photos here and there. So in other words, apply that rule unless I specifically say otherwise. Is there a way to maybe do that?

    paulwpxp

    (@paulwp)

    8 years ago

    I’d like to repeat again that I won’t be able to see the images in excerpt area that are linked directly from your previous WordPress.COM, I suspect that the reason you can see them is because you logged in still, or even logged out it shows because your browser cache. The only images in excerpt area that I can see are ones linked from flickr.

    If I were you I would go over each post and fix this, remove direct link to image from excerpt area, and use WordPress standard post thumbnail. Doing this for 230 posts will take like a few days but it’s worth doing it.

    Now I’d just like to be able to modify sizes of certain photos here and there. So in other words, apply that rule unless I specifically say otherwise. Is there a way to maybe do that?

    It might be possible using WordPress body class and/or post class, but to be able to come up with the right CSS you have to be more specific on your condition.

    Thread Starter benconners

    (@benconners)

    8 years ago

    I see what you mean about not being able to see certain photos. It looks like they came over in the migration and are being tied to my temporary URL that I built the new site on:

    http://50.87.248.59/~explost1/wp-content/uploads/2016/03/rtt-logo.jpg

    I’m not sure why that’s happening but I have hundreds of photos that were uploaded to the old site, so I’m not sure what to think of that.

    I’ll look into the thumbnails/featured imagine idea. I like having the features imagine blown up to full size on the front page/feed, which is why I avoided using thumbnails in the past.

    paulwpxp

    (@paulwp)

    8 years ago

    To clarify this is what I meant

    The post “Running from Rim Rock” when viewed from blog listing page will show no image but in the source code there is an image direct linked from WordPress.COM one

    <div class="excerpt-wrapper">
<p><img width="400" height="" alt="" src="https://exploretherockies.files.wordpress.com/2015/11/23264037875_ab1dccf49c_o.png" class="alignleft"></p>
<p>Two weeks ago ...<a href="http://exploringtherockies.com/2015/11/23/running-the-rim-rock/">Keep reading…</a></p>
</div>

    and I just noticed that the domain is different (explore/exploring) too. But anyway there is image in the source code but it can not pull the image so it’s empty. On your home page right now I can not see any image in excerpt area, on the second page (older posts link) I can only see 1 image in exceprt area.

    Thread Starter benconners

    (@benconners)

    8 years ago

    That’s strange, thanks for letting me know. I’ll have to go back through and reenter URLs for images that are tied to WordPress.com.

    In general I like the CSS we added to make all images 100% size across the blog. I would just like to be able to make an occasional image smaller while still maintaining the overall CSS rule across the site. Is there a way to negate the CSS for a specific image here and there by changing the code for the specific image in post editor?

    I want to be able to say “apply this CSS to all images across the site except those that have such and such code applied to them in the post edit box”.

    paulwpxp

    (@paulwp)

    8 years ago

    I want to be able to say “apply this CSS to all images across the site except those that have such and such code applied to them in the post edit box”.

    Yes as I stated earlier that we need more specific condition.

    To get the idea, please do some research on these topics

    “WordPress body class”
    “WordPress post class”
    “CSS attribute selector”

    Thread Starter benconners

    (@benconners)

    8 years ago

    Will do, thanks for the help!

    Thread Starter benconners

    (@benconners)

    8 years ago

    I’d just like to be able to negate the CSS code we entered that’s telling an image to ignore the size it’s set at and size itself to 100%, so that I can make an occasional image smaller than 100% when desired. I guess I don’t know how to explain it more specifically than that…

    Thanks for the help, I’ll try to get it figured out and if I can’t, make a decision about changing every post to a featured image thumbnail.

    Thanks again!

    paulwpxp

    (@paulwp)

    8 years ago

    No problem I’m happy to help.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Photo CSS Help’ is closed to new replies.