Currently experiencing an issue with image sizing across the new site in development. Bit of background the site was built using the escape template as a base (Escape - Blog HTML5 Responsive Website Template).
The issue being experienced is currently foxing me and it’s that images go into the collection once and are then resized into multiple containers e.g. thumbnail on homepage and then a banner within an article. It’s setup to pull in the background image from the collection. The images just don’t look right in these containers e.g. Assassin's Creed Origins first explansion DLC this January - Jump Dash Roll.
The two templates in questions are the homepage one (thumbnails) and the biggest offender is the hero on the articles template.
Pretty sure I just need to change the settings on the background image in the container but cannot seem to get it right.
The issue is the bg image and no styling when pulled from collection, you style it by using the styling for the collection item itself. There are restrictions however if you try to use the built in color overlay it will return the whole thing to default. In which case for collection pages you have to add the overlay div. For use on a section in collections it is best to put a div in the section set absolute positioning and then apply the bg image to the div.
hope this helps let me know if this is what you were looking for
one added note, it is best to resize you images before uplaoding to fit the container you are using or close to. Because when I apply cover and center to the images they all don’t fit in the slider. With vital parts cut out. If you don’t want full slider images you can set to contain and then put repeat on none. But if your images are different sizes it can look odd as well.
Using the colour overlay on the flat pages which don’t link to any collections and that works really well.
It’s really the articles template banner which is the issue. More specifically the hero blog class.
Struggling to even find the right image size to upload at this point, tearing my hair out!
for hero images I use a width of 1500 usually i find it covers the most common desktop and laptop. Then depending on VH That gives me a rough idea of how long to make it 40 VH roughly 400px. There may be other methods people use but it saves a huge headache by setting an image size beforehand.
Yeah I’ve tried all sorts of varying sizes and cannot for the life of me find an image size that looks like the uploaded image without stretching and general weirdness in that container.
Thanks for your replies btw, appreciate you taking the time.
If you don’t want it to take up whole slider put a div in the slider itself
and control the size of it then simply make your background image fit the
ratio of the container.
