-
Notifications
You must be signed in to change notification settings - Fork 3.2k
-
In reference to the portfolio tab.
I am looking for advice on how to display the "short description" text from above each image to the right hand size of the image. I plan to use smaller images to allow for more text
Is this an easy thing to do? And which file would i need to edit to alter this layout?
Beta Was this translation helpful? Give feedback.
All reactions
This is the block of code with the relevant div and img tags -
<div class="archive__item-teaser"> <img src= {% if teaser contains "://" %} "{{ teaser }}" {% else %} "{{ teaser | prepend: "/images/" | prepend: base_path }}" {% endif %} alt=""> </div>
However, working with the template means a mix of HTML, CSS, and Liquid to work with, so it can be a bit challenging to really customize things. Odds are archive__item-teaser is the one to focus on, and the SCSS is in _sass/layout/_archive.scss
Replies: 1 comment 3 replies
-
The code that controls the layout of the text in relation to the image is in _includes/archive-single.hml but you are going to need to do a bit of adjusting to get it to work well. Here's a tutorial that discusses one way to do it.
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks this is very helpful.
However it is unclear (to me) as to which class(es) in the archive-single.html page i need to be targeting
Beta Was this translation helpful? Give feedback.
All reactions
-
This is the block of code with the relevant div and img tags -
<div class="archive__item-teaser"> <img src= {% if teaser contains "://" %} "{{ teaser }}" {% else %} "{{ teaser | prepend: "/images/" | prepend: base_path }}" {% endif %} alt=""> </div>
However, working with the template means a mix of HTML, CSS, and Liquid to work with, so it can be a bit challenging to really customize things. Odds are archive__item-teaser is the one to focus on, and the SCSS is in _sass/layout/_archive.scss
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
i see, thanks. This might be too much for me to do. Not sure i have the skills. Appreciate the response
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1