Jump to content

Change all the occurences of the same image on several pages at the same time...

Recommended Posts

Site URL: https://www.raconte-moidessalades.com


Hello,
I am rather new at coding...
I did some at the university -a lot of- years ago, so I get how it works, I just lack the language knowledge here.

I found most of what I wanted to do with some bases I read on forums online,
but I still have a few tweaks I would like to do to optimize the mobile and tablet versions of my site,
and I can't find a begining of a solution anywhere... 😥
I'm hoping someone here could be able to help!!

So here is what I would like to optimize:

1/  I will start with the most annoying (but maybe the most difficult too)
On ALL my blog posts I use an image gallery as a nice visual menu to access the other categories of my site
(on the far right of the picture)

image.thumb.png.95eff2c5d7d6565389728b5c3aa48f8c.png

Trouble is on mobile, it takes all the width of the screen at the bottom and it is rather HORRENDOUS
(it is even worse on my phone than on the squarespace preview)

image.png.f3d34ef9a6ae305c6bb238fb797cd075.png

I have easily found how to change the size of one unique block but here it is present on all my blog pages, so I can't go and add css for every page I will ever write.
Do you know if there is any way to affect all the occurrences of a gallery?  -I only have a personal plan though-
If it is possible, I would like to make it smaller on mobile... but if it not possible and there is way to just make it not appear
(but I feel the problem is the same for one or the other) ...Or is there maybe another clever way for me to go around it? ...

 

 

2/  On the same pages, I have 2 pictures that also appear full screen on mobile and are really TOO BIG!!
(but for some obscure reason way too small on tablet -- but I care about it less)
Here also, since it is present on each post, I can't go add css to resize each one...
I was trying to see if I could affect directly the url of where the image is stocked,
but the problem is I already saw when I looked at 2 different pages that the urls are not the same 😭
Only thing I can think of is we can apply a change with the name of the file (the only thing that appears to not change is this)
Does anyone know if it is possible?

image.thumb.png.8977a007dbdd5ea21313bdf3b32fa190.pngimage.png.41cf5e2163dc1fdd1784fb0c0f7ca3d0.pngimage.thumb.png.88569ba066b1b7a8f2680ecd962d0625.png

image.thumb.png.e0b404826689eae6fa34276f8e525a54.png

image.png.25c145195b84c561be9a516af3031411.pngimage.thumb.png.0f323186c66f4bb140bb32f1a2d200b7.png

 

3/ little bug on the metadata preview on the posts list.
For some reason, when the text is too long, the data stays in 2 columns, it is difficult to read... whereas on the homepage the date properly sits on the first line,
and the categories drop down on another line, with no doing of my own? How it that possible? Can I make it do the same here?
- on my website, it is the page named "ACTUS" -

image.png.3667c59ec0d2bdaf56d32831bc0602ff.png

When on the homepage, it gives me this:

image.png.89ae61ff42cf2a819c73b2540132f8ed.png

 

4/  Another display bug both on mobile and tablet -but I knew this one was gonna be tricky when I developped it-
is this overlay image and text ("poster" disposition)
- it is the central block on a light gray background -
 image.thumb.png.731caaef9c5faa84ad01ec31c5fb9077.png

image.thumb.png.639f2850eac45a166eaf08ef89f26ca1.pngimage.png.5522c9d1c54d08b046675c0c916495bc.png

I have no other poster image on the rest of website, so maybe I can try and make it a little better.
Rather than making the text smaller (it is not too big to begin whin, I want it to still be legible),
I was thinking I could have the background image's height that stretchs up to be higher and contain all the text...
or -never mind about my pictograms in the back- can I just not display the image and add a light gray background instead ?
If you have any idea for me to optimize what it is looking like right now, I will take it!!!

 

5/  This is the last one -I promise-
Since I am asking for help, I thought I would ask too
if there is a way to make these "overlap" image layouts look nicer when on smaller devices?
- it is the square image on the right that links to another page of the site -

image.thumb.png.e8a3a4e3978cecf8be71c31d1f604e7b.png

image.thumb.png.74fd4d0da747aeb820ca2c474a6f6a03.pngimage.png.8a658b649168c0e3fc034e06dc939782.png

Is it possible to make it not an overlay and juste simply have the image and then the text underneath??

 

-----

 

If anyone can offer some help or ideas, I would SO appreciate it!!
Thank you in advance

to help, my website is online since yesterday: www.raconte-moidesalades.com
And if I was not clear in one of my explanations (sorry, I am new at this and the language difference is not making it easier),
don't hesitate to ask for me to rephrase ^^

Letizia

 

- APOLOGY -
I had to complete the subject to post the questions, but I really have more than one topic.
I still think it is easier for eveyone to ask everything in the same message and not start 5 different conversations,
but I apologize if it is an incovenience... 😒 sorry

 

 

Link to comment
  • Replies 3
  • Views 427
  • Created
  • Last Reply

Hi!

Yes, I am currently adding my code into Design > Custom CSS
Do you know if there is a limit of character or lines for a personal plan?
'Cause while waiting to know if there is a way to change all the occurences of the same image, I am manually entering code to change them all individually...

And yes, my mistake, I forgot a "s" in the url, here is the right one: https://www.raconte-moidessalades.com/ 
😊

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.