- This topic has 10 replies, 3 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
I have determined a Container Width of 1000px creates the line width that I am looking for. However, this shrinks the media to much, which would fit better with around a 1250px in width. Is there a way I can insert CSS to set what amounts to different widths? If the overall Container width is 1250px that is fine, as long as the text is 1000px.
Customer Support
Hi there,
I believe this is what you are looking to do:
https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-728743Let me know 🙂
To answer your reply: https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-735070
I’m not aware of a method that will do this automatically unfortunately. Are you reading somewhere that it’s possible?
No, I don’t think it is from my reading using CSS to make this change without coding the text itself as you pointed out. Apparently, I would have to get someone to write Javascript.
Customer Support
Hi there,
tricky one if we’re talking about only the images that you want wider in the content. Problem is they are wrapped in p tags. All experimental but this may be a steer in a ‘right’ direction:
First off we need to unwrap the images can be done with a PHP Filter:
// Remove P Tags Around Images function filter_ptags_on_images($content){ return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content); } add_filter('the_content', 'filter_ptags_on_images');Or with some jQuery:
<script type="text/javascript"> jQuery(document).ready(function($){ $('p > img').unwrap(); }); </script>Then you could target the site content and narrow the width on all the elements apart from the img. So for inside just the entry content you could do this:
.entry-content>*:not(img) { max-width: 400px; margin-left: auto; margin-right: auto; }Its not pretty but neither are the alternatives.
Interesting. Thanks for providing that.
You’re welcome
Hey guys! 🙂
I’m trying to give my blog a complete make-over and I’ve decided the best solution is GeneratePress 🙂
I’ve been working on it for a while now and I love all the customizations offered by GP Premium, so a huge thanks for that! You guys are amazing! 🙂I would, however, need some extra help with the Single Post template.
I need my posts to look like this for the desktop version: https://www.dropbox.com/s/j0ygo8jjgffbqkx/Screenshot_35.jpg?dl=0
Meaning any simple text blocks on a 700 px width and any images (image or gallery) on 1100 px width.
How could I go about achieving that for all single posts without having to manually edit all my old posts (because that would just take forever – I have approx. 450 blog posts with loads of images, galleries and text)?Here is a sample Single Post on my blog: https://alex.bandiwork.dev/2020/08/fagaras-traseu-cabana-capra-podragu-podragel.html
I tried the last piece of code offered by David above, but it modifies all my pages, and I want this only on single posts. Also, that code also changes the width of galleries, and I don’t want that.
Also, I would like this look for the mobile version: https://www.dropbox.com/s/7v6recgnif81iq3/Screenshot_20200520-114147_Chrome.jpg?dl=0
meaning any image (image or gallery) to go fullwidth.Please know that, while I’m quite tech-savvy, I have zero coding skills 🙁
I really hope you can help me! This is something very important to me.Thank you so much!
AlexandraHi there,
could you raise a new topic ( copy and paste over ) – so we can look at your specific issues.
Of course! Thank you!
Customer Support
Hi Alexandra,
See answer for your question here: https://generatepress.com/forums/topic/different-widths-for-text-versus-images-galleries-in-single-posts/#post-1504088
Thank you.
- You must be logged in to reply to this topic.
