Show more/less content in sidebar depending on height - css

I have a blog with main content and a sidebar. Most posts have photo galleries with 30+ photos. In the sidebar I display the thumbnails and a "more" link. By default I show 6 thumbnails. I would like to show up to all 30 if there was a enough content to make the sidebar long enough to support them.
I have found and come up with my own javascript solutions but I would really like to know if there is a CSS only method (even it requires not-fully-supported CSS techniques).
Maybe some kind of nth-child kind of thing?
Edit: I don't want to the sidebar to be longer than the content. That's why I'd only show more if the room was available.

Related

Wordpress: choose an image size when creating an image gallery

Goal: When creating an image gallery in Wordpress 5.3.2 using the Gutenberg editor, I'd like to be able to select the image size.
Why: The block gallery automatically serves the large image and then relies on CSS to resize the image to fit the flexbox layout. Instead I'd like to choose the medium size for my site, which is closer in size to what's displayed in the layout. This will improve load times, as users aren't being served oversized images.
Question: Is there some code I can add to functions.php that will give me the option to choose the image size I want or to override the default large size for the medium size?
I understand what you're going for and unfortunately WordPress and Gutenberg still loads the full-size, original image (and just resizes it in css) :(
There are several closely-related issues that describe this
https://core.trac.wordpress.org/ticket/45407
https://github.com/WordPress/gutenberg/issues/9620
https://github.com/WordPress/gutenberg/issues/6177
Update, 2021:
Gutenberg no longer loads the full-size, original image and you can choose which in the block's right side panel which of the registered image sizes to load;
but that image is often still larger than necessary and not fully optimized; more information at https://gist.github.com/skorasaurus/a01249d4302226bf12c80dd979322303

Image resizing issues

So im building my first wordpress site at the moment. Most problems i come across i just do a google search, read, learn, fix.
But one continuous problem i keep getting is images and resizing them.
Im really lost as to how it works, its so simple, yet i cant seem to manage them at all.
Heres some of my issues:
I'm using customizr theme, it has a slider, featured images for posts-big and small (featured image and thumbnail).
I resize the picture to the recommended dimensions, but it never seems to actually resize the picture in the box. And that's for all of them, the slider, thumbnail and featured image.
I toy with the dimensions to try to learn whats happening, but it just doesn't make sense to me, the box just zooms further into the image, the image doesn't actually move or try to fit at all when the dimensions are changed.
They also share the same image for the featured image and thumbnail, even if i click 'thumbnail only' and change the dimensions, it effects all of the images.
The slider images are always cut off, even if i change to the recommended dimensions. I've given up with the slider after a week of resizing, trying new sliders, adding slider codes into .php, enough.
But now this issue with a simple featured image and thumbnail is the last straw. So here it is, my cry for help!
How can i get control of my images, resize effectively, so i dont get these issues every time i try to add images into various functions.
Any help is much appreciated, thanks.

MediaWiki: How do you change font size in the navigation sidebar?

I know very little about coding - can anyone provide explicit instructions about how to do the above?
A similar question was asked a couple of years ago: How to change font size and colour in Mediawiki navigation sidebar and footer?
However, it's not clear from the answer which file to change. The questioner then replied that they'd changed the code in vector/screen.css, but this file no longer exists. And I can't ask for clarification as I've submitted less than 50 comments.
I'd also like to be able to change the font size for the links in the top-right corner of the page, and along the top of the content area, and in the footer.
It would be nice if I could make these changes via the page MediaWiki:Common.css rather than a site file, as I did to change the size of the article text.

Is it possible to 'split' the content of a post in wordpress and display each chunk in a separate div?

I'm very new to wordpress but my understanding is that the post is just one big article. you can insert images between paragraphs of text, but the flow will always be text, image, another paragraph, image etc.
I would like to use it for tutorials, and the layout I have in mind is to display every step as an image, with text on the left.
I know I can probably achieve this using images with legend and displaying the legend to the left. I was wondering though if there was a way to use the post (eg. the article itself) in this way?

Make page images and content responsive, wordpress

I have a wordpress site which is responsive. In my home page there is a slider (responsive slider) Now i need to add some content below the slider with a small image and a one sentence description. There will be 3rows, in 1st row i need 3 images with 3 small descriptions , in 2nd and 3rd row 2images with descriptions. I need to make these responsive. Images and the small description should be responsive. I tried so many ways , but nothing works. Can anyone help me please?
Responsive layout design is 99.9% to do with your css and how you're writing it. Can you post any code examples? What theme are you using?
Some theme designers like Woothemes provide shortcodes for adding columns and rows of content that work responsively out of the box.
It's impossible to help any further until you provide more information :-)

Resources