Is it possible to put a strip of pictures across the top of my blog?
-
Is there a way to put a strip of different pictures across the top of my blog? Maybe using a certain CSS code? I’m open to either above or below my logo. I’m thinking about 3-5 pictures next to each other in a parallel line…the blog I am trying to do this for is veggiesdontbite.com
Thank you!
The blog I need help with is: (visible only to logged in users)
-
Howdy,
There are a couple of days of doing it. The easiest would be to try to incorporate them as part of your header image, using Photoshop or whatever image editing software of your choice.
Looking at CSS, if you can create one image of the 3-5 pictures next to each other and then upload it to your site, you can add the image after the “logo” area using this code:
div.logo-row:after { content: url(http://veggiesdontbite.files.wordpress.com/2013/12/baked-persimmon-and-fig-oatmeal-10_fotor.jpg); }Replace the image location (the http://veggiesdontbite.files.wordpress.com/2013/12/baked-persimmon-and-fig-oatmeal-10_fotor.jpg in the above example ) with the file URL from your uploaded file. You can see that by going to your Media Library at https://veggiesdontbite.wordpress.com/wp-admin/upload.php, clicking Edit for the image you uploaded, then copy/pasting the File URL that is on the right-side of the page.
Please let me know if you have any questions or need anything else. Cheers!
-
Hi there,
I don’t currently have image editing software. Is there another way to create a strip of pictures?
Also, will that CSS make it a long strip across my blog page without distortion of the image?
Thanks!
-
Hi,
It’ll display the image exactly at the size it is—no width/height parameters are added or applied.
There’s a cool online editor at http://pixlr.com/ that I’ve used a lot when not wanting to load up a big program. Another option is GIMP, which is a free, open source image editor.
Cheers!
-
Ok, first love the pixlr site you gave me for my pic editing in general! Thank you. However I can’t figure out how to do a few things on it so I’ll have to wait to have time to research my issues.
As for the pic on my header, I used pixlr to make a collage, super easy. And uploaded it, then used your CSS to add it to my header. I changed the ‘after’ in your CSS to say ‘before’ because I thought it looked better before my logo. Hope that’s ok! However, now the image is all the way to the right. Take a look. Is there a way to stretch it across the whole page or at least center it? Thanks!
-
Awesome was to try out something different. Having it before does look pretty spiffy.
It’s looking okay to me now, except a bit more images than fits. The width of that space is 1070px.
Great work!
-
Thanks!
I tried making a collage with only 4 images but it still spread it across like this. Is there a way to have it centered on the page? or stretch it across the whole page? I could also save it as a smaller picture but can’t figure out how to do that…
-
To be honest, I’m not sure. I don’t think so with the way we’re doing it, though we’re on the edge of my CSS skill.
We have some CSS wizards in our CSS forums at https://en.forums.wordpress.com/forum/css-customization
With making the image smaller, in pixlr, it would be in the the Image->Image Size option ( see https://cloudup.com/cOrMGCxjpvg ). If you set the width to 1070, it’ll auto-adjust the height to keep it in proportion.
Cheers!
-
Hi! I just fixed it on pixlr. Works great now, take a look!
Other issue is that it isn’t working on the mobile version…It doesn’t automatically shrink it so the screen is super big unlike before when I didn’t have the header collage. Any ideas?
-
Hmm, there are a couple of solutions.
- Create new versions of the image to fit each “breakpoint” (where the size of that space changes as the width available decreases), or
- Remove the image when the width becomes too small for it
For the latter option, you can add this CSS after the code we added to place the image.
@media (max-width: 1200px) { div.logo-row:before { content: ''; } }:-)
-
Since I have no idea how to do the first option, I tried the second. However it got rid of the image on my laptop…
-
Oh, ha! I think I fixed it. I changed the 1200 in the CSS above to 1070 since that space is 1070 like you said. Am I right??
-
It works for me if it works for you. :-) There a bit of space in there where the image overloads the space (between about 1140px and 1200px) that I was avoiding, but, frankly, it’s likely enough that no one would be using a monitor with exactly that width :-)
You’re right on track! Great job!
-
Thanks! What do you mean by overloading the space? What it did on my mobile in the first place where it made a big screen because of the picture?
As long as it looks good on desktops/laptops and then also mobile devices I’m fine with it.
-
Ok, so I just realized if you change the size of your browser window the collage pic doesn’t stay within the header but goes out of the area…I’m guessing this is what you were talking about. Don’t love it.
Is there a way to keep it within the header area and allow it to change size with the browser window?
-
Howdy,
I was about to suggest you may want to ask the CSS forums now since this is pushing my knowledge of CSS, but I see that you did!
I’ll save justpi’s response as that’s a handy little piece of CSS.
If you need anything else, please let me know (or the CSS folks if it’s a question like that ;-) ).
Hope you had a great weekend.
-
I did! Thank you so much. His suggestion worked great, although he is saying he can’t see the image on his safari browser so we are wiring through that. Can you see it?
-
Howdy,
I checked on the latest versions of Safari, Chrome, and Firefox for OS X 10.9.1 and it works as expected. Might not on older versions of Safari, but I don’t have a test system with that handy at the moment.
Let me know if you need anything!
-
- The topic ‘Is it possible to put a strip of pictures across the top of my blog?’ is closed to new replies.
WordPress.com Forums 
