8 years ago
5
Topic

Hi All,

I'm trying to figure out if it is possible to create a content type where the item view has a full width image in the content container and that the remaining content (or some ) fields float on top of the image.

I'm trying to understand the backstretch template which is a list and search type.  So I'm not sure if that would work for the content view.  Perhaps the content view could have a module that was a list type only showing the one image that relates to the article.

I tried doing something with negative margins on an image that was under the content but that got clipped off as the image went up.

Are there any examples of content floating over the item image?  

Get a VIP membership
4229 Posts
Kadministrator
8 years ago
0
Level 1

Hi,

yes, this is doable using backstretch template. As it is list template you can put it in separate list and use it in module position or insert it to content view using seblod list field. 

To show right image with right content you can use related article field in this content type and do a search with live value on this field set to url->id, this way you will get only images related to this content.

8 years ago
1
Level 1

Hi Klas, thank you for your reply.

Here are a couple images of my field configs.

https://www.dropbox.com/sh/wk0ymg69hknnk5l/AAB6knipXIlI0vQ8n8ztl3_Ga?dl=0

So I was able to get that far on my own. I created a list type and associated the Article ID var/int/id. I also created a module position and list module and everything works so far. When I view my content type I can see the correct image in the module position. My problem is with the backstretch template and getting that to work.

If I switch template to backstretch I am having problems with the configuration. Can't get anything to show. I think my problem is with targeting the selector. I'v tried a few variations on things but not getting any output on the page.

I'm trying to target the container div "item-page". I've tried putting [item-page] and [.item-page] in the selector box. Are there any other setting that I'm missing?

In either case the module position is empty and also the selector does not have any background assigned if I inspect with firebug.

If I switch the list template back to sebone then the image will reappear on the content item in the module position. I feel like I'm so close.

Thank you again for your help

4229 Posts
Kadministrator
8 years ago
0
Level 2

Your search will not produce any results, having article id field in the search form from your first screenshot is wrong, it will search for article with this id, but as article with this id belongs to some other content type you will not get any results. You need:

a) related article field in your images content type, so it should at least contain related article and upload image fields. Also you need to make sure every record has this field saved, so open each image and save it again.

b) related article field in images search view of s/l type with live url->id (and image field in list view).

8 years ago
0
Level 1

Hi Klas,

I'm a little confused by some things you suggest.  I just want to be clear on what I'm trying to do.

Show Joomla Intro image as backstretch on the content view of the article.

I say this because your instruction sounds like there are two content types.  but I think I only have one.  i don't have another content type just for images.  I want to pull the image that is part of the original content type.

Where I'm at now is I've changed my Search Type to use Article(Related) and set live value to var/int/id.

https://www.dropbox.com/sh/wk0ymg69hknnk5l/AAB6knipXIlI0vQ8n8ztl3_Ga?dl=0

I've got list field set to image.

When I view from the front end I'm getting this in the header, it is coming from the module list type in the content view.  if I turn the module off the error goes away, so it looks like i'm not filtering correctly.  At this point I'm just trying to get my image to show in the position, my list type template is sebone.

Error

There is no result.

8 years ago
0
Level 1

With  little help Ia was able to come up with the solution.  I will post my results and config later but didn't want you to waste time answering my questions.  

Thanks again for your help.  I have it working now and will post a tutorial on it.

Get a VIP membership